HTML의 <table> 태그는 웹 페이지에서 표(테이블)를 정의할 때 사용됩니다. 이 태그 안에는 표의 구조를 구성하는 여러 하위 태그들이 포함되며, 행은 <tr>, 제목 셀은 <th>, 일반 셀은 <td> 태그로 작성합니다.
HTML 테이블의 주요 속성
<table> 태그에는 표의 모양과 동작을 제어하는 다양한 속성이 있습니다. 아래 표에서 각 속성의 값과 설명을 확인해 보세요.
| 속성 | 값 | 설명 |
|---|---|---|
| abbr | abbreviated_text | 지원 중단(Deprecated) − 셀 내용의 축약된 버전을 지정합니다. |
| align | right left center justify char | 지원 중단(Deprecated) − 표의 시각적 정렬 방식을 지정합니다. |
| bgcolor | rgb(x,x,x) #hexcode colorname | 지원 중단(Deprecated) − 표의 배경색을 지정합니다. |
| border | 픽셀(px) | 지원 중단(Deprecated) − 테두리 두께를 지정합니다. 값이 "0"이면 테두리가 표시되지 않습니다. |
| cellpadding | 픽셀 또는 % | 지원 중단(Deprecated) − 셀 테두리와 셀 내용 사이의 간격을 지정합니다. |
| cellspacing | 픽셀 또는 % | 지원 중단(Deprecated) − 셀과 셀 사이의 간격을 지정합니다. |
| frame | void above below hsides lhs rhs vsides box border | 지원 중단(Deprecated) − border 속성과 함께 사용되며, 표를 둘러싸는 외곽 테두리 중 어느 쪽 면을 표시할지 지정합니다. |
| rules | none groups rows cols all | 지원 중단(Deprecated) − border 속성과 함께 사용되며, 표의 셀 사이에 어떤 구분선이 나타날지 지정합니다. |
| summary | 텍스트 | 지원 중단(Deprecated) − 표 내용에 대한 요약을 지정합니다. |
| width | 픽셀 또는 % | 지원 중단(Deprecated) − 표의 너비를 지정합니다. |
참고: 위에 나열된 속성 대부분은 HTML5에서 공식적으로 지원이 중단(deprecated)되었습니다. 현재는 표의 스타일(테두리, 배경색, 간격, 정렬 등)을 지정할 때 CSS를 사용하는 것이 표준적인 방법입니다.
HTML 테이블 예제
아래 코드를 직접 실행하면 HTML에서 간단한 표를 만들어 볼 수 있습니다. 이 예제에서는 CSS의 border 속성을 사용해 표, 헤더 셀, 데이터 셀에 테두리를 적용했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h3>Ranking</h3>
<table>
<th>Rank</th>
<tr>
<td>One</td>
</tr>
<tr>
<td>Two</td>
</tr>
</table>
</body>
</html>
이처럼 <table> 태그와 <tr>, <th>, <td> 태그를 조합하면 누구나 손쉽게 HTML 표를 만들 수 있습니다. 스타일링은 인라인 속성 대신 CSS를 활용하면 코드가 더 깔끔하고 유지보수하기 쉬워집니다.