CodeClover
[HTML] table태그 정리 ( th / td / tr ) 본문
웹 페이지에서 데이터를 구조적으로 표시하고 싶을 때, HTML의 table 태그를 활용하면 효율적입니다.
특히, 데이터를 행(row)과 열(column)로 구분하여 표현할 수 있어 정보의 가독성을 높이는 데 유용합니다.
HTML의 table 태그와 그 하위 태그들인 tr, th, td는 데이터를 체계적으로 표현하는 데 필수적인 요소로 각 태그의 개념을 간단히 정의하고 쉽게 이해할 수 있도록 사용 방법을 정리해보겠습니다.
table, tr, th, td 태그의 기본 개념
- table태그
: table 태그는 데이터를 테이블 형식으로 표현하기 위한 가장 바깥쪽의 컨테이너입니다.
테이블의 시작과 끝을 정의하며, 테이블 내부에 포함되는 모든 요소는 table 태그 안에 위치합니다.
- tr 태그
:tr 태그는 "table row"의 약자로, 테이블 내에서 하나의 행(row)을 나타냅니다.
각 행은 데이터를 담고 있는 개별 셀로 구성됩니다.
- th 태그
: th 태그는 "table header"의 약자로, 테이블의 헤더(머리글)를 정의합니다.
보통 열(column) 이름을 나타내며, 기본적으로 텍스트가 굵게 표시되고 가운데 정렬됩니다.
- td 태그
: td 태그는 "table data"의 약자로, 테이블의 데이터를 담는 셀을 의미합니다.
행과 열의 교차점에 위치한 데이터를 입력합니다.
HTML Table 태그 사용 방법
아래는 간단한 HTML 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Example</title>
</head>
<body>
<h1>학생 성적표</h1>
<table border="1">
<tr>
<th>이름</th>
<th>수학</th>
<th>영어</th>
</tr>
<tr>
<td>홍길동</td>
<td>90</td>
<td>85</td>
</tr>
<tr>
<td>김철수</td>
<td>80</td>
<td>88</td>
</tr>
</table>
</body>
</html>
결과
위 코드를 실행하면 다음과 같은 테이블이 브라우저에 표시됩니다
★ 체크 포인트 ★
1. <th>와 <td>의 차이
th 태그는 주로 열 이름을 정의하며, 기본적으로 텍스트가 굵게 표시되고 가운데 정렬됩니다.
반면, td 태그는 일반 데이터를 표시하며, 기본적으로 텍스트가 왼쪽 정렬됩니다.
2. 행(Row)와 열(Column)의 개념
행(row)은 가로 방향으로 데이터를 나열한 것이고, 열(column)은 세로 방향으로 데이터를 나열한 것입니다.
위의 코드를 참고하면 홍길동과 김철수는 행에 속하고, "이름", "수학", "영어"는 각각의 열에 속합니다.
3. border 속성
테이블에 테두리를 표시하려면 table 태그에 border 속성을 추가해야 합니다.
'Frontend' 카테고리의 다른 글
| onclick vs <a> 태그 – 링크 이동, 어떤 방식이 더 좋을까? (1) | 2025.05.08 |
|---|---|
| 자바스크립트 기본 문법 (2) (0) | 2025.04.10 |
| create-react-app 지원 종료 (0) | 2025.04.02 |
| [HTML] audio태그 (1) | 2025.01.05 |
| npm install error ENOENT(리액트 npm start error) (1) | 2024.08.13 |
