[HTML] 테이블(table)

Web/HTML

[HTML] 테이블(table)

씨네 2021. 12. 3. 10:05

728x90

1. 테이블

<table>

- 문서에 표를 작성할 때 사용

- 주요 속성

rowspan : 수직방향으로 셀 병합

colspan : 수평방향으로 셀 병합

- 테이블 주요 구성 태그

<tr> : 행 정의, th와 td만 자식요소로 포함

<th> : 제목 셀 정의

<td> : 데이터 셀 정의

<thead> : 테이블의 머리글

<tbody> : 테이블의 본문

<tfoot> : 테이블의 바닥글

<caption> : 테이블 제목

<col> : 테이블 열 정의

<colgroup> : 테이블의 열 그룹화

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>

	<h1>01. 기본 테이블 만들기</h1>

	<table broder="1" style="width:300px;">
		<tr style="background-color:gray;">
			<th>컬럼1</th>
			<th>컬럼2</th>
		</tr>
		
		<tr>
			<td>1</td>
			<td>2</td>
		</tr>
		
		<tr>
			<td>3</td>
			<td>4</td>
		</tr>
	</table>

	<h1>02. 주요 태그 사용해서 만들기</h1>
	
	<table border="1">
		<caption>테이블 제목</caption>
		
		<colgroup>
			<col width="100px">
			<col width="300px">
			<col width="500px">
		</colgroup>
		
		<thread>
			<tr>
				<th>컬럼 1</th>
				<th>컬럼 2</th>
				<th>컬럼 3</th>
			</tr>
		</thread>
		
		<tbody>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
			<tr>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
		</tbody>
		
		<tfoot>
			<tr>
				<td>footer1</td>
				<td>footer2</td>
				<td>footer3</td>
			</tr>
		</tfoot>
	</table>
	
	<h1>03. 테이블 셀 병합하기</h1>
	
	<table border="1">
		<thead style="background-color: skyblue;">
			<tr>
				<th>컬럼1</th><th>컬럼2</th><th>컬럼3</th><th>컬럼4</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td rowspan="2">1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			<tr>
				<td>6</td>
				<td colspan="2">7</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="4">9</td>
			</tr>
		</tfoot>
	
	</table>
</body>
</html>

728x90