테이블 태그는 표를 만드는데 사용되는 태그 입니다.
테이블 태그를 사용하기 위해서는 여러 태그를 알아둬야 하는데요.
table thead tbody tr th td...
정말 쌩으로 정석대로 작성하는 방법과 그리고 그냥 대충 가볍게 작성할 수도 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>테이블 태그</title>
</head>
<body>
<table>
<thead>
<tr>
<th>태그</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>table</td>
<td>표를 작성하는 태그 입니다.</td>
</tr>
<tr>
<td>thead</td>
<td>표에서 가장 상단 머리 부분, 반드시 table 태그에 포함되어야 합니다.</td>
</tr>
<tr>
<td>tbody</td>
<td>표에서 실질적으로 데이터가 되는 부분, 반드시 table 태그에 포함되어야 합니다.</td>
</tr>
<tr>
<td>tr</td>
<td>표의 1개의 줄, 반드시 thead나 tbody에 포함되어야 합니다.</td>
</tr>
<tr>
<td>th</td>
<td>표의 머리 부분에 사용되는 한 칸, 반드시 thead안의 tr 태그안에 포함되어야 합니다.</td>
</tr>
<tr>
<td>td</td>
<td>표의 데이터 부분에 사용되는 한 칸, 반드시 tr 태그안에 포함되어야 합니다.</td>
</tr>
</tbody>
</table>
</body>
</html>
대충 이런식으로 작성을 합니다.
조금 복잡해 보이지요?
일단 출력 결과는 하단과 같습니다.
| 태그 | 설명 |
|---|---|
| table | 표를 작성하는 태그 입니다. |
| thead | 표에서 가장 상단 머리 부분, 반드시 table 태그에 포함되어야 합니다. |
| tbody | 표에서 실질적으로 데이터가 되는 부분, 반드시 table 태그에 포함되어야 합니다. |
| tr | 표의 1개의 줄, 반드시 thead나 tbody에 포함되어야 합니다. |
| th | 표의 머리 부분에 사용되는 한 칸, 반드시 thead안의 tr 태그안에 포함되어야 합니다. |
| td | 표의 데이터 부분에 사용되는 한 칸, 반드시 tr 태그안에 포함되어야 합니다. |
표 라기에는 뭔가 약간 허전하긴 해 보이지만,
딱딱 영역을 나누어서 가지런하게 배치되어 있습니다.
여기에 선만 그으면 정말 표 같을 것 입니다.
예제처럼 하여서 테이블 태그를 이루는 태그들을 조금 포함해 보았는데요.
간결하게 테이블 태그의 구조는 이런식 입니다.
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
그저 시각적으로 보이는 표를 이렇게 규칙을 가지고 코드로 작성하려니 조금 낯설기도 합니다.
우선 table 태그 안에 thead와 tbody를 구분합니다.
thead는 보통 tbody에 들어갈 자료값이 어떤 것이다 하고 알려주는 부분이 될 것 같습니다.
예를 들면 시간표에서 월 화 수 목 금 이런 글씨를 적어 놓을 영역이지요.
(이 부분은 자동으로 진한 글씨 처리가 적용이 됩니다.)
tbody에는 그렇다면 그 날의 과목명들이 들어갈 자리 겠지요.
이런식으로 큰 영역을 나눠놓고 이제 세부적으로 들어갑니다.
tr태그로 표의 줄 하나를 생성해주고, 그 줄에 칸을 채워넣는다라고 생각하면 되려나요?
thead내부의 칸은 th,
tbody내부의 칸은 td 로 작성하시면 됩니다.
만약 간결하게 만들고 싶다면, 그냥 table 태그만들고 tr td 가지고만 슥슥 작성해버려도 됩니다.
하지만 이 점은 꼭 알고 넘어가야 할 것이 간단히 작성을 하면 웹 브라우저가 자동으로 thead와 tbody태그를 추가한다는 것입니다.
(현재는 별 의미가 없지만 후에 스타일등 다른 것을 배울 때 아주 중요합니다.)
간단하게 작성하는 예시를 보여드리겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>테이블 태그</title>
</head>
<body>
<table>
<tr>
<td>월</td>
<td>화</td>
<td>수</td>
<td>목</td>
<td>금</td>
</tr>
<tr>
<td>수학</td>
<td>국어</td>
<td>국어</td>
<td>영어</td>
<td>사회</td>
</tr>
<tr>
<td>수학</td>
<td>문학</td>
<td>국어</td>
<td>영어</td>
<td>과학</td>
</tr>
<tr>
<td>적분과 통계</td>
<td>비문학</td>
<td>국어</td>
<td>일본어</td>
<td>물리</td>
</tr>
<tr>
<td>기하와 백터</td>
<td>자습</td>
<td>국어</td>
<td>불어</td>
<td>지구 과학</td>
</tr>
</table>
</body>
</html>
이렇게 구현하면 이런식으로 보이겠습니다.
| 월 | 화 | 수 | 목 | 금 |
| 수학 | 국어 | 국어 | 영어 | 사회 |
| 수학 | 문학 | 국어 | 영어 | 과학 |
| 적분과 통계 | 비문학 | 국어 | 일본어 | 물리 |
| 기하와 백터 | 자습 | 국어 | 불어 | 지구 과학 |
표에서 줄이 보이도록 하는 것은 스타일로 하는 것을 권장합니다.
나중에 스타일을 배우면 하도록 하고 그냥 속성으로 할 수 있는 방법을 보여드리도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>테이블 태그</title>
</head>
<body>
<table border="1">
<tr>
<td>월</td>
<td>화</td>
<td>수</td>
<td>목</td>
<td>금</td>
</tr>
<tr>
<td>수학</td>
<td>국어</td>
<td>국어</td>
<td>영어</td>
<td>사회</td>
</tr>
<tr>
<td>수학</td>
<td>문학</td>
<td>국어</td>
<td>영어</td>
<td>과학</td>
</tr>
<tr>
<td>적분과 통계</td>
<td>비문학</td>
<td>국어</td>
<td>일본어</td>
<td>물리</td>
</tr>
<tr>
<td>기하와 백터</td>
<td>자습</td>
<td>국어</td>
<td>불어</td>
<td>지구 과학</td>
</tr>
</table>
</body>
</html>
| 월 | 화 | 수 | 목 | 금 |
| 수학 | 국어 | 국어 | 영어 | 사회 |
| 수학 | 문학 | 국어 | 영어 | 과학 |
| 적분과 통계 | 비문학 | 국어 | 일본어 | 물리 |
| 기하와 백터 | 자습 | 국어 | 불어 | 지구 과학 |
대충 위처럼 출력이 되어 보입니다.
좀더 예쁘게 꾸미는 것은 CSS3를 배우면서 하도록 합시다.
테이블 태그를 설명하는 것의 양이 많아져서 그 다음 포스트에서 테이블의 속성에 대해서 다뤄보도록 하겠습니다.
'프로그래밍 > HTML5' 카테고리의 다른 글
| [HTML5] 공간 분할 태그 (0) | 2016.07.26 |
|---|---|
| [HTML5] 테이블 태그 (2) - 셀 합치기 (0) | 2016.07.26 |
| [HTML5] 주석 달기 (3) | 2016.07.20 |
| [HTML5] 목록 태그 (0) | 2016.07.20 |
| [HTML5] 글자 모양 태그 (0) | 2016.07.18 |