![[HTML] table 테이블 태그](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FKqHoR%2FbtroVktqtId%2FAAAAAAAAAAAAAAAAAAAAAEIUy72sMEnA29avq3MZFyywcsvVG3raZ_2Y6B0FjOze%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1769871599%26allow_ip%3D%26allow_referer%3D%26signature%3D06gD4P%252F3kxgD4O4m8Q1X3EUnWQ4%253D)
예시 1
<!DOCTYPE html>
<html>
<head>
<title>HTML Basic Page</title>
</head>
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 1</td>
</tr>
<tr>
<td>Data 2</td>
<td>Data 2</td>
</tr>
</table>
</body>
</html>
예시 2
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Basic</title>
</head>
<body>
<table border="1">
<caption>Caption</caption>
<colgroup>
<col span="2" style="background: red" />
<col style="background: blue" />
</colgroup>
<thead style="background: green" >
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</tbody>
<tfoot style="background: yellow" >
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</tfoot>
</table>
</body>
</html>
예시 3
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Basic</title>
</head>
<body>
<table border="1" >
<tr>
<th colspan="3">Table Data</th>
<th rowspan="3">Table Data</th>
</tr>
<tr>
<td>Table Data</td>
<td rowspan="2">Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</table>
</body>
</html>
테이블 태그
과거에는 테이블 태그를 사용해 레이아웃도 구성했지만 현대 웹 페이지는 대부분 DIV 태그를 사용해 레이아웃을 구성하므로 사용빈도가 굉장히 줄었다.
<tr></tr>
table row
표 내부 행 태그
<th></th>
table header
행 내부 제목 셀 태그
<td></td>
table data
행 내부 일반 셀 태그
테이블 태그 속성
border
표 테두리 두께 지정
'HTML > Day36' 카테고리의 다른 글
| [HTML] audio 오디오 태그 (0) | 2021.12.25 |
|---|---|
| [HTML] img 이미지 태그 (0) | 2021.12.25 |
| [HTML] 정의 목록 태그 dl, dt, dd (0) | 2021.12.19 |
| [HTML] 목록 태그 ul, ol, li (0) | 2021.12.19 |
| [HTML] ruby 루비문자 (0) | 2021.12.19 |