주요태그 4. 표 - table

표1 : 기본

표를 영어로 하면 'table'입니다.

 

1. <td> 태그
- table data의 약자 입니다. 즉 표의 각각의 실제 데이터들을 의미 합니다.
- 항목 하나하나를 <td> 태그 안에 넣어 줍니다.

2. <tr> 태그
- tr은 tabler row의 약자 입니다.
- <td>로 만든 항목을 <tr> 태그로 묶어 행을 만들어 줍니다.
( 웹 브라우저는 <tr>안에 있는 <td> 들을 같은 행으로 묶어 줍니다.)

3. <table> 태그
- <tr>태그들 모두를 <table> 로 묶어 줍니다.

4. <table boder="값"> boder 속성을 이용해서 "테두리" 주기

Information

실제로 table을 꾸미기 위해서는"css"를 이용해야 더욱 보기 좋게 만들 수 있다.

과거에는 웹사이트를 만들떄 테이블로 레이아웃을 만들었지만(표는 원래 레이아웃을 만드는 태그가 아님), 코드가 복잡하고 실용성이 없어 W3C에서이것으로 레이아웃을 만드는 것을 금지하고 다른 태그들과 css를 통해 만들도록 하였다. 따라서 현재는 table로 레이아웃을 하는 경우는 아주 극히 드물고 권장하지 않는다. (나는 table을 통해서 레이아웃을 만든적이 없음.)

 

표2 : 구조

<thead></thead>
<tbody></tbody>
<tfoot></tfoot>

 

• <thead>: 태이블 태그의 head부분에 해당합니다.
• <tbody>: 태이블 태그의 본문(body)에 해당합니다.
• <tfoot>: 태이블 태그의 footer부분에 해당합니다.
• <td> : 일반 굵기의 글씨로 표현됩니다.
• <th> : 굵은 글씨로 표현 됩니다.

<thead>,<tbody>를 안한다고 해서 태이블을 표현하지 못하는 것은 아닙니다. 작성자가 하지 않으면 브라우저가 알아서 적용해 줍니다.

표3 : 병합