<table> : 표 만들기
<caption> : 표 제목
<th> : 표 분류 (제목 행)
<tr> : 한 행
<td> : 한 행 속 각 셀
만약 th가 이름 성별 전화번호 순으로 되어있다면
td도 th의 순서대로 넣어주면 된다
웹의 구조처럼 표에도 구조가 있다.
t(table) + head, body, footy로
<thead>, <tbody>, <tfoot> 으로 나타낼 수 있다.
행이나 열을 합치는 rowspan, colspan
<td rowspan = "합칠 셀의 개수"> 셀의 내용 </td>
<td colsapn = "합칠 셀의 개수"> 셀의 내용 </td>
열을 묶어주는 col, colgroup
특정 열에 배경색을 넣거나 너비를 바꾸려면 원하는 열을 선택할 수 있어야 하는데, 그럴 때 사용 하는 태그
<colgroup>
<colgroup>
</colgroup>
반드시 caption 태그 다음에 써야한다. (표가 시작되기 전에 열의 상태를 고지)
<col>태그를 사용할 때는 <colgroup>태그 안에 <col> 태그를 포함해 표 전체 열의 개수만큼 <col>태그를 사용해야 함.
<col> 태그 안에서도 방금 배운 rowspan, colspan을 통해 셀을 합쳐 서식을 지정 해 줄 수있다.
| 용도 | 중량 | 개수 | 가격 |
|---|---|---|---|
| 선물용 | 3kg | 11~16과 | 35,000원 |
| 5kg | 18~26과 | 52,000원 | |
| 가정용 | 3kg | 11~16과 | 30,000원 |
| 5kg | 18~26과 | 47,000원 |
<!DOCTYPE html>
<html lang="kr">
<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>20220128 Make Table</title>
</head>
<body>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<colgroup>
<col style="background-color:#eee;"
<col>
<col span="2" style="width:150px">
</colgroup>
<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>
</table>
</body>
</html>
'웹 프로그래밍 (Web Programming)' 카테고리의 다른 글
| [IntelliJ, JSP, Java] Cannot resolve 에러 (0) | 2023.05.24 |
|---|---|
| [Flask] 부트스트랩 carousel 동적 사진 슬라이더 적용 - Bootstrap carousel multiple items (0) | 2023.01.16 |
| [Flask] Bootstrap 304, 404 static/template 적용 에러 (0) | 2023.01.10 |
| [Django] 220410 학습일지 2 - Django ulrs, views, html (0) | 2022.04.10 |
| [Django] 220408 학습일지 1 - Django 홈페이지 만들기 (0) | 2022.04.08 |