[HTML] 테이블 태그 - TABLE 태그, TR 태그, TD 태그

 Table 태그는 웹페이지 안에 표를 만들어주는 태그입니다. 웹페이지를 보다 깔끔하게 보이도록 작성할 수 있는 장점이 있습니다.

1. 기본구조

<table>
    <tr>
        <td> A </td>
        <td> B </td>
    </tr>
    <tr>
        <td> C </td>
        <td> D </td>
    </tr>
</table>

 표를 만들기 위해서는 table 태그를 입력합니다. 한 행을 표현하기 위해서는 tr 태그, 한 셀을 표현하기 위해서는 td 태그를 사용합니다. 위의 예제의 경우 가로세로 2칸씩으로 된 표가 보여집니다.

2. table 태그 속성

<table border="1" width="200" bgcolor="#8C8C8C">
    <tr width="100" align="center">
        <td> A </td>
        <td> B </td>
    </tr>
    <tr>
        <td> C<br/>C<br />C </td>
        <td valign="bottom"> D </td>
    </tr>
</table>

* 실행결과

A	B
C C C	D

 table 태그의 border 속성은 표의 테두리 굵기를 의미합니다. 1픽셀로 지정한 상태입니다. width는 가로 너비를 의미하는데 픽셀단위나 %단위로 지정가능합니다. bgcolor는 표의 배경색상을 지정하는 속성입니다.

 tr태그와 td태그에서는 사용하는 속성이 동일하게 적용되며, width는 가로 너비, align은 가로 정렬 방식(left, center, right), valign은 세로 정렬방식(top, middle, bottom)입니다. 예제에서 첫번째 행은 가로로 가운데 정렬시켰고 두번째 행의 두번째 열은 표의 내용을 하단정렬한 모습입니다.

3. 표 제목과 설명 추가

<table border="1" width="200">
    <tr width="100">
        <th> 상품명 </th>
        <th> 판매량 </th>
    </tr>
    <tr>
        <td> 사과 </td>
        <td> 100 </td>
    </tr>
    <tr>
        <td> 복숭아 </td>
        <td> 300 </td>
    </tr>
    <caption> 표1. 상품 판매량 </caption>
</table>

* 실행결과

표1. 상품 판매량

상품명	판매량
사과	100
복숭아	300

 th 태그는 표 내부의 제목이 될 셀을 지정하는 태그입니다. 적용하면 글자가 가운데정렬과 굵게 표시가 됩니다. caption 태그는 표 자체의 제목을 정하는 태그입니다. 이 때 제목의 기본위치는 표 윗부분에 가운데 정렬로 설정되어 있습니다.