[HTML5/CSS3] 테이블 (Table)
테이블(Table)은 HTML에서 표를 만드는 데 사용하는 태그입니다.
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
테이블은 <table>로 시작해 </table>로 끝납니다. <table> 태그 내부에 <tr>은 행을, <td>는 각 행에 있는 셀을 의미합니다.
<table>에서 border 속성을 사용하면 테두리의 두께를 지정할 수 있습니다.
<table border="3">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<th> 태그를 사용하면 테이블의 각 셀에서 '제목'을 표시할 수 있습니다.
<table>
<tr>
<th>날짜</th>
<th>매출</th>
</tr>
<tr>
<td>2019.08</td>
<td>2,000</td>
</tr>
<tr>
<td>2019.09</td>
<td>3,300</td>
</tr>
</table>
만약 셀에 같은 내용이 있고, 이들 셀을 병합해야 한다면 colspan을 사용하여 원하는 셀만큼 병합할 수 있습니다.
<table border="3">
<tr>
<th>날짜</th>
<th>현매출</th>
<th>전매출</th>
</tr>
<tr>
<td>2019.08</td>
<td colspan="2">2,000</td>
</tr>
<tr>
<td>2019.09</td>
<td>3,300</td>
<td>4,000</td>
</tr>
</table>
셀 대신 행을 병합해야 한다면 rowspan을 사용합니다.
<table border="3">
<tr>
<th>날짜</th>
<th>현매출</th>
<th>전매출</th>
</tr>
<tr>
<td>2019.08</td>
<td>2,000</td>
<td rowspan="2">2,000</td>
</tr>
<tr>
<td>2019.09</td>
<td>3,300</td>
</tr>
</table>
<th>는 각 셀의 제목을 나타내지만 <caption>을 사용하면 테이블 전체에 대한 제목을 지정할 수 있습니다.
<table>
<caption>매출분석자료</caption>
<tr>
<th>날짜</th>
<th>매출</th>
</tr>
<tr>
<td>2019.08</td>
<td>2,000</td>
</tr>
<tr>
<td>2019.09</td>
<td>3,300</td>
</tr>
</table>
<colgroup>은 테이블에서 특정 순서의 셀을 별도로 지정하고자 할 때 사용합니다.
<table>
<caption>매출분석자료</caption>
<colgroup>
<col style="background: red;" />
<col span="2" style="background: yellow;" />
</colgroup>
<tr>
<th>번호</th>
<th>날짜</th>
<th>매출</th>
</tr>
<tr>
<td>1</td>
<td>2019.08</td>
<td>2,000</td>
</tr>
<tr>
<td>2</td>
<td>2019.09</td>
<td>3,300</td>
</tr>
</table><colgroup> 내부에 <col> 태그를 사용하면 순서대로 각 셀을 지정할 수 있습니다. 따라서 첫 번째 <col> 태그는 첫 번째 셀을 의미하게 되고 지정한 style에 따라 첫 번째 셀의 배경색을 붉은색으로 처리합니다. 두 번째 <col> 태그에서는 span속성을 통해 두 번째와 세 번째 셀을 통합하여 처리하도록 지정하였습니다. 따라서 두 번째와 세 번째 셀의 배경을 노란색으로 처리합니다.
테이블에서 셀의 제목을 따로 분리하여 지정하고자 한다면 <thead> 태그를 사용할 수 있습니다.
<table>
<caption>매출분석자료</caption>
<colgroup>
<col style="background: red;" />
<col span="2" style="background: yellow;" />
</colgroup>
<thead style="background: blue;">
<tr>
<th>번호</th>
<th>날짜</th>
<th>매출</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>2019.08</td>
<td>2,000</td>
</tr>
<tr>
<td>2</td>
<td>2019.09</td>
<td>3,300</td>
</tr>
</table>
그외 <tbody>는 테이블의 몸체를 <tfoot>는 테이블의 밑글을 의미합니다.
<table>
<caption>매출분석자료</caption>
<colgroup>
<col style="background: red;" />
<col span="2" style="background: yellow;" />
</colgroup>
<thead style="background: blue;">
<tr>
<th>번호</th>
<th>날짜</th>
<th>매출</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2019.08</td>
<td>2,000</td>
</tr>
<tr>
<td>2</td>
<td>2019.09</td>
<td>3,300</td>
</tr>
</tbody>
<tfoot style="background: green;">
<tr>
<th>번호</th>
<th>날짜</th>
<th>매출</th>
</tr>
</tfoot>
</table>