HTML에서 테이블의 행과 열을 만들려면 <table> 태그를 사용합니다. 테이블은 행(row)과 열(column)로 구성되며, 하나 이상의 <tr>, <th>, <td> 요소를 조합하여 원하는 형태의 표를 만들 수 있습니다.
테이블을 구성하는 기본 태그
테이블 관련 태그의 역할은 다음과 같습니다.
- <table> : 테이블 전체를 감싸는 컨테이너 역할을 합니다.
- <tr> : 테이블의 한 행(row)을 정의합니다.
- <th> : 제목 셀(헤더)을 정의하며, 기본적으로 굵은 글씨에 가운데 정렬로 표시됩니다.
- <td> : 일반 데이터 셀을 정의합니다. 행 안에
<td>가 많을수록 열이 늘어납니다.
즉, 행은 <tr> 태그로 만들고, 그 안에 <th> 또는 <td> 태그를 배치해 열을 구성하는 구조입니다.
HTML5에서 지원하지 않는 속성 주의
과거에는 align, bgcolor, border, cellpadding, cellspacing 같은 테이블 속성을 많이 사용했지만, 이러한 속성들은 HTML5에서 더 이상 지원되지 않으므로 사용하지 않는 것이 좋습니다.
대신 style 속성으로 CSS를 직접 적용하거나, <style> 태그 안에 스타일을 작성해 테이블 테두리 등을 꾸미는 것이 올바른 방법입니다. 아래 예제에서는 border CSS 속성을 활용해 테이블, 헤더 셀, 데이터 셀에 테두리를 적용했습니다.
예제 코드
아래 코드를 실행하면 HTML에서 테이블의 행과 열이 어떻게 만들어지는지 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>테이블 이해하기</h2>
<table>
<tr>
<th>헤더: 1행 1열</th>
<th>헤더: 1행 2열</th>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 첫 번째 행에는 <th>로 만든 두 개의 헤더 셀이, 두 번째 행에는 <td>로 만든 두 개의 데이터 셀이 검은색 테두리와 함께 표시됩니다.
