<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>표 스타일 다양하게 적용하기 </title>
<style>
table {
caption-side:bottom; /*표 캡션 위치 아래로 */
border:1px solid black; /*표 테두리는 검은색 실선으로 */
border-collapse:collapse; /*표와 테두리를 한 줄로 표시 */
}
td,th {
border:1px dotted black; /*셀 테두리는 검은색 점선으로 */
padding:10px; /*셀 테두리와 내용사이의 여백 */
text-align:center; /*셀 내용 정렬 방법 */
}
</style>
</head>
<body>
<h2>상품구성</h2>
<table>
<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~26과</td>
<td>30,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
</table>
</body>
</html>
'css' 카테고리의 다른 글
| 7장 마무리 문제 2 (0) | 2023.03.26 |
|---|---|
| 7장 마무리 문제 1 (0) | 2023.03.26 |
| 7장 실습-목록을 사용하여 세로 메뉴 만들기 (0) | 2023.03.25 |
| 6장 마무리 문제 2 (0) | 2023.03.24 |
| 6장 마무리 문제 1 (0) | 2023.03.24 |