1. Table(테이블)
(1) 테이블
여러 종류의 데이터가 행과 열로 정리된 표
<table>
<body width="80%">
<table border="선굵기" align="정렬위치" width="너비">
<tr height="높이">
<th>이름</th>
<td>데이터</td>
...
<td>데이터</td>
</tr>
</table>
</body>
(2) merge(병합)
1) 열병합
colspan="합칠 열의 개수"
<tr><td><td><td><td><td></tr>
<tr><td>< td ><td></tr>
=> <tr><td><td colspan="3"><td></tr>
2) 행병합
rowspan="합칠 행의 개수"
<tr><td rowspan="2"><td><td><td><td></tr>
<tr> <td><td><td><td></tr>
<tr><td> <td><td><td><td></tr>
(3) caption
<caption> 태그로 테이블 상단에 짧은 설명을 붙일 수 있음
table 1개 당 1번만 사용
(4) colgroup
뒤에 나오는 컬럼(td)에 적용할 스타일을 미리 적용
(5) thead, tbody, tfoot
행을 묶어서 스타일을 저장
하나의 테이블에 하나씩만 사용 가능
시각 장애인을 위한 화면 판독기 가능(웹접근성)
☆ Code
<!doctype html>
<html>
<head>
<title>Table 1</title>
</head>
<body>
<h1>Simple Table Example</h1>
<hr>
<table border="1" width="80%" align="center">
<tr height="50">
<th width="50">Name</th>
<th>Age</th>
</tr>
<tr align="center" height="50">
<td width="500">Apple</td>
<td>100</td>
</tr>
<tr>
<td width="180%">Melon</td>
<td height="50">2</td>
</tr>
</table>
</body>
</html>'HTML' 카테고리의 다른 글
| HTML blockquote (0) | 2025.01.08 |
|---|---|
| HTML a 태그 (1) | 2024.11.24 |
| HTML 인풋 태그 (2) | 2024.11.24 |
| HTML 링크, 이미지, 리스트 태그 (0) | 2024.11.24 |
| HTML의 요소 (0) | 2024.11.24 |