테이블 태그
- 표 만들 때 사용
- table 태그의 경우 HTML5에서는 표의 테두르 두께를 지정하는 border 속성만 가지고 있다.
- th,td 태그는 colspan 속성과 rowspan 속성을 사용해 표에서 차지하는 영역을 조절할 수 있다.
- colspan 속성을 사용하면 영역이 가로 방향으로 늘어나고, rowspan 속성을 사용하면 영역이 세로 방향으로 늘어난다.
예제 ) 시간표 만들기
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tablebasic</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>
예제 ) colspan, rowspan 표 생성
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>colspan rowspan</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>