HTML day3
테이블
테이블
여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표
<table>
<tr> <!-- 테이블의 각 층(행) -->
<th></th> <!-- 열의 제목(굵은 글씨, 가운데 정렬)-->
<td></td> <!-- 테이블의 각 셀 -->
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 - 1</title>
</head>
<body>
<table border="1" width="600">
<tr>
<th>1번째 제목</th>
<th>2번째 제목</th>
</tr>
<tr>
<td>1번째 셀</td>
<td>2번째 셀</td>
</tr>
</table>
</body>
</html>
colspan 속성
- 가로로 행(rows)을 합침
\<td colspan="합칠 행의 개수">
rowspan 속성
- 세로로 열(column)을 합침
\<td rowspan="합칠 열의 개수">
<caption> 태그
- 표에 제목을 붙일 때 사용
- 기본 위치는 표의 상단 중앙임
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 - 2</title>
</head>
<body>
<table border="1" width="600">
<caption>
<strong>표 제목</strong>
</caption>
<tr height="50">
<td rowspan="3" align="center">1번 셀</td>
<td>2번 셀</td>
<td>3번 셀</td>
</tr>
<tr height="50">
<td colspan="2" align="center">5번 셀</td>
</tr>
<tr height="50">
<td>8번 셀</td>
<td>9번 셀</td>
</tr>
</table>
</body>
</html>
