반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border='1'>
<thead>
<tr>
<th>출장비 내역</th>
<th>금액</th>
</tr>
</thead>
<tbody>
<tr>
<td>교통비</td>
<td>45000</td>
</tr>
</tbody>
<tr>
<td>총 합계</td>
<td>103000</td>
</tr>
</tfoot>
</table>
</body>
</html>
table, thead, tfoot
<table>로 시작하고 </table>로 끝납니다
<thead>란 표의 가장 위에를 의미합니다.
<thead>에 포함되는 <tr>이 행이 되고 <th>열이 됩니다.
<tr>이 1개이고 <th>가 2개이니 1행 2열이 되는 것이죠
<tfoot> 가장 마지막 줄을 의미합니다.
<tfoot> 의 경우는 <tr>이 행이 되고 <td>가 열이 됩니다.
<tbody>는 <thead>와 <tfoot>을 제외한 나머지 부분을 의미합니다.
<tbody>의 경우 <tr>이 행이 되고 <td>가 열이 됩니다.
<thead> <tbody> <tfoot>의 경우 안 써도 결과 무방하지만 나중에 부트스트랩이라는 걸 쓰면 구분해서 써야합니다. 그리고 여러 태그중에 어디서 부터 헤드이고 바디이고 푸터인지 알아보기도 쉬워지죠
반응형
'[HTML && CSS] > [HTML]' 카테고리의 다른 글
| [HTML] select 태그, iframe 태그, button vs input (0) | 2021.06.21 |
|---|---|
| [HTML] input태그 (0) | 2021.06.21 |
| [HTML] ol 태그, ul 태그, dl 태그, dd 태그, dt 태그 (0) | 2021.06.21 |
| [HTML] div태그, span태그 (블록태그 , 인라인태그) (0) | 2021.06.21 |
| [HTML] 텍스트 태그 <b>,<strong>,<i>,<del>,<ins>,<mark>,<sup>,<sub>,<small> [진하게, 강조, 이탤릭, 취소선, 밑줄, 하이라이팅, 윗첨자, 아랫첨자] (0) | 2021.06.21 |