HTML5 : 표 <table> 태그
<table>
표를 만드는 태그.
과거에는 레이아웃을 잡기 위해 테이블을 만들고 그 안에 컨텐츠를 넣었으나 현재 그런 방법은 죄악처럼 여겨진다.
<table> 태그는 말 그대로 표를 만들 때 사용하도록 하자.
<table>를 선언한 후, 안에서 <tr>로 row를 만들고 <td>로 column을 만든다.
<td> 대신 <th>를 사용할 수도 있는데, <th>는 가운데정렬, 진하게 속성이 자동으로 부여된다.
스타일을 지정하지 않으면 투명한 격자에 담기므로 테두리(border)를 지정해줘야 구분할 수 있다.
최근에는 border 없이 색으로만 구별되게 하는 테이블 형식이 많긴 하다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> </body> </html> | cs |
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
colspan & rowspan
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td colspan="2">Sum: $180</td> </tr> </table> | cs |
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
| Sum: $180 | |
<caption>
<table>과 함께 쓰이며, 표에 제목을 달기 위한 태그다.
<caption>의 위치는 상관없이 <table>안에만 있으면 표 위쪽 중앙에 표시되지만 일반적으로 첫 <tr>전에 쓴다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <table> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table> | cs |
| Month | Savings |
|---|---|
| January | $100 |
| February | $50 |
<tbody>, <thead>, <tfoot>
표의 구조를 표의 제목과 본문, 그리고 요약 부분으로 나눈다.
시각 장애인도 화면 판독기를 통해 표의 구조를 쉽게 이해할 수 있다.
표의 본문이 길 경우 자바스크립트를 이용해 제목과 바닥부분을 고정하고 본문만 스크롤해서 사용하기도 한다.
<col>, <colgroup>
열끼리 묶어 스타일을 지정한다.
<col>
한 열에 있는 모든 셀에 같은 스타일을 적용한다. 닫는 태그가 없다.
<col>태그에 span 속성을 이용해 여러 열을 묶을 수 있다.
<colgroup>
<col span="2>를 사용하는 대신 <colgroup>안에 묶는 열의 개수만큼 <col>을 써줄 수도 있다.
<col>과 <colgroup>태그는 <caption>태그 뒤 <tr>,<td>전에 사용하며,
<colgroup>안에 있는 <col>을 비롯해 단독으로 사용한 <col> 개수와 표의 열개수가 같아야 한다.
