3-9. 표를 만드는 테이블 요소

3-9. 표를 만드는 테이블 요소

2017. 12. 15. 20:53ㆍ웹 표준 퍼블리싱 바이블

1. 표를 작성할 때에는 블록 레벨 요소인 <table>요소를 사용합니다. 표의 기본 구조는 먼저 <tr>요소로 행(table row)을 정의하고, 그 안에 제목 셀(table header cell)인 <th>요소와 데이터 셀(table data cell)인 <td>요소를 넣은 후에 전체를 <table>요소로 둘러싸게 됩니다.

<table>요소에 "summary"속성을 사용하여 요약문을 작성하고, 표에 대한 설명은 <caption>요소를 사용하며 표의 행을 그룹화하기 위해 <thead>요소, <tbody>요소, <tfoot>요소를 사용하기도 합니다. <th>에는 이 제목이 지시하는 방향과 범위를 알려주는 "score"속성을 지정할 수 있고, "id"와 "headers"속성을 이용해서 그 관계를 좀 더 명확히 할 수도 있습니다.

2. table 요소의 기본 구조

<table>요소에는 "cellpadding(cell의 안쪽 공간)", "cellspacing(cell 사이의 여백)", "border", "width", "align" 등의 속성이 있습니다만, 웹 표준에서는 "border", "width" 정도만 HTML에 적용하고 나머지는 CSS로 처리하도록 규정합니다. 또한, HTML5에서는 "width"마저도 CSS로 표현해야 합니다.

3. 다음의 예제에서 <table> 구조를 확인하시기 바랍니다.

-1) <caption>요소는 이 테이블에 대한 제목이나 설명을 나타내는 부분입니다. <caption>요소에는 경우에 따라 인라인과 블록 요소들을 적용할 수 있습니다.

-블럭요소

</table>

-인라인요소

</caption>

</table>

-2) 제목의 그룹과 데이터의 그룹을 <thead>요소와 <tbody>요소로 묶어줄 수 있습니다. 결과가 있는 표라면 <tfoot>요소를 적용합니다. 단, <tfoot>요소는 반드시 <thead>다음에 작성해야 합니다.

※<tfoot>을 <thead> 다음에 작성하더라도 브라우저에서는 <thead>와 <tfoot>가 모두 끝난 이후에 마지막으로 표현됩니다.

</caption>

</table>

<tfoot>을 적용할 때는 다음과 같이 지정합니다.

</caption>

</table>

-3) "scope"속성은 행의 제목인 <th>요소에 작성하며, 그 제목이 나타내는 범위를 지정합니다.

※ "scope"는 세로(column)방향은 "col", 가로(row)방향은 "row"로 지정합니다.

</caption>

<thead>

<tr>

<th scope="col">title1</th>

<th scope="col">title2</th>

<th scope="col">title3</th>

</tr>

</thead>

<tfoot>

<tr>

<th scope="row">resultTitle1</th>

<td>result2</td>

<td>result3</td>

</tr>

</tfoot>

<tbody>

<tr>

<th scope="row">subTitle1-1</th>

</tr>

<tr>

<th scope="row">subTitle2-1</th>

</tr>

</tbody>

</table>

-4) "scope" 속성에 대하여 좀 더 명확히 제목과 데이터를 연결하는 방법이 있습니다. "id"와 "headers" 속성을 사용하는 방법입니다. <th>요소에 "id"속성으로 이름을 부여하고, <td>요소에 "headers"속성으로 해당 제목의 "id"를 입력합니다.

</caption>

<thead>

<tr>

<th scope="col" id="a1">title1</th>

<th scope="col" id="a2">title2</th>

<th scope="col" id="a3">title3</th>

</tr>

</thead>

<tfoot>

<tr>

<th scope="row" id="re">resultTitle1</th>

<td id="a2re">result2</td>

<td id="a3re">result3</td>

</tr>

</tfoot>

<tbody>

<tr>

<th scope="row" id="b1">subTitle1-1</th>

</tr>

<tr>

<th scope="row" id="b2">subTitle2-1</th>

</tr>

</tbody>

</table>

-5) "summary"속성은 이 테이블의 내용을 요약한 부분입니다.

