table 태그는 표를 만들기 위한 태그이다.
앞에서 봐왔던 게시글을 보면 태그는 보통 단독으로 쓰이는 경우도 있지만, 복잡한 것들은 다른 태그들을 동반하여 사용하여야 한다. table태그도 마찬가지다. 표는 구성요소들이 복잡하기 때문에 연계되는 태그가 많다.
만약, 이러한 표가 있다고 하자.
| 이름 | 점수 |
| 피카츄 | 70 |
| 라이츄 | 80 |
여기서 이름과 점수는 table header이다.
그외 나머지 피카츄,라이츄,70,80은 table body이다.
table footer라는 것도 있지만, 이것들은 thead, tbody, tfoot과 같이 태그로 사용한다.
thead는 table header로 제목영역을 나타낸다.
tbody는 table body로 본문영역을 나타낸다.
tfoot은 table footer로 하단영역을 나타낸다.
그 외에 표를 만들 때 필요한 태그가 있는데
tr은 줄영역,
th는 칸영역이며 굵은글씨이고, 가운데 정렬을 해주기때문에 보통 제목 칸에 사용하고,
td도 칸영역이며 일반글씨이고, 왼쪽 정렬이 되며 내용칸에 주로 사용한다.
위 표를 만들때, 이름과 점수는 제목영역이니,
<thead></thead>내에 <tr></tr>태그를 넣어서 <th></th>태그 사이에 항목명을 넣어주면 된다.
그 외에는 내용영역이니,
<tbody></tbody>태그 사이에 위와 같이 넣어주면 기본적으로 완성이 된다고 할 수 있긴 하다.
셀을 나누어 한 칸에 한 영역이 생긴 것이니말이다.
하지만 기본적으로 표는 테두리가 있어야 하는데, 그 테두리를 설정하려면 어떤 태그도 아닌
<table> 태그로 가서 border라는 옵션을 사용할 수 있다. 표의 크기는 width옵션과 height옵션이 있는데,
height옵션은 설정하지 않으면 자동계산되기때문에,
<table border="1" width="300">으로 해주면 테두리와 크기가 설정이 된다.
위 표를 만들어본 식은 아래와 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table 태그</title>
</head>
<body>
<!--
table 태그 : 표를 만들기 위한 태그
-->
<table border="1" width="300">
<thead>
<tr>
<th>이름</th>
<th>점수</th>
</tr>
</thead>
<tbody>
<tr>
<td>피카츄</td>
<td>70</td>
</tr>
<tr>
<td>라이츄</td>
<td>80</td>
</tr>
</tbody>
</table>
</body>
</html>
'HTML' 카테고리의 다른 글
| [HTML#10] TABLE 예제와 풀이 (0) | 2020.12.09 |
|---|---|
| [HTML#08] LIST 태그 (0) | 2020.12.09 |
| [HTML#07] HTML DIV태그, P태그 (0) | 2020.12.04 |
| [HTML#06] HTML A태그 (0) | 2020.12.04 |
| [HTML#05] HTML IMG태그 (0) | 2020.12.04 |