HTML table 구조 와 정의

웹디자인시 웹표준이 이슈화 되기전에는 테이블로 많은 

레이아웃을 잡은 홈페이지들이 있었으나

현재 레이아웃은 DIV로 코딩하고 Table은 데이터의 목록이나 게시판에 

데이터출력에 사용됩니다. 

그렇다고 Table태그를 사용안하는 것이 웹표준화가 아닙니다.  

데이터 출력시 정확한 정보로 코딩하는 습관을기르는게 좋다고 볼 수 있습니다. 

<예제 첨부파일 미리보기>

<table summary="테이블 내용 요약" cellpadding="0" cellspacing="0">

<caption>테이블 제목</caption>

<colgroup><col width="100px" /><col width="100px" /><col width="100px" /></colgroup>

<thead>

<tr>

    <th>제목</th>

    <th>제목</th>

    <th>제목</th>

</tr>

</thead>

<tfoot></tfoot>

<tbody>

<tr>

    <td>내용 내용 내용</td>

    <td>내용 내용 내용</td>

    <td>내용 내용 내용</td>

</tr>

<tr>

    <td>내용 내용 내용</td>

    <td>내용 내용 내용</td>

    <td>내용 내용 내용</td>

</tr>

</tbody>

</table>

  

<colgroup> : 열(cloumn) 전체를 그룹으로 지정 

<col> : 열(cloumn) 각각의 속성 지정 

<thead>, <tbody>, <tfoot> : 

- 표의 행<tr>을 그룹핑하는 요소로서 표의 헤더, 본문, 풋터를 지정합니다.

- tfoot요소의 경우 해당하는 데이터가 없는 경우 생략할 수있습니다.   

 

<tr> : 표의 행을 정의

<th> : 표의 제목 셀(cell)

<td> : 표의 데이터 셀(cell)

참고 : <tfoot> 의 사용은 약간 주의가 필요합니다. 바로 <theader> 와 <tbody> 사이에 와야 한다는 것입니다.

          <theader> - 머릿글

          <tfoot> - 요약글

📁예제파일 다운로드