반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>표 만들기</title>
</head>
<body>
<!--
row 행(가로) - 밑으로 추가
column 열(세로) - 옆으로 추가
<table> 태그
<tr> 행 생성
<td> 열 생성
<th> 표의 머리를 정의, 셀 제목 글자를 강조하는 역할
<caption> 표 위에 제목이 달림
<rowspan> 셀을 세로로 병합
<colspan> 셀을 가로로 병합
표의 시맨틱 태그
<thead> 표 머리말 부분의 그룹 태그
<tbody> 표 본문 부분의 그룹 태그
<tfoot> 표
-->
<h2>상품 구성</h2>
<table border="1px">
<caption>선물용과 가정용 상품 구성</caption>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>개수</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>선물용</td>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
</table>
<hr>
<table border="1px">
<caption>선물용과 가정용 상품 구성</caption>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>개수</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>푸터</td>
<td colspan="3">테스트</td>
</tr>
</tfoot>
</table>
</body>
</html>
반응형
'IT > HTML' 카테고리의 다른 글
| HTML 3일차 - input 태그 (0) | 2023.05.09 |
|---|---|
| HTML 3일차 - form 태그 (0) | 2023.05.09 |
| HTML 2일차 - 하이퍼링크(a) (0) | 2023.05.09 |
| HTML 2일차 - 미디어태그(audio, video) (0) | 2023.05.09 |
| HTML 2일차 - 미디어태그(object, embed) (0) | 2023.05.09 |