[HTML 태그] 테이블 요소
<table>태그는 데이터를 표로 나타낼 때 사용되는 태그이다.
복잡한 데이터들을 기술할 때 표를 사용한다.
목차
1. 표의 구성 요소
3. 셀 병합
표의 구성 요소
표는 셀(내용이 들어가는 한 칸)로 이루어져 있다.
표의 행을 row, 열을 column이라고 한다.
<table>태그는 표 자체를 의미한다.
<tr>태그는 표의 한 행을 의미한다.
<td>태그는 표의 한 셀을 의미한다.
<th>태그는 표의 구조와 관련된 태그에서 살펴보도록 한다.
모든 테이블 태그는 닫는 태그가 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<table>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
</table>
</body>
</html>
그런데 이 코드를 저장하고 브라우저를 켜서 확인해보면 아무것도 안보인다.
셀 내부에 아무 내용이 없어서 그런데 아래 코드와 같이 수정하면 브라우저에서 표의 모습을 확인할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>table</title>
<style media="screen">
td {border: 1px solid; width: 50px; height: 50px;}
</style>
</head>
<body>
<table>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
</table>
</body>
</html>
추가한 코드는 나중에 css를 배우면서 알게될 것이다.
표의 구조와 관련된 태그
위의 4행 4열의 표를 그리는데도 코드가 상당히 복잡해보인다.
표를 구조적으로 파악하기 위해 도움이되는 태그들이 존재한다.
<caption>태그는 표의 제목을 의미한다.
<thead>태그는 제목 행(테이블의 가장 위 행)을 그룹화하는 태그이다. <thead>에 들어가는 셀(제목 셀)은 <td>태그가 아닌 <th>태그를 사용해야 한다.
<tbody>태그는 제목과 바닥행을 제외한 본문 행을 그룹화하는 태그이다.
<tfoot>태그는 바닥 행을 그룹화하는 태그이다. <tfoot>태그는 <tbody>태그의 뒤에 위치해야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>table</title>
<style media="screen">
td {border: 1px solid; width: 50px; height: 50px;}
</style>
</head>
<body>
<table>
<caption>Monthly Savings</caption>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
</body>
</html>
셀 병합
셀 병합은 셀 태그들의 rowspan, colspan 속성을 사용한다.
rowspan은 행을 기준으로, colspan은 열을 기준으로 병합한다.
설명보단 직접 표를 그려보는 편이 이해가 쉽다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>table</title>
<style media="screen">
td {border: 1px solid; width: 50px; height: 50px;}
</style>
</head>
<table>
<caption>Monthly Savings</caption>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">Sum</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td rowspan="2">$100</td>
</tr>
<tr>
<td>February</td>
</tr>
</tbody>
</table>
</body>
</html>
자주 사용되는 태그와 속성
<colgroup> : 테이블의 컬럼(<td>태그)에 적용할 스타일 width와 background(배경색)를 해당 태그에서 미리 적용할 수 있게 한다. 각 열에 해당하는 셀에 각각 스타일을 적용하는 불편함을 덜어준다.
<colgroup>태그 내에서 각 열의 속성을 정의할 때는 <col>태그를 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>table3</title>
</head>
<body>
<table>
<colgroup>
<col width="50px" style="background: red">
<col width="200px" style="background: blue">
<col width="100px" style="background: green">
</colgroup>
<thead>
<tr>
<td>번호</td>
<td>제목</td>
<td>이름</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1번</td>
<td>홍길동</td>
</tr>
</tbody>
</table>
</body>
</html>
scope 속성 : scope 속성은 <td>태그나 <th>태그의 속성으로 사용할 수 있다. 해당 셀이 row인지 col인지를 명시하는 역할을 한다. 시각 장애인용 스크린 리더기를 통해 코드가 읽어지는 경우 이 scope 속성에 해당하는 속성 값에 따라 어떤 순서로 읽힐지 결정된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>table3</title>
<style media="screen">
th, td {border: 1px solid; width: 50px; height: 50px;}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col">번호</th>
<th scope="col">이름</th>
<th scope="col">나이</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Will</td>
<td>19</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Jason</td>
<td>28</td>
</tr>
</tbody>
</table>
</body>
</html>
scope 속성은 스타일에 영향을 주지않기 때문에 브라우저 화면에서 보이는 표는 scope 속성이 없는 것과 다른 점이 없다.
header 속성 : <td>태그의 속성으로 사용할 수 있다. <th>태그의 id를 headers의 속성값으로 명시함으로써 제목 행의 셀과 본문 행의 셀의 관계를 명시한다.
scope 속성과 마찬가지로 브라우저가 따로 속성에 따라 스타일을 적용하지는 않지만 스크린 리더기로 읽을 경우 도움이 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>table3</title>
<style media="screen">
th, td {border: 1px solid; width: 50px; height: 50px;}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col" id="num">번호</th>
<th scope="col" id="name">이름</th>
<th scope="col" id="age">나이</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row" headers="num">1</td>
<td headers="name">Will</td>
<td headers="age">19</td>
</tr>
<tr>
<td scope="row" headers="num">2</td>
<td headers="name">Jason</td>
<td headers="age">28</td>
</tr>
</tbody>
</table>
</body>
</html>
scope의 예제에서 <th>태그에 id를 <td>태그에 headers를 추가한 코드이다.
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/cs120
비전공자를 위한 HTML/CSS
부스트코스 무료 강의
www.boostcourse.org
'공부 > HTML과 CSS' 카테고리의 다른 글
| [콘텐츠 모델/시멘틱 마크업/블록&인라인] 콘텐츠 모델 (0) | 2022.12.12 |
|---|---|
| [HTML 태그] 폼 요소 (0) | 2022.12.09 |
| [HTML 태그] 이미지 요소 (0) | 2022.12.07 |
| [HTML 태그] 리스트 요소 (0) | 2022.12.07 |
| [HTML 태그] 의미가 없는 컨테이너 요소 (0) | 2022.12.07 |
