8. Tabular Data Elements
여러분들은 문서 작업을 하면서 워드나 한글을 통해서 표 형태를 사용하거나 엑셀 같은 스프레드 시트를 이용하여 표형태로 작성하는 다음과 같은 형태를 많이 보고 직접 작성했을 것입니다.
표(Table) 형태를 HTML5를 이용하여 웹 페이지에 나타내기 위해서는
위 그림을 토대로 표를 구성하는 기본적인 구성 요소들을 파악하는 것이 중요합니다.
위와 같은 하나의 테이블(Table)은 행(row)와
열(column)로 구성되며 행과 열이 만나는 부분을 셀(cell)이라고
합니다. 이 셀(Cell) 안에는 텍스트, 이미지 등이 나타날 수 있습니다. 위 표(Table)를 HTML5에서 사용하는 기본적인 요소(Element)들로 나타내보면 다음과 같이 나타낼 수 있습니다.
위 그림에서
보는 것처럼 하나의 표(table) 안에는 테이블의 헤더 역할을 하는 헤더(header)들과 정의된 헤더들의 구체적인 값들을 나타내는데 사용하는 셀(td),
그리고 이러한 헤더들, 셀들의 한 행의 집합을 나타내는 행(tr)으로 나타낼 수 있습니다.
정리하면 하나의 표(table)은 다수의 행(tr)으로
이루어지며 각각의 행들은 다시 다수의 헤더나 셀 데이터들로 이루어진다고 볼 수 있습니다. 이제 위 표에
대해서 HTML5 웹페이지로 나타내기 위해서 메모장을 열고 기본적인
HTML5 문서의 기본 코드를 작성하고 <body>…</body> 블록을
다음과 같이 작성합니다.
<body>
<table>
<tr>
<th>이름</th>
<th>학번</th>
<th>교양영어</th>
<th>교양수학</th>
</tr>
<tr>
<td>이보람</td>
<td>9701231</td>
<td>86</td>
<td>90</td>
</tr>
<tr>
<td>김정식</td>
<td>9701232</td>
<td>92</td>
<td>94</td>
</tr>
<tr>
<td>김좌진</td>
<td>9701233</td>
<td>87</td>
<td>89</td>
</tr>
</table>
</body>
위와 같이 <table> … </table> 블록 안에 앞서 표에 나타난 데이터들을 <tr>, <th>, <td> 요소 태그를 이용하여 나타낼 수 있습니다. “firstTable.html”로 저장하고 IE9를 이용하여 보면 다음과 같이 나타나는데 표(table) 처럼 보이지는 않습니다.
결과가 표처럼
나타나게 하기 위해서 위 코드에서 <table> 시작태그 부분을 테이블에 속하는 헤더나 셀(cell)들의 테두리(경계)를
나타내는데 사용하는 border 속성을 이용하여 다음과 같이 수정해주면 됩니다.
<body>
<table
border="1">
이상으로 표(table)과 관련한 간단한 예제를 통해 기본적인 사용방법을 알아보았습니다.
이제 W3C에서 HTML5에 대해서 현재 표준화을
위해 논의 중인 표(table)와 관련된 모든 요소들을 정리하면 다음과 같습니다.
|
요소 |
기능 |
|
table |
테이블 자체를 나타내는 요소 |
|
tr |
테이블의 하나의 행(Row)을 나타내는 요소 |
|
th |
테이블의 헤더를 나타내는 요소 |
|
td |
테이블의 하나의 행의 부분을 구성하는 셀(Cell)을 나타내는 요소 |
|
caption |
테이블에 대한 테이블 타이틀을 나타내며 사용하지 않아도 되는 선택적 요소로 보통 테이블의 상단 가운데에 텍스트 형태로 나타남 |
|
col |
하나 또는 그 이상의 칼럼(열)에 속성을 설정하는데 사용되는 요소 |
|
colgroup |
칼럼(열)들을 그룹화하는데 사용되는 요소 |
|
thead |
테이블 안에서 header 내용을 그룹화하는데 사용되는 요소로 tbody, tfoot 요소와 함께 사용 |
|
tbody |
테이블 안에서 본문 내용을 그룹화하는데 사용되는 요소로 thead, tfoot 요소와 함께 사용 |
|
tfoot |
테이블 안에서 꼬리말 내용을 그룹화하는데 사용되는 요소로 tbody, thead 요소와 함께 사용 |
이제 위 요소들에 대해서 상황별로 사용 방법을 알아볼까요?
8.1 caption 요소를 이용하여 표(table) 제목을 나타내기
caption
요소는 표(table)가 어떤 데이터를 포함하고 있는지를
나타내는 제목이나 내용 등을 설명하는데 사용하는 요소로 보통 다음과 같은 형식을 사용합니다.
<table>
<caption> 테이블의 제목 혹은 내용</caption>
…
</table>
위에 나타난
것처럼 table 요소의 시작태그 바로 다음 라인에 caption 요소가
오며 여기에 table의 제목이나 table을 설명하는 내용을
간략하게 명시하여 사용할 수 있습니다.
방금 전 사용한 “firstTable.html”에
caption 요소를 이용하여 “학생 성적표” 라는
제목을 나타내고자 한다면 다음과 같이 한 줄을 코드를 추가합니다.
<body>
<table border="1">
<caption>학생 성적표</caption>
<tr>
저장한 후 브라우저로 열어보면 다음과 같이 나타내주게 됩니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 8.3 col, colgroup 요소를 이용하여 다수의 칼럼(열)에 스타일 적용 (0) | 2013.07.31 |
|---|---|
| 8.2 tbody, thead, tfoot 요소를 이용한 머리말, 본문, 맺음말 형태 만들기 (0) | 2013.07.31 |
| 7.7 svg 요소(Element) (0) | 2013.07.31 |
| 7.6 math 요소(Element) (1) | 2013.07.31 |
| 7.5 iframe 요소(Element) (0) | 2013.07.31 |
