반응형
HTML5 Table Tag
웹표준을 시작하기 전 HTML Tag에서 알아야 할 Tag 중 <table>태그를 빼놓을 수 없다.
한글에서도 표를 만들 줄 알아야 문저가 깔끔해지듯이 웹문서도 표<table>을 만들 수 있을 때 비로소 HTML을 할 줄 안다고 말 할 수 있을것이다.
표를 만들 때 필요한것 : 줄, 칸, 내용 (가장 기본적인 내용들이다.)
1. Table Tag의 기본구조
이 논리적인 구성요소를 태그로 옮겨써보면,
| <table>.............</table> | 테이블 시작하는 태그 |
| <tr>..........</tr> | 한줄 시작하는 태그 |
| <td>..........</td> | 한칸 시작하는 태그 |
이 외에 옵션으로 추가할 수 있는 내용들을 보면
| <caption>설명이나제목</caption> | table의 설명이나 제목을 표시한다. |
| <colgroup><cols>...</colgroup> | colgroup은 cols(열)의 너비를 정할때 cols를 묶는 역할을 한다. |
| <thead> | <thead>태그는 보통 표의 제일 위 영역을 표시할 때 자주 사용하며, <tr>안에서 밖에서 쓰여지고 <tr>안에 <td>보다는 <th>를 사용하여 표의 상단이라는 표시를 하게 한다. |
| <tbody> | <tbody>는 <thead>를 사용한 뒤 본문내용이라는 표시로 <tr>여러개를 묶어쓸때 사용한다. |
HTML5에서 table태그를 사용할때 위의 표에 있는 내용을 함께 입력해 주는것이 바람직 할 것이다. 기존의 html태그에서는 thead나 tbody 태그를 거의 사용하지 않았지만 HTML5에서 table을 쓸때 위의 태그를 함께 사용하여 웹접근성을 높일 수 있는 페이지를 제작하도록 하자!
2. HTML5에서 꼭 지켜야 할 Table 태그
보통 테이블 테두리 색상이나 두께를 설정할 때 우리는 아래의 태그처럼 많이 사용해 왔다.
<table bgcolor="red" cellpadding=0 cellspacing=0 align="center">
<tr>
<td>내용</td>
<td>내용</td>
</tr>
</table>
하지만 HTML5에서는 "align", "bgcolor", "border", "cellpadding", "cellspacing", "frame", "rules", "summary", "width" 속성을 지원하지 않는다.
위의 태그들을 사용하지 않고 테이블코딩을 하기 위해서 아래의 그림과 같은 테이블을 html5 태그만을 사용하여 제작해보자.
See the Pen Untitled by younwook choi (@wooknim) on CodePen.
