1. 표 제목의 위치 caption-side
top과 bottom이 있다.
2. 표의 테두리 border
표의 두께, 스타일, 색을 지정한다.
스타일로는 solid, dotted, dashed, double, groove, ridge, inset, outset이 있다.
3. 표와 셀 테두리 합치기 border-collapse
border 속성만 사용하면 셀과 셀 사이에 여백이 생겨서 두 줄이 된다.
이 두 줄을 합치는 속성이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>표 스타일</title>
<style>
table {
caption-side:bottom;
border:3px solid black; /*테두리의 두께 스타일 색상*/
border-collapse:collapse; /*표와 셀 테두리 합치기*/
}
td, th {
border:2px dashed black; /*테두리의 두께 스타일 색상*/
padding:15px;
text-align:center;
}
</style>
</head>
<body>
<h2>상품 구성</h2>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>갯수</t>
<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>
더보기
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.
'CSS' 카테고리의 다른 글
| 테두리 스타일 지정하기 (0) | 2022.11.13 |
|---|---|
| CSS와 박스모델 (0) | 2022.11.13 |
| 목록 스타일 (0) | 2022.11.12 |
| 텍스트 관련 스타일 (0) | 2022.11.12 |
| 구글 폰트 사용하기 (0) | 2022.11.11 |