HTML : Table Tag(테이블 태그)
2023. 3. 13. 14:11ㆍHTML, CSS
<!DOCTYPE html>
<HTML>
<head>
<meta charset="UTF-8">
<title>HTML - Table Tag</title>
</head>
<body>
<!-- 테이블 태그(Table Tag) -->
<!-- - 표를 만들기 위한 태그 -->
<!-- - 태그 종류 -->
<!-- - table 태그 : 테이블 영역(틀)을 만들기 위한 태그 -->
<!-- - thead 태그 : 테이블 제목 행들을 묶는 태그 = 제목 영역 -->
<!-- - tbody 태그 : 테이블 본문 행들을 묶는 태그 = 본문 영역 -->
<!-- - tfoot 태그 : 테이블 요약 행들을 묶는 태그 = 요약 영역 -->
<!-- - tr 태그 : 테이블의 한 행을 만들기 위한 태그 -->
<!-- - th 태그 : 한 행에 들어갈 제목 셀 태그 -->
<!-- - td 태그 : 한 행에 들어갈 일반 셀 태그 -->
<!-- 테두리가 기본적으로 표시되지 않기 때문에 -->
<!-- 테두리를 표시하기 위해 border 속성을 이용 -->
<!-- → 나중에는 CSS 를 통해서 테두리를 설정 -->
<table border="1"> <!-- 테이블 영역 -->
<!-- 제목 영역 -->
<thead>
<!-- 첫 번째 행(row) -->
<tr>
<th>Header 1</th> <!-- 제목 셀 -->
<th>Header 2</th> <!-- 제목 셀 -->
<th>Header 3</th> <!-- 제목 셀 -->
</tr>
</thead>
<!-- 본문 영역 -->
<tbody>
<!-- 첫 번째 행 -->
<tr>
<td>Data 1-1</td> <!-- 일반 셀 -->
<td>Data 1-2</td> <!-- 일반 셀 -->
<td>Data 1-3</td> <!-- 일반 셀 -->
</tr>
<!-- 두 번째 행 -->
<tr>
<td>Data 2-1</td> <!-- 일반 셀 -->
<td>Data 2-2</td> <!-- 일반 셀 -->
<td>Data 2-3</td> <!-- 일반 셀 -->
</tr>
<!-- 세 번째 행 -->
<tr>
<td>Data 3-1</td> <!-- 일반 셀 -->
<td>Data 3-2</td> <!-- 일반 셀 -->
<td>Data 3-3</td> <!-- 일반 셀 -->
</tr>
</tbody>
</table>
<hr>
<!-- 셀의 폭을 지정하는 속성 -->
<!-- - rowspan 속성 : 행의 수( = 세로 병합) -->
<!-- - colspan 속성 : 열의 수( = 가로 병합) -->
<table border="1"> <!-- 테이블 영역 -->
<!-- 제목 영역 -->
<thead>
<!-- 첫 번째 행(row) -->
<tr>
<th>Header 1</th> <!-- 제목 셀 -->
<th>Header 2</th> <!-- 제목 셀 -->
<th>Header 3</th> <!-- 제목 셀 -->
</tr>
</thead>
<!-- 본문 영역 -->
<tbody>
<!-- 첫 번째 행 -->
<tr>
<!-- 첫 번째 셀이 차지하는 열의 수를 2로 설정 -->
<!-- - 첫 번째 셀의 열의 크기가 2가 되므로 -->
<!-- 한 행의 총 열의 수가 증가하게 된다. -->
<!-- → 하나의 셀을 주석으로 처리를 해야 총 열의 수를 맞출 수 있다. -->
<td colspan="2">Data 1-1</td>
<!-- <td>Data 1-2</td> -->
<td>Data 1-3</td>
</tr>
<!-- 두 번째 행 -->
<tr>
<!-- 첫 번째 셀이 차지하는 행의 수를 2로 설정 -->
<td rowspan="2">Data 2-1</td>
<td>Data 2-2</td>
<td>Data 2-3</td>
</tr>
<!-- 세 번째 행 -->
<tr>
<!-- <td>Data 3-1</td> -->
<td>Data 3-2</td>
<td>Data 3-3</td>
</tr>
</tbody>
</table>
</body>
</HTML>
'HTML, CSS' 카테고리의 다른 글
| HTML : Input(입력) (0) | 2023.03.13 |
|---|---|
| HTML : Image Tag (0) | 2023.03.13 |
| HTML : List tag(목록 태그) (0) | 2023.03.13 |
| HTML : Tag(태그) (0) | 2023.03.13 |
| HTML : Document (0) | 2023.03.13 |