반응형
표를 쓸 때, 사용하는 table 태그를 알아봅시다.
table 태그를 사용할 때는, 같이 쓰이는 여러 태그를 알아야 합니다.
- table: 테이블을 쓰겠다는 태그입니다.
- th: 셀(cell)의 헤더를 표시합니다.
- tr: 가로줄(row)을 표시합니다.
- td: 셀(cell)를 표시합니다.
- caption: 테이블의 문구를 표시합니다.
- colgroup: col 태그를 감싸는 태그입니다.
- col: 특정 열을 지칭합니다.
- thead: 헤더의 그룹을 정합니다.
- tbody: 테이블 바디를 정합니다.
- tfoot: 테이블 푸터를 정합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<table>
<caption>Monthly Sales Report</caption>
<colgroup>
<col style="width: 20%;">
<col style="width: 30%;">
<col style="width: 50%;">
</colgroup>
<thead>
<tr>
<th>Date</th>
<th>Product</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<tr>
<td>2023-01-01</td>
<td>Product A</td>
<td>100</td>
</tr>
<tr>
<td>2023-01-15</td>
<td>Product B</td>
<td>150</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>250</td>
</tr>
</tfoot>
</table>
</body>
</html>
모든 코딩이 그러하듯, 다 외울 필요는 없고 자주 쓰는 3가지만 알아놓고 있어도 충분합니다. 좋은 소스를 복붙하고 커스텀할 정도로만 해도 훌륭해요.
- table
- tr
- td
웹사이트를 편리하게 만들 수 있는 웹프로그램을 만들었습니다. 한번 구경해보세요.
https://zabefofoon.github.io/mm-guide/
로또 번호 생성기도 만들었습니다. 한번 구경해보세요.
https://zabefofoon.github.io/simple-lotto/?lotto=lottoKoea
반응형
'Coding > Html' 카테고리의 다른 글
| Html iframe 태그 알아보기(Youtube) (82) | 2023.12.25 |
|---|---|
| Html video 태그 알아보기 (81) | 2023.12.25 |
| Html img 태그 알아보기 (78) | 2023.12.25 |
| Html div 태그 알아보기 (84) | 2023.12.25 |
| Html a 태그 알아보기 (78) | 2023.12.25 |
