안녕하세요 오늘은
CSS Text(글꼴) / List(목록) / Table Style(표 스타일) 중 마지막 Table Style에 알아볼게요.
Table Style(표 스타일)
표 스타일은 표의 크기, 테두리, 셀의 테두리, 여러 가지 여백 등의 표 스타일을 지정이 가능해요.
caption-side 속성
caption-side 속성은 표 제목의 위치를 정해주는 속성으로
<caption> 태그를 사용해서 캡션으로 표시해요.
/*기본형*/
caption-side: top | bottom
caption-side 속성값
| 종류 | 설명 |
| top | 캡션을 표 윗부분에 표시 : 기본값 |
| bottom | 캡션을 표 아랫부분에 표시 |
border 속성
border 속성은 표 테두리를 그려주는 속성으로
표 바깥 테두리와 셀 테두리를 각각 지정이 가능해요.
border 속성 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>표 스타일</title>
<style>
table {
caption-side: bottom; /* 표 캡션 위치 */
border:1px solid black; /* 표 테두리는 검은 색 실선으로 */
}
td, th {
border:1px dotted black; /* 셀 테두리는 검은 색 점선으로 */
padding:10px; /* 셀 테두리와 내용 사이의 여백 */
text-align:center; /* 셀 내용 가운데 정렬 */
}
</style>
</head>
<body>
<h2>상품 구성</h2>
<table>
<caption>어센틱 레플리카 유니폼 상품 구성</caption>
<thead>
<tr>
<th>용도</th>
<th>홈 / 원정</t>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">어센틱</td>
<td>홈 유니폼</td>
<td>98,000원</td>
</tr>
<tr>
<td>원정 유니폼</td>
<td>89,000원</td>
</tr>
<tr>
<td rowspan="2">레플리카</td>
<td>홈 유니폼</td>
<td>75,000원</td>
</tr>
<tr>
<td>원정 유니폼</td>
<td>65,000원</td>
</tr>
</tbody>
</table>
</body>
</html>
border-spacing 속성
border-spacing 속성은 셀 사이의 여백을 지정할 수 있어요.
표와 셀에 따로 테두리를 지정하면 셀과 셀 사이에 여백을 생성 함으로
셀과 셀 사이의 여백을 조정할 수 있어요.
/*기본형*/
border-spacing: 수평거리 수직거리수평거리의 값과 수직거리의 값을 공백으로 구별해서 나타냄으로
두 값이 같다면 1개만 지정이 가능해요.
border-collapse 속성
border-collapse 속성은 표와 셀 테두리를 합쳐주는 속성으로
<table> 태그와 <td> 태그에서 border 속성 사용 시 셀과 셀 사이에 여백 생성과 두 줄로 표시해요.
border-collapse 속성
| 종류 | 설명 |
| collapse | 표와 셀의 테두리를 합쳐 하나로 표시 |
| separate | 표와 셀의 테두리를 따로 표시 : 기본 |
border-collapse 속성 예제
<!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>홈 / 원정</t>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">어센틱</td>
<td>홈 유니폼</td>
<td>98,000원</td>
</tr>
<tr>
<td>원정 유니폼</td>
<td>89,000원</td>
</tr>
<tr>
<td rowspan="2">레플리카</td>
<td>홈 유니폼</td>
<td>75,000원</td>
</tr>
<tr>
<td>원정 유니폼</td>
<td>65,000원</td>
</tr>
</tbody>
</table>
</body>
</html>
여기까지 CSS Text(글꼴) / List(목록) / Table Style(표 스타일) 중 마지막 Table Style에 알아봤는데요.
각 스타일이 다른만큼 혼란이 올 수 있으니 꾸준한 복습만이 답인 것 같아요.
'Frontend > CSS' 카테고리의 다른 글
| CSS Box-Model (0) | 2025.10.18 |
|---|---|
| CSS Values & Units (0) | 2025.10.16 |
| CSS Text / List / Table Style (2) (0) | 2025.10.04 |
| CSS Text / List / Table Style (1) (0) | 2025.10.02 |
| CSS Selectors (3) (0) | 2025.09.30 |