※ "summary"는 XHTML1.0에서는 필수 요소로 쓰였습니다. 그러나 HTML5에서는 "summary" 속성을 사용하지 말 것을 주문하고 있습니다. 대신 HTML5에서는 "figure"와 "figcaption"을 활용할 수 있습니다. <figure>요소는 <title>요소의 바깥을 감싸게 되므로, "figcaption"으로 설명을 표현하는 경우에는 <caption>요소 또한 생략합니다.

</caption>

</table>

"figcaption"과 "figure"를 활용한 방법은 다음과 같습니다.

</figcaption>

<thead>

<tr>

<th scope="col" id="a1">title1</th>

<th scope="col" id="a2">title2</th>

<th scope="col" id="a3">title3</th>

</tr>

</thead>

<tfoot>

<tr>

<th scope="row" id="re">resultTitle1</th>

<td id="a2re">result2</td>

<td id="a3re">result3</td>

</tr>

</tfoot>

<tbody>

<tr>

<th scope="row" id="b1">subTitle1-1</th>

</tr>

<tr>

<th scope="row" id="b2">subTitle2-1</th>

</tr>

</tbody>

</table>

</figure>

-6) 각 셀의 크기는 "colgroup"과 "col"을 통해 지정합니다. 하지만, HTML5에서는 "col"에도 width를 쓰지 말고 CSS로 처리해야 합니다.

.col1{width: 100px;}

.col2{width: 200px;}

.col3{width: 300px;}

</style>

</colgroup>

</figcaption>

<thead>

<tr>

<th scope="col" id="a1">title1</th>

<th scope="col" id="a2">title2</th>

<th scope="col" id="a3">title3</th>

</tr>

</thead>

<tfoot>

<tr>

<th scope="row" id="re">resultTitle1</th>

<td id="a2re">result2</td>

<td id="a3re">result3</td>

</tr>

</tfoot>

<tbody>

<tr>

<th scope="row" id="b1">subTitle1-1</th>

</tr>

<tr>

<th scope="row" id="b2">subTitle2-1</th>

</tr>

</tbody>

</figure>

</table>

-7) 각 셀을 합쳐야 하는 경우에는 "colspan(열 병합, 가로 셀 합치기)"과 "rowspan(행 병합, 세로 셀 합치기)" 속성을 적용합니다. 값으로는 합쳐야 하는 셀의 수를 입력하고, 합친 후에는 필요가 없어진 요소를 지워줍니다.

-colspan

</colgroup>

</figcaption>

<thead>

<tr>

<th scope="col" id="a1">title1</th>

<th scope="col" id="a2">title2</th>

<th scope="col" id="a3">title3</th>

</tr>

</thead>

<tfoot>

<tr>

<th scope="row" id="re">resultTitle1</th>

<td id="a2re">result2</td>

<td id="a3re">result3</td>

</tr>

</tfoot>

<tbody>

<tr>

<th scope="row" id="b1">subTitle1-1</th>

</tr>

<tr>

<th scope="row" id="b2">subTitle2-1</th>

</tr>

</tbody>

</figure>

</table>

-rowspan

</colgroup>

</figcaption>

<thead>

<tr>

<th scope="col" id="a1">title1</th>

<th scope="col" id="a2">title2</th>

<th scope="col" id="a3">title3</th>

</tr>

</thead>

<tfoot>

<tr>

<th scope="row" id="re">resultTitle1</th>

<td id="a2re">result2</td>

<td id="a3re">result3</td>

</tr>

</tfoot>

<tbody>

<tr>

<th scope="row" id="b1">subTitle1-1</th>

</tr>

<tr>

<th scope="row" id="b2">subTitle2-1</th>

</tr>

</tbody>

</figure>

</table>

저작자표시 비영리 동일조건

'웹 표준 퍼블리싱 바이블' 카테고리의 다른 글

3-11. 이미지와 관련된 요소들 (0)	2017.12.26
3-10. 앵커(Anchor)의 표현 (0)	2017.12.25
3-8. 각종 목록을 표현하는 요소 (0)	2017.10.12
3-7. 인용문, 정형화된 텍스트 알아보기 (0)	2017.10.11
3-6. 제목, 문단, 연락처정보, 구분선 알아보기 (0)	2017.10.10

앙큼한유채's 일상 Story

앙큼한유채's 일상 Story

태그

최근글

댓글

공지사항

아카이브

'웹 표준 퍼블리싱 바이블' 카테고리의 다른 글

관련글

티스토리툴바