안녕하세요.
이번 포스팅은 표를 그릴 수 있는 <table></table> 태그에 대해 소개하겠습니다.
<table></table> 태그는 그 자체로만은 표를 사용할 수 없고, 아래와 같은 태그들을 함께 사용했을 때 제대로 된 표를 그릴 수 있습니다.
<thead></thead><th></th><tbody></tbody><td></td><tfoot></tfoot>
기본적인 테이블의 형태는 다음과 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<table>
<tr>
<th>
이름
</th>
<th>
직업
</th>
</tr>
<tr>
<td>
김철수
</td>
<td>
개발자
</td>
</tr>
<tr>
<td>
김영희
</td>
<td>
디자이너
</td>
</tr>
</table>
</body>
</html>
<table></table> 태그는 테이블 영역을 정의합니다.
<tr></tr> 태그는 테이블의 각 행을 정의합니다.
<th></th> 태그는 테이블의 헤더 셀을 정의합니다.
<td></td> 태그는 테이블의 데이터 셀을 정의합니다.
<thead></thead>, <tbody></tbody>, <tfoot></tfoot> 태그들은 테이블의 머릿글 영역과 본문 영역, 바닥글 영역을 그룹화하는 역할을 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<table>
<thead>
<tr>
<th>
이름
</th>
<th>
직업
</th>
<th>
경력
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
김철수
</td>
<td>
개발자
</td>
<td>
7년
</td>
</tr>
<tr>
<td>
김영희
</td>
<td>
디자이너
</td>
<td>
4년
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>
경력 합
</th>
<td></td>
<td>
11년
</td>
</tr>
</tfoot>
</table>
</body>
</html>
보시다시피 보여지는 형태에는 차이가 없지만, 나중에 CSS를 이용해 각 그룹별로 서로 다른 스타일을 적용할 수도 있는 유용함을 제공해줍니다.
그리고 위 코드에서 보면 <tfoot></tfoot> 안에 비어있는 <td></td>가 있는 것을 볼 수 있습니다.
테이블은 첫 번째 행에서 만든 열 개수가 기준이 되기 때문에 그 다음 행 부터는 해당 열을 사용하지 않더라도 빈 셀을 만들어줘야 합니다.
테이블 관련 태그는 셀 병합 기능 역시 제공합니다.
셀 병합을 하고 싶을 때는 colspan 혹은 rowspan 속성을 <th></th> 혹은 <td></td> 태그에 사용해주면 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="3">
개발자 목록
</th>
</tr>
<tr>
<th></th>
<th>
이름
</th>
<th>
분류
</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3">
개발자
</th>
<td>
김철수
</td>
<td>
프론트엔드
</td>
</tr>
<tr>
<td>
김영희
</td>
<td>
백엔드
</td>
</tr>
<tr>
<td>
김민수
</td>
<td>
풀스택
</td>
</tr>
</tbody>
</table>
</body>
</html>
colspan 은 열 병합, rowspan 은 행 병합으로, 지정된 숫자 만큼의 열이나 행에 있는 셀들을 하나로 합쳐줍니다.
맨 상단에,
<tr>
<th colspan="3">
개발자 목록
</th>
</tr>부분은 3개의 열을 하나로 합친다는 것입니다.
이 경우 HTML 상의 열은 하나 밖에 없지만, 화면에 그려질 때는 3개의 열이 있는 것으로 간주됩니다.
그 다음,
<tr>
<th rowspan="3">
개발자
</th>
<td>
김철수
</td>
<td>
프론트엔드
</td>
</tr>부분에서 <th rowspan="3">개발자</th> 부분은 3개의 행에 있는 첫 번째 열을 하나로 합치는 것을 의미합니다.
그렇기 때문에 그 다음 2개의 행은 맨 앞에 행이 하나 존재하는 것으로 간주되어 아래와 같이 2개의 행만 입력해도 화면에 정상적으로 출력됩니다.
<tr>
<td>
김영희
</td>
<td>
백엔드
</td>
</tr>
<tr>
<td>
김민수
</td>
<td>
풀스택
</td>
</tr>마지막으로, 위 코드에서는 colspan의 예시를 보여주기 위해 맨 첫 번째 행에 있는 셀들을 병합해 테이블의 제목처럼 표시했는데, 테이블 제목을 표시하기 위해서는 다음과 같이 <caption></caption> 태그를 사용하는게 바람직합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<table>
<caption>
개발자 목록
</caption>
<thead>
<tr>
<th></th>
<th>
이름
</th>
<th>
분류
</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3">
개발자
</th>
<td>
김철수
</td>
<td>
프론트엔드
</td>
</tr>
<tr>
<td>
김영희
</td>
<td>
백엔드
</td>
</tr>
<tr>
<td>
김민수
</td>
<td>
풀스택
</td>
</tr>
</tbody>
</table>
</body>
</html>
'Frontend 기본' 카테고리의 다른 글
| HTML 태그 - <button> (0) | 2022.08.12 |
|---|---|
| HTML 태그 - <input> 기본 (0) | 2022.08.11 |
| HTML 태그 - <video> (0) | 2022.08.09 |
| HTML 태그 - <img> (0) | 2022.08.08 |
| HTML 주석과 개발자 도구 (0) | 2022.08.05 |