caption-side : 표 제목의 위치 정하기
표 제목은 <caption> 태그를 이용해 캡션으로 표시한다.
caption-side 속성을 이용해 제목을 표의 위쪽에 표시할 지, 표의 아래쪽에 표시할 지 선택할 수 있다.
caption-side : top | bottom
border : 표에 테두리 그리기
표 바깥 테두리와 셀 테두리를 각각 지정합니다.
다음 예제는 border속성을 이용해 바깥 테두리는 1px의 검은색 실선으로, 셀 테두리는 1px의 검은색 점선으로 표시한 것이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
<style>
table {
caption-side: bottom;
border: 1px solid red;
}
td, th {
border : 1px dotted blue;
padding: 10px;
text-align : center;
}
</style>
</head>
<body>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<thead>
<th>용도</th>
<th>중량</th>
<th>개수</th>
<th>가격</th>
</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>
border-spacing : 셀 사이의 여백을 지정
표와 셀에 따로 테두리를 지정하면 셀과 셀 사이에 여백이 조금 생긴다.
border-spacing 속성을 사용하면 셀과 셀 사이의 여백을 조절할 수 있다.
border-spacing : 수평거리 수직거리두 개의 값이 같다면 1개만 지정해도 된다.
border-collapse : 표와 셀 테두리 합치기
앞에서 살펴본 것처럼 <table> 태그와 <td> 태그에서 border 속성을 사용하면 셀과 셀 사이에 여백이 생기면서 두 줄로 표시된다.
이때 두 줄로 그냥 둘 것인지, 아니면 합쳐서 하나로 표시할 것인지 결정하는 것이 border-collapse 속성이다.
이 속성은 <table> 태그에 적용되는 스타일에만 지정하면 된다.
| 종류 | 설명 |
| collapse | 표와 셀의 테두리를 합쳐 하나로 표시한다 |
| separate | 표와 셀의 테두리를 따로 표시한다. 기본값이다. |
border 속성의 예제에 border-collapse 속성을 적용해 보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</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>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<thead>
<th>용도</th>
<th>중량</th>
<th>개수</th>
<th>가격</th>
</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 Developing > CSS 기초' 카테고리의 다른 글
| III. 박스 모델 - 2. 테두리 스타일 지정하기 (0) | 2022.06.04 |
|---|---|
| III. 박스 모델 - 1. CSS와 박스 모델 (0) | 2022.06.03 |
| II. 텍스트 - 4. 목록 스타일 (0) | 2022.06.02 |
| II. 텍스트 - 3. 텍스트 관련 스타일 (0) | 2022.06.02 |
| II. 텍스트 - 2. 웹 폰트 사용하기 (0) | 2022.06.01 |
댓글