[HTML] 표 관련 태그

< 표 관련 태그 >

 

•  표 : 행과 열로 이루어짐. 문서에서 다량의 데이터를 정리해서 표현하고자 할 때 사용

<table></table> : 표를 생성해주는 태그

<caption></caption> : 테이블의 제목 추가. 기본적으로 글자가 테이블 상단 중앙

<tr></tr> : 표의 한 행(가로 한 줄)을 나타내는 태그

<th></th> : 열의 제목 셀을 나타내는 태그. 기본적으로 글자가 가운데정렬 + 볼드체

<td></td> : 표의 일반 셀(한 칸)을 나타내는 태그. 일반글꼴

 

 

• 테이블의 구조와 관련된 태그

<thead></thead> : 테이블 당 하나만 존재 가능. 

<tbody></tbody> 

<tfoot></tfoot> : 테이블 당 하나만 존재 가능. thead 뒤에 존재해야 함

 

 

• 셀의 크기와 관련된 속성

  : 셀 태그(, )와 속성을 이용해서 셀의 크기를 지정할 수 있음(단위 px)

    width="숫자" : 가로길이 지정. 

    height="숫자" : 세로길이 지정. 행의 첫 열에만 지정하면 행 전체에 적용

 

 

• 테이블의 행과 열을 합치는 속성

  : 셀 태그(<th>, <td>)와 속성을 이용해서 행 또는 열을 합칠 수 있음

    colspan = "숫자" : 숫자 만큼의 열을 합치겠다. (가로로 병합)

    rowspan = "숫자" : 숫자 만큼의 행을 합치겠다. (세로로 병합)

 

 

<table border="1"> <!-- border : 테두리(사용하면 XXX) -->
    <thead>
        <tr>
            <tr>
                <th colspan="5">게시판</th> <!-- 열 병합 -->
            </tr>
            <tr>
                <th>글번호</th>
                <th width="200">제목</th> <!-- 해당 열 가로크기 지정 -->
                <th>닉네임</th>
                <th>작성일</th>
                <th>조회수</th>
            </tr>
    </thead>
    <tbody>
        <tr>
            <td>5</td>
            <td>글 5</td>
            <td>관리자</td>
            <td>2022-10-18 14:22</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>글 4</td>
            <td>관리자</td>
            <td>2022-10-17 16:42</td>
            <td>32</td>
        </tr>
        <tr>
            <td>3</td>
            <td>글 3</td>
            <td>관리자</td>
            <td>2022-10-17 16:23</td>
            <td>0</td>
        </tr>
        <tr>
            <td>2</td>
            <td>글 2</td>
            <td>관리자</td>
            <td>2022-10-17 10:15</td>
            <td>15</td>
        </tr>
        <tr>
            <td>1</td>
            <td>첫 글</td>
            <td>관리자</td>
            <td>2022-10-17 01:11</td>
            <td>3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td rowspan="2">합계</td> <!-- 행 병합 -->
            <td colspan="4">총 게시글 수 : 5</td>
        </tr>
        <tr>
            <td colspan="4">총 조회수 : 53</td>
        </tr>
    </tfoot>
</table>

- 결과 -