표를 만들 때는 테이블 태그를 사용한다.
| 태그 | 설명 |
| table | 표 삽입 |
| tr | 표에 행(table row) 삽입 |
| th | 표의 제목 셀(table heading) 생성 |
| td | 표의 일반 셀(table data) 생성 |
<!DOCTYPE html>
<html>
<head>
<title>HTML List Basic Page</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th></th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
</tr>
</thead>
<tbody>
<tr>
<td>1교시</td>
<td>영어</td>
<td>국어</td>
<td>과학</td>
<td>미술</td>
<td>기술</td>
</tr>
<tr>
<td>2교시</td>
<td>도덕</td>
<td>체육</td>
<td>영어</td>
<td>수학</td>
<td>사회</td>
</tr>
</tbody>
</table>
</body>
</html>테이블 태그의 속성
th와 td에 colspan과 rowspan 속성을 사용하여 표에서 셀이 차지하는 영역을 조절할 수 있다.
| 태그 | 속성 | 설명 |
| table | border | 표의 테두리 두께 지정 |
| td, th | colspan | 셀의 너비 지정 |
| rowspan | 셀의 높이 지정 |
<!DOCTYPE html>
<html>
<head>
<title>HTML List Basic Page</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">지역별 홍차</th>
</tr>
<tr>
<th rowspan="3">중국</th>
<td>정산소종</td>
</tr>
<tr><td>기문</td></tr>
<tr><td>운남</td></tr>
<tr>
<th rowspan="4">인도 및 스리랑카</th>
<td>아삼</td>
</tr>
<tr><td>실론</td></tr>
<tr><td>다질링</td></tr>
<tr><td>닐기리</td></tr>
</table>
</body>
</html>중국, 정산소종은 둘 다 두 번째 행이다. 그래서 같은 tr 태그 안에 있는 것이다.
인도 및 스리랑카, 아삼도 마찬가지로 둘 다 다섯 번째 행이기 때문에 같은 tr 태그 안에 있다.
[참고] HTML5 웹 프로그래밍 입문(3판)
반응형
'WEB > HTML' 카테고리의 다른 글
| [HTML] script 태그의 async, defer 차이 (0) | 2024.04.14 |
|---|---|
| HTML5 미디어 태그 (0) | 2021.09.26 |
| HTML5 목록 태그 (0) | 2021.09.26 |
| HTML5 글자 태그 (0) | 2021.09.26 |
| HTML5 오류와 검증 (0) | 2021.09.26 |
