[element] table element - caption, colgroup, col, thead, tbody, tfoot, th
안녕하세요 Yanus Entertainment 한월입니다.
오늘은 "table" 에 대한 얘기를 잠시 해볼까 합니다.
기존에 사이트전체의 레이아웃을 table로 코딩하던 시절부터 참 많은 사랑을 받아왔던 element 죠 ㅎㅎ
그런데 html5가 나오고 웹표준을 논하면서 퍼블리셔들이 조금 고민을 하는것이 바로 "table element" 입니다.
table에 포함되어 있으나 기존에 잘 쓰지 않았던 <caption>, <colgroup>, <tbody> 등과 같은 태그들이 새롭게 부각되면서 익숙치않은 새로운 코딩을 하려니 조금 막막할수도 있겠습니다.
하지만 이러한 태그들은 4.01 시절부터 이미 존재를 해왔고, 다만 우리가 귀찮아서 자주 사용하지 않았을 뿐이지요 ^^
그래서 언제 또는 어디에 써야 하는가 같은 사용법과 의미론적인 개념에 대해 알아보도록 하겠습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {font: 12px tahoma;}
table {width: 400px; border: 1px solid #eee;}
caption {height: 30px;font: 16px arial; font-weight: bold;}
.name {width: 200px;}
.korean, .english {width: 100px;}
thead {background: #999;}
tr {height: 30px;}
td {background: #eee; padding-left: 10px;}
tfoot {background: #999;}
tfoot td {background: #ccc;}
</style>
</head>
<body>
<table>
<caption>Language Test Result</caption>
<colgroup>
<col class="name">
<col class="korean">
<col class="english">
</colgroup>
<thead>
<tr>
<th>name</th>
<th>korean</th>
<th>english</th>
</tr>
</thead>
<tbody>
<tr>
<td>KEN</td>
<td>70</td>
<td>40</td>
</tr>
<tr>
<td>RYU</td>
<td>50</td>
<td>90</td>
</tr>
<tr>
<td>BLANKA</td>
<td>60</td>
<td>20</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>average</th>
<td>60</td>
<td>50</td>
</tr>
</tfoot>
</table>
</body>
</html>
![](https://t1.daumcdn.net/cfile/tistory/270F06345261C1630E)
<위의 소스를 실행한 결과화면>
아 뭔가 굉장히 길어보입니다...;; 기존에 쓰던 태그만 사용을 하면 소스가 오히려 짧아질텐데 말이죠...
html5 의 규칙을 존중하는 것이 반드시 소스의 간결화를 가지고 오는것은 아닙니다. 좀더 의미화되고 명확한 구조를 만들기 위함이죠 ^^
(스타일부분에 대해선 크게 신경쓰지 않으셨으면 좋겠습니다. 우리가 지금 하려는건 구조에 대한 파악을 하려는 거니까요 ^^)
그럼 각 element 에 대해 하나하나 알아보도록 하겠습니다.
CAPTION - table title
어떤분들의 설명을 보면 "이미지나 표의 설명을 표현하는 태그" 라고 기재가 되어 있는걸 가끔 봅니다.
하지만 caption 은 이미지와는 상관이 없습니다. 순수하게 "표(table)" 에 대한 제목만을 기재하도록 명시되어 있습니다.
(Permitted parent elements - table)
이걸 넣는 이유는 이 표가 무엇을 나타내고 있는지 명시하기 위해서 입니다.
제가 표 밑에 <위의 소스를 실행한 결과화면> 이라고 단 저것이 실제코딩에서는 caption 안에 들어가야 한다는 이야기지요 ^^
그러한 이유로 table element 에 포함이 되지만 레이아웃은 table border 외부상단에 위치하게 됩니다.
소개한바와 같이 caption은 "표의 제목" 이므로 caption을 table내의 어느위치에나 두어도 항상 table의 윗부분에 존재하게 됩니다.
css로 caption-side: bottom; 를 주면 테이블 아래로 위치시킬수 있으나, 이게 css2 level 이므로 ie7에서는 적용이 되질 않습니다.
(ie7은 css2 level중 일부만 지원합니다.)
기본적인 align 역시 제목이므로 center 입니다.
/*
스크린리더기와 관련하여 table의 summary attribute를 논하시는 분들이 계신데, W3C에선 summary attribute를 html5 부터 공식적으로 지원하지 않으며, 될수 있는한 caption을 이용하거나 table에 이미지를 포함하여 표에 대한 설명을 기술하고, 아니면 더이상의 설명이
필요하지 않은 수준의 단순한 테이블로 구조화 하는것을 권고하고 있습니다.
*/
불가항력적으로 caption의 레이아웃을 표현하지 말아야 할경우는 display:none; 또는 visibility: hidden 을 쓰면 스크린리더기에 따라
해당 내용을 파악하지 못하는 경우가 있으므로 쓰지 마시길 바랍니다.
(검색하면 여러가지 방법이 있으니 참조하시길 바랍니다. 개발방법은 여러분의 자유니까요 ^^)
COLGROUP - table colume group
colgroup element 의 경우 상당히 sementic한 요소라 할수 있겠습니다.
테이블내에 존재하는 cell을 column 단위로 묶고(col) 그런 복수의 col을 다시 집합의 개념으로 markup 하는 의미론적 요소입니다.
반드시 하위에 col 태그를 포함해야 되는것은 아니며, colgroup 이 2개이상인 경우 각각의 colgroup 이 col의 기능을 수행하기도 합니다.
/*
이렇게 써도 된다라는 구체적 명시는 아직 찾지는 못했으나, Tag omission 규칙과 직접적인 테스트를 통하여 유추해 낸 결론입니다.
그러므로 너무 맹신하지는 마시길 바래요 ^^;;
*/
colgroup 이 지닐수 있는 attribute 는 global attributes 와 span 입니다.
COL - table column
colgroup 의 하위 element 이며 테이블을 구성하는 각각의 cell을 column 단위로 구분하여 묶은 집합을 의미합니다.
/* col tag는 void element 이므로 end tag가 없습니다. */
col 이 지닐수 있는 colgroup와 마찬가지로 global attributes 와 span 입니다.
![](https://t1.daumcdn.net/cfile/tistory/2557BF3E5262A2B42C)
<colgroup 과 col의 상관관계 모식도>
colgroup 과 col을 쓸때 주의할점
colgroup 이 col element 를 하위 element 로 가지고 있을 경우 span attribute는 적용이 되지 않으며, 그러므로 스타일도 원하는대로
지정하기 조금 힘듭니다.
그러므로 굳이 colgroup에 span 을 지정해야 하는 경우, 위에서 유추한 내용대로 colgroup 을 2개이상 사용하여 colgroup을 "col" 처럼
사용을 해야 합니다.
/*
위에서 얘기한 주의점 외에도 다른 여러가지가 있긴 한데 table을 코딩할때 사실상 너무나도 많은 변수(다양한 레이아웃)가 존재하므로, 이러저러한 상황결과를 블로그에 모두 기재를 하기엔 좀 무리가 있었습니다.
하지만 여러번의 테스트를 통해 얻은 결론은 colgroup은 col을 그룹화했다는 의미론적인 markup으로 사용하고 각각의 column은 col로
지정하여 css를 통해 스타일과 레이아웃을 적용하는것이 가장 좋았습니다.
그리고 span attribute도 colgroup에 지정하지 말고 col에 지정을 하는 습관을 들이도록 하세요 ^^
*/
THEAD - table heading group
table에서 각 column에 담긴 data또는 value가 가지고 있는 명시적의미를 나타내기 위해 정의하는 label 또는 heading 의 집합을 묶는 역할을 합니다.
이게 사실 영어를 번역한것도 아니고 저걸 뭐라고 표현해야 할지 난감합니다만, 단순하게 생각하면 각 colume 에 들어있는 값들이 무얼
의미하는지 표시했다.. 정도입니다. (이렇게 설명을 안해도 다들 저게 뭔지 아실거에요 ㅎㅎㅎ)
그런데, 이 포스팅을 준비하면서 조금 의아했던건 표의 구성방법입니다.
만약 표의 구성이 달라져서 해당 정의에 대한 부분을 table의 최상단 row가 아닌 맨 좌측 column을 기준해서 나열한다면...?
여기서 우리가 이해해야 할 부분은 "표" 라는것은 data의 값이 언제나 row 단위로 순차적으로 정렬이 되야 함을 의미합니다.
추후에 db를 공부하시거나 현재 알고 계시는 분도 있으시겠지만, 바로 record(레코드) 의 개념입니다.
thead의 특징이라면 table 안에서 어느곳에 위치하더라도 해당 element 는 항상 table의 상위에 놓이게 됩니다.
(실제적인 data나 value가 들어가는 record와는 확연히 구분을 짓기 위한 레이아웃 및 의미적 역할을 하게 됩니다.)
TBODY - table row group
thead에 정의된 의미에 맞는 record의 성격을 지닌 실질적인 data나 value가 들어가는 row를 구성합니다.
(어려운거 없습니다. 우리가 기존에 알고 있던 tr, td 로 구성해 주시면 됩니다 ^^)
TFOOT - table footer row group
tbody 에 있는 data나 value의 값을 조합하여 얻은 특수한 data나 value 또는 column의 부수적인 부분을 기재, 요약할때 사용합니다.
위의 제목에 "table footer row group" 라고 기재를 했는데, 조금 이상하지 않으신가요?
왜 thead의 제목에는 row가 없는데 여기엔 row가 있는걸까요?
바로 해당 element 에서 가지는 값이 data나 value 이기 때문입니다. 위에서 설명한 record 의 성격이 있는 것들이지요 ^^
예를 들자면 합계 또는 평균과 같은 값이라고 이해를 하시면 좀 수월하실듯 합니다.
보시는 바와 같이 해당 element 는 굉장히 의미론적인 성격이 강합니다.
그래서 tfoot의 경우, 의미에 맞지 않는다면 부득이 table을 구성하는데 사용하지 않으셔도 무방한 element 입니다.
특징이라면 thead과 같이 table 안에서 어느곳에 위치하더라도 해당 element 는 항상 table의 하위에 놓이게 됩니다.
또 한가지, 이것은 html5 에서 변경이 된 점인데 ..
html5 이전의 버젼에서는 tfoot은 문서내에서 언제나 tbody보다 먼저 기술 (thead - tfoot - tbody) 이 되었어야 합니다만,
html5 부터는 tbody 뒤에 기술 (thead - tbody - tfoot) 해도 상관이 없음을 알려드립니다 ^^
TH - table header cell
table을 구성하는 cell 중 data나 value가 아닌 column 이나 row의 집합에 대한 정의을 담은 cell을 표현하는데 사용합니다.
위의 소스를 보시면 tbody에 속한 cell중 average 의 cell을 제가 td가 아닌 th로 표현을 했지요?
바로 저런 역할입니다. record 성질을 가진 row에서 부가적인 label 을 표현하거나 thead 안에서 원래의 header를 표현해야 할 경우
th를 사용하게 됩니다.
th를 보면 thead가 어떠한 의미로 사용되는 element 인지 조금더 쉽게 이해가 가시죠? ㅎㅎ
또한가지의 특징이라면 th를 사용하면 추후 javascript 를 이용하여 table sorting 같은 기능구현을 할때 조금 더 편리하게 구현할 수
있다는 장점이 있습니다. (수많은 td를 굳이 일일히 id를 지정해서 사용하는 부담을 줄일수가 있으니까요 ^^)
되도않은 실력으로 끄적끄적 기재한 포스팅을 읽느라 고생하신 방문자분들~ 사랑합니다 헤헤 ^^
그럼 다음에 또 뵈요~
안녕하세요 Yanus Entertainment 한월입니다.
오늘은 "table" 에 대한 얘기를 잠시 해볼까 합니다.
기존에 사이트전체의 레이아웃을 table로 코딩하던 시절부터 참 많은 사랑을 받아왔던 element 죠 ㅎㅎ
그런데 html5가 나오고 웹표준을 논하면서 퍼블리셔들이 조금 고민을 하는것이 바로 "table element" 입니다.
table에 포함되어 있으나 기존에 잘 쓰지 않았던 <caption>, <colgroup>, <tbody> 등과 같은 태그들이 새롭게 부각되면서 익숙치않은 새로운 코딩을 하려니 조금 막막할수도 있겠습니다.
하지만 이러한 태그들은 4.01 시절부터 이미 존재를 해왔고, 다만 우리가 귀찮아서 자주 사용하지 않았을 뿐이지요 ^^
그래서 언제 또는 어디에 써야 하는가 같은 사용법과 의미론적인 개념에 대해 알아보도록 하겠습니다.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body {font: 12px tahoma;} table {width: 400px; border: 1px solid #eee;} caption {height: 30px;font: 16px arial; font-weight: bold;} .name {width: 200px;} .korean, .english {width: 100px;} thead {background: #999;} tr {height: 30px;} td {background: #eee; padding-left: 10px;} tfoot {background: #999;} tfoot td {background: #ccc;} </style> </head> <body> <table> <caption>Language Test Result</caption> <colgroup> <col class="name"> <col class="korean"> <col class="english"> </colgroup> <thead> <tr> <th>name</th> <th>korean</th> <th>english</th> </tr> </thead> <tbody> <tr> <td>KEN</td> <td>70</td> <td>40</td> </tr> <tr> <td>RYU</td> <td>50</td> <td>90</td> </tr> <tr> <td>BLANKA</td> <td>60</td> <td>20</td> </tr> </tbody> <tfoot> <tr> <th>average</th> <td>60</td> <td>50</td> </tr> </tfoot> </table> </body> </html>
<위의 소스를 실행한 결과화면>
아 뭔가 굉장히 길어보입니다...;; 기존에 쓰던 태그만 사용을 하면 소스가 오히려 짧아질텐데 말이죠...
html5 의 규칙을 존중하는 것이 반드시 소스의 간결화를 가지고 오는것은 아닙니다. 좀더 의미화되고 명확한 구조를 만들기 위함이죠 ^^
(스타일부분에 대해선 크게 신경쓰지 않으셨으면 좋겠습니다. 우리가 지금 하려는건 구조에 대한 파악을 하려는 거니까요 ^^)
그럼 각 element 에 대해 하나하나 알아보도록 하겠습니다.
CAPTION - table title
어떤분들의 설명을 보면 "이미지나 표의 설명을 표현하는 태그" 라고 기재가 되어 있는걸 가끔 봅니다.
하지만 caption 은 이미지와는 상관이 없습니다. 순수하게 "표(table)" 에 대한 제목만을 기재하도록 명시되어 있습니다.
(Permitted parent elements - table)
이걸 넣는 이유는 이 표가 무엇을 나타내고 있는지 명시하기 위해서 입니다.
제가 표 밑에 <위의 소스를 실행한 결과화면> 이라고 단 저것이 실제코딩에서는 caption 안에 들어가야 한다는 이야기지요 ^^
그러한 이유로 table element 에 포함이 되지만 레이아웃은 table border 외부상단에 위치하게 됩니다.
소개한바와 같이 caption은 "표의 제목" 이므로 caption을 table내의 어느위치에나 두어도 항상 table의 윗부분에 존재하게 됩니다.
css로 caption-side: bottom; 를 주면 테이블 아래로 위치시킬수 있으나, 이게 css2 level 이므로 ie7에서는 적용이 되질 않습니다.
(ie7은 css2 level중 일부만 지원합니다.)
기본적인 align 역시 제목이므로 center 입니다.
/*
스크린리더기와 관련하여 table의 summary attribute를 논하시는 분들이 계신데, W3C에선 summary attribute를 html5 부터 공식적으로 지원하지 않으며, 될수 있는한 caption을 이용하거나 table에 이미지를 포함하여 표에 대한 설명을 기술하고, 아니면 더이상의 설명이
필요하지 않은 수준의 단순한 테이블로 구조화 하는것을 권고하고 있습니다.
*/
불가항력적으로 caption의 레이아웃을 표현하지 말아야 할경우는 display:none; 또는 visibility: hidden 을 쓰면 스크린리더기에 따라
해당 내용을 파악하지 못하는 경우가 있으므로 쓰지 마시길 바랍니다.
(검색하면 여러가지 방법이 있으니 참조하시길 바랍니다. 개발방법은 여러분의 자유니까요 ^^)
COLGROUP - table colume group
colgroup element 의 경우 상당히 sementic한 요소라 할수 있겠습니다.
테이블내에 존재하는 cell을 column 단위로 묶고(col) 그런 복수의 col을 다시 집합의 개념으로 markup 하는 의미론적 요소입니다.
반드시 하위에 col 태그를 포함해야 되는것은 아니며, colgroup 이 2개이상인 경우 각각의 colgroup 이 col의 기능을 수행하기도 합니다.
/*
이렇게 써도 된다라는 구체적 명시는 아직 찾지는 못했으나, Tag omission 규칙과 직접적인 테스트를 통하여 유추해 낸 결론입니다.
그러므로 너무 맹신하지는 마시길 바래요 ^^;;
*/
colgroup 이 지닐수 있는 attribute 는 global attributes 와 span 입니다.
COL - table column
colgroup 의 하위 element 이며 테이블을 구성하는 각각의 cell을 column 단위로 구분하여 묶은 집합을 의미합니다.
/* col tag는 void element 이므로 end tag가 없습니다. */
col 이 지닐수 있는 colgroup와 마찬가지로 global attributes 와 span 입니다.
<colgroup 과 col의 상관관계 모식도>
colgroup 과 col을 쓸때 주의할점
colgroup 이 col element 를 하위 element 로 가지고 있을 경우 span attribute는 적용이 되지 않으며, 그러므로 스타일도 원하는대로
지정하기 조금 힘듭니다.
그러므로 굳이 colgroup에 span 을 지정해야 하는 경우, 위에서 유추한 내용대로 colgroup 을 2개이상 사용하여 colgroup을 "col" 처럼
사용을 해야 합니다.
/*
위에서 얘기한 주의점 외에도 다른 여러가지가 있긴 한데 table을 코딩할때 사실상 너무나도 많은 변수(다양한 레이아웃)가 존재하므로, 이러저러한 상황결과를 블로그에 모두 기재를 하기엔 좀 무리가 있었습니다.
하지만 여러번의 테스트를 통해 얻은 결론은 colgroup은 col을 그룹화했다는 의미론적인 markup으로 사용하고 각각의 column은 col로
지정하여 css를 통해 스타일과 레이아웃을 적용하는것이 가장 좋았습니다.
그리고 span attribute도 colgroup에 지정하지 말고 col에 지정을 하는 습관을 들이도록 하세요 ^^
*/
THEAD - table heading group
table에서 각 column에 담긴 data또는 value가 가지고 있는 명시적의미를 나타내기 위해 정의하는 label 또는 heading 의 집합을 묶는 역할을 합니다.
이게 사실 영어를 번역한것도 아니고 저걸 뭐라고 표현해야 할지 난감합니다만, 단순하게 생각하면 각 colume 에 들어있는 값들이 무얼
의미하는지 표시했다.. 정도입니다. (이렇게 설명을 안해도 다들 저게 뭔지 아실거에요 ㅎㅎㅎ)
그런데, 이 포스팅을 준비하면서 조금 의아했던건 표의 구성방법입니다.
만약 표의 구성이 달라져서 해당 정의에 대한 부분을 table의 최상단 row가 아닌 맨 좌측 column을 기준해서 나열한다면...?
여기서 우리가 이해해야 할 부분은 "표" 라는것은 data의 값이 언제나 row 단위로 순차적으로 정렬이 되야 함을 의미합니다.
추후에 db를 공부하시거나 현재 알고 계시는 분도 있으시겠지만, 바로 record(레코드) 의 개념입니다.
thead의 특징이라면 table 안에서 어느곳에 위치하더라도 해당 element 는 항상 table의 상위에 놓이게 됩니다.
(실제적인 data나 value가 들어가는 record와는 확연히 구분을 짓기 위한 레이아웃 및 의미적 역할을 하게 됩니다.)
TBODY - table row group
thead에 정의된 의미에 맞는 record의 성격을 지닌 실질적인 data나 value가 들어가는 row를 구성합니다.
(어려운거 없습니다. 우리가 기존에 알고 있던 tr, td 로 구성해 주시면 됩니다 ^^)
TFOOT - table footer row group
tbody 에 있는 data나 value의 값을 조합하여 얻은 특수한 data나 value 또는 column의 부수적인 부분을 기재, 요약할때 사용합니다.
위의 제목에 "table footer row group" 라고 기재를 했는데, 조금 이상하지 않으신가요?
왜 thead의 제목에는 row가 없는데 여기엔 row가 있는걸까요?
바로 해당 element 에서 가지는 값이 data나 value 이기 때문입니다. 위에서 설명한 record 의 성격이 있는 것들이지요 ^^
예를 들자면 합계 또는 평균과 같은 값이라고 이해를 하시면 좀 수월하실듯 합니다.
보시는 바와 같이 해당 element 는 굉장히 의미론적인 성격이 강합니다.
그래서 tfoot의 경우, 의미에 맞지 않는다면 부득이 table을 구성하는데 사용하지 않으셔도 무방한 element 입니다.
특징이라면 thead과 같이 table 안에서 어느곳에 위치하더라도 해당 element 는 항상 table의 하위에 놓이게 됩니다.
또 한가지, 이것은 html5 에서 변경이 된 점인데 ..
html5 이전의 버젼에서는 tfoot은 문서내에서 언제나 tbody보다 먼저 기술 (thead - tfoot - tbody) 이 되었어야 합니다만,
html5 부터는 tbody 뒤에 기술 (thead - tbody - tfoot) 해도 상관이 없음을 알려드립니다 ^^
TH - table header cell
table을 구성하는 cell 중 data나 value가 아닌 column 이나 row의 집합에 대한 정의을 담은 cell을 표현하는데 사용합니다.
위의 소스를 보시면 tbody에 속한 cell중 average 의 cell을 제가 td가 아닌 th로 표현을 했지요?
바로 저런 역할입니다. record 성질을 가진 row에서 부가적인 label 을 표현하거나 thead 안에서 원래의 header를 표현해야 할 경우
th를 사용하게 됩니다.
th를 보면 thead가 어떠한 의미로 사용되는 element 인지 조금더 쉽게 이해가 가시죠? ㅎㅎ
또한가지의 특징이라면 th를 사용하면 추후 javascript 를 이용하여 table sorting 같은 기능구현을 할때 조금 더 편리하게 구현할 수
있다는 장점이 있습니다. (수많은 td를 굳이 일일히 id를 지정해서 사용하는 부담을 줄일수가 있으니까요 ^^)
되도않은 실력으로 끄적끄적 기재한 포스팅을 읽느라 고생하신 방문자분들~ 사랑합니다 헤헤 ^^
그럼 다음에 또 뵈요~