HTML 테이블은 <table> 태그를 사용해 웹 페이지에 표를 만들 때 활용됩니다. 표에서 각 행은 <tr>(table row) 태그로 지정하고, 머리글 셀은 <th>(table header) 태그로, 일반 데이터 셀은 <td>(table data) 태그로 각각 정의합니다.
기본 문법
HTML 테이블의 기본 구조는 다음과 같습니다.
<table> <tr> <th>표 머리글</th> <th>표 머리글</th> </tr> <tr> <td>표 데이터</td> <td>표 데이터</td> </tr> <tr> <td>표 데이터</td> <td>표 데이터</td> </tr> </table>
위 구조에서 첫 번째 <tr> 안의 <th>는 열 제목 역할을 하며, 대부분의 브라우저에서 굵은 글씨와 가운데 정렬로 표시됩니다.
주요 테이블 속성
테이블 셀을 자유롭게 배치하려면 아래 두 가지 속성을 이해하는 것이 중요합니다.
| 속성 | 설명 |
|---|---|
| colspan | 하나의 셀을 여러 열(column)에 걸쳐 확장할 때 사용합니다. |
| rowspan | 하나의 셀을 여러 행(row)에 걸쳐 확장할 때 사용합니다. |
예를 들어 <td colspan="2">처럼 작성하면 해당 셀이 두 개의 열 폭만큼 차지하게 됩니다.
caption 요소로 표 제목 추가하기
HTML의 <caption> 요소를 사용하면 표에 제목(캡션)을 붙일 수 있습니다. 캡션은 반드시 <table> 태그 바로 뒤에 위치해야 하며, 화면에는 기본적으로 표 상단 중앙에 표시됩니다.
<caption>텍스트</caption>
실전 예제
지금까지 배운 내용을 종합한 HTML 테이블 예제입니다. 학생 정보를 담은 표에 CSS 스타일과 캡션을 함께 적용했습니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
table {
margin: 2rem auto;
width: 400px;
}
caption {
color: #fff;
font-size: 1.5rem;
}
</style>
<body>
<h1>HTML 테이블</h1>
<table border="2">
<caption>학생 정보</caption>
<tr>
<th>이름</th>
<th>학번</th>
</tr>
<tr>
<td>John</td>
<td>031717</td>
</tr>
<tr>
<td>Elon</td>
<td>051717</td>
</tr>
</table>
</body>
</html>
실행 결과
위 코드를 실행하면 '학생 정보'라는 캡션이 달린 2열짜리 표가 나타나며, 이름과 학번 데이터가 행 단위로 정렬되어 출력됩니다.
