표 관련 태그

웹 문서에서 자료 정리를 위해 주로 사용하며 행과 열로 이루어져 있고 행과 열이 교차하는 지점을 셀(cell)이라고 한다.

table 태그는 테이블을 나타내는 행과 열이 작성될 수 있는 영역을 지정하는 역할을 한다.

표 관련 태그 종류

• table 태그 : 테이블을 나타내는 행과 열이 작성될 수 있는 영역을 지정하는 역할을 한다.
• tr 태그 : Table Row의 약자로 한 행을 나타내는 태그
• tb 태그 : Table Data의 약자로 한 행의 한 컬럼(==cell)을 나타내는 태그
• th 태그 : Table Hearder의 약자로 컬럼명을 표시하는 용도의 태그, 기본 성질은 tb와 같으나 추가적으로 굵은 글씨, 가운데 정렬이 자동으로 이루어진다.
• caption 태그 : 테이블의 제목이나 설명 내용을 추가하는 태그

[ 사용법 ]

 <!-- border="1" : table, td 태그에 1px 짜리 검정 테두리 추가 -->
    <table border="1">

        <tr> <!-- 1행 -->
            <th>브라우저</th> <!-- 1행 1열 -->
            <th>제조사</th> <!-- 1행 2열 -->
            <th>제조사 홈페이지</th> <!-- 1행 3열 -->
        </tr>

        <tr> <!-- 2행 -->
            <td>크롬</td> <!-- 2행 1열 -->
            <td>Google</td> <!-- 2행 2열 -->
            <td>https://www.google.com</td> <!-- 2행 3열 -->
        </tr>

        <tr> <!-- 3행 -->
            <td>엣지</td> <!-- 3행 1열 -->
            <td>MS</td> <!-- 3행 2열 -->
            <td>https://www.microsoft.com</td> <!-- 3행 3열 -->
        </tr>

        <tr> <!-- 4행 -->
            <td>파이어폭스</td> <!-- 4행 1열 -->
            <td>Mozilla</td> <!-- 4행 2열 -->
            <td>https://www.mozilla.com</td> <!-- 4행 3열 -->
        </tr>
    </table>

행,열 병합 ( rowspan / colspan )

tb 또는 th 태그에 작성하는 속성

• rowspan : 행(상하) 병합
• colspan : 열(좌우) 병합

[ 사용법 ]

<table border="1">
        <tr>
            <th width="70px">이름</th>
            <td width="210px"></td>
            <th width="140px" height="140px" rowspan="2">사진</th>
        </tr>

        <tr>
            <th>연락처</th>
            <td>010-1111-1111</td>
        </tr>

        <tr>
            <th height="35px">주소</th>
            <td colspan="2"></td>
        </tr>

        <tr>
            <th height="140px">자기소개</th>
            <td colspan="2"></td>
        </tr>

    </table>

테이블 구조 설정 태그

• thead : 테이블의 상단 부분 영역 (컬럼명)
• tbody : 테이블의 중단 부분 영역 (실제 값, 내용)
• tfood : 테이블의 하단 부분 영역 (합계)

[ 사용법 ]

<table class="tb3">
  
        <thead>
            <th>이름</th>
            <th>나이</th>
            <th>주소</th>
        </thead>

        <tbody>
            <tr>
                <td>홍길동</td>
                <td>20</td>
                <td>서울시 구로구</td>
            </tr>
            <tr>
                <td>고길동</td>
                <td>24</td>
                <td>서울시 강남구</td>
            </tr>
            <tr>
                <td>조미연</td>
                <td>32</td>
                <td>서울시 중구</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <th colspan="2">총인원</th>
                <th>3명</th>
            </tr>
        </tfoot>
  
    </table>