`<td>` 태그는 HTML 테이블에서 테이블 데이터를 정의하는 데 사용됩니다
. `<td>`는 "table data"를 의미하며, 테이블의 개별 셀을 나타냅니다.
`<td>` 요소는 항상 `<tr>` 요소(테이블 행) 내에 포함되어야 합니다.
각 `<tr>` 요소는 하나 이상의 `<td>` 요소를 포함할 수 있습니다.
### 예제
<!DOCTYPE html>
<html>
<head>
<title>Sample Table</title>
</head>
<body>
<table border="1">
<tr> //1 행
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>// 2행
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr> //3행
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table>
</body>
</html>
```
이 예제에서:
- `<table border="1">`: 테이블을 정의하고 테두리를 지정합니다.
- `<tr>`: 테이블 행을 정의합니다.
- `<th>`: 테이블 헤더 셀을 정의합니다. `<th>` 요소는 기본적으로 굵게 표시되고 중앙에 정렬됩니다.
- `<td>`: 테이블 데이터를 정의합니다. `<td>` 요소는 테이블 셀을 나타내며 기본적으로 왼쪽에 정렬됩니다.
위의 HTML 코드는 다음과 같은 테이블을 생성합니다:
### `td` 요소의 속성
`<td>` 요소는 여러 속성을 가질 수 있습니다:
- `colspan`: 셀의 가로로 병합할 열 수를 지정합니다.
- `rowspan`: 셀의 세로로 병합할 행 수를 지정합니다.
- `align`: 셀 내용의 수평 정렬을 지정합니다 (HTML5에서는 사용하지 않음).
- `valign`: 셀 내용의 수직 정렬을 지정합니다 (HTML5에서는 사용하지 않음).
- `style`: 인라인 CSS 스타일을 지정합니다.
- `class`: CSS 클래스를 지정합니다.
사용 예 ) <td colspan="2">Row 1, Cell 1-2</td>
'프론트엔드' 카테고리의 다른 글
| React Router의 useNavigate 훅을 사용하여 페이지 이동 기능을 구현 (0) | 2024.05.29 |
|---|---|
| 주소 연결하기 (0) | 2024.05.14 |
| import { Outlet, useLocation } from 'react-router-dom'; (0) | 2024.05.12 |
| 랜더링 (0) | 2024.05.12 |
| <Route element={<Container />}> {/* 공통 컨테이너 적용 */} (0) | 2024.05.09 |