티스토리 뷰
목차
웹에서 정보를 정리하고 표현하는 데 가장 효과적인 방법 중 하나는 표입니다
이 글에서는 HTML의 표 태그를 통해 누구나 쉽게 테이블을 작성하고 구조화할 수 있도록 안내드립니다
표의 기본 구조는 어떻게 구성될까요?
HTML 테이블은 행과 열로 이루어진 구조이며
각 행과 열이 만나는 지점에 위치한 칸을 셀(cell)이라 부릅니다
HTML에서는 <table>을 기준으로 <tr>, <th>, <td> 등의 태그를 사용하여
표를 시각적으로 구성하고 의미를 명확히 전달할 수 있습니다
표의 시작은 <table> 태그부터
HTML 표는 <table> 태그로 감싸는 것이 시작입니다
그 안에 <tr>은 행(row)을, <th>는 제목 셀을, <td>는 일반 셀을 나타냅니다
태그 의미
| <table> | 테이블 전체를 감쌈 |
| <tr> | 하나의 행 |
| <th> | 제목 셀 (굵은 글씨로 중앙 정렬됨) |
| <td> | 일반 셀 (내용 셀) |
간단한 선수 명단 테이블 예제
아래 예시는 HTML로 테이블을 만들고 선수 명단을 정리한 코드입니다
<table border="1">
<tr>
<th>한국선수</th>
<th>일본선수</th>
<th>미국선수</th>
</tr>
<tr>
<td>김철수</td>
<td>오오다</td>
<td>제임스</td>
</tr>
</table>
중요: border="1" 속성은 테이블 테두리의 두께를 설정하는 역할을 합니다
표에 제목을 추가하는 <caption> 태그
표에 제목 또는 설명을 추가하고 싶다면 <caption> 태그를 활용합니다
해당 태그는 <table> 내부의 가장 첫 위치에 작성되어야 합니다
<table border="1">
<caption>마라톤 참가선수 명단</caption>
<tr>
<th>한국선수</th>
<th>일본선수</th>
<th>미국선수</th>
</tr>
<tr>
<td>김철수</td>
<td>오오다</td>
<td>제임스</td>
</tr>
</table>
핵심: <caption>은 기본적으로 가운데 정렬되며 표 상단에 위치합니다
강조하고 싶은 경우 <strong> 태그를 함께 사용하면 효과적입니다
<caption><strong>마라톤 참가선수 명단</strong></caption>
구조를 명확히 표현하는 <thead>, <tbody>, <tfoot>
표의 구조가 복잡하거나 정보가 많아질 경우
내용을 구분 지어 구성하는 것이 매우 중요합니다
HTML은 이를 위해 다음 세 가지 구조화 태그를 제공합니다
태그 용도
| <thead> | 표의 제목 또는 헤더 영역 |
| <tbody> | 표의 본문 데이터 영역 |
| <tfoot> | 표의 요약 또는 푸터 영역 |
예시 코드는 다음과 같습니다
<table border="1">
<thead>
<tr>
<th>한국선수</th>
<th>일본선수</th>
<th>미국선수</th>
</tr>
</thead>
<tbody>
<tr>
<td>김철수</td>
<td>오오다</td>
<td>제임스</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>세계 랭킹 5위</td>
<td>세계 랭킹 8위</td>
<td>세계 랭킹 2위</td>
</tr>
</tfoot>
</table>
핵심: 구조화 태그를 사용하면
코드 유지보수가 쉬워지고, 웹 접근성 향상에도 도움이 됩니다
HTML 테이블은 정보 정리에 최적화된 태그입니다
단순한 표 작성에 그치지 않고
제목, 구조, 시각적 강조, 접근성까지 고려한 테이블을 만든다면
사용자에게 더욱 친절한 웹 환경을 제공할 수 있습니다
중요: HTML 테이블 태그를 제대로 활용하면
정보 전달의 효율성과 디자인의 완성도 모두 잡을 수 있습니다