표 제목의 위치를 정해 주는 속성
- caption-side 속성
- 캡션은 기본적으로 표 위쪽에 표시되지만 caption-side 속성을 사용하면 표 아래쪽으로 옮길 수 있음
- 기본형 :
┌ top : 캡션을 표 윗부분에 표시함 / 기본값caption-side: top | bottom
└ bottom : 캡션을 표 아랫부분에 표시함
표에 테두리를 그려 주는 속성
- border 속성
- 표 바깥 테두리와 셀 테두리를 각각 지정함
-(예시) :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Exmaple</title>
<style>
table {
caption-side: bottom; /* 표 캡션 위치 아래로 */
border: 1px solid black; /* 표 테두리는 검은색 실선으로 */
}
td, th {
border: 1px dotted black; /* 셀 테두리는 검은색 점선으로 */
}
</style>
</head>
<body>
<h1>예제</h1>
<table>
<caption>예제</caption>
<thead>
<tr>
<th>예시 1</th>
<th>예시 2</th>
<th>예시 3</th>
<th>예시 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>가</td>
<td>나</td>
<td>다</td>
<td>라</td>
</tr>
</tbody>
</table>
</body>
</html>-(결과) :
셀 사이의 여백을 지정하는 속성
- border-spacing 속성
- 셀과 셀 사이의 여백을 조절할 수 있음
- 수평 거리의 값과 수직 거리의 값을 공백으로 구별해서 나타내는데, 두 값이 같다면 1개만 지정해도 됨
- 기본형 :
border-spacing: 수평거리 수직거리
표와 셀 테두리를 합쳐 주는 속성
- border-collapse 속성
- "표에 테두리를 그려주는 속성"의 예시의 결과를 보면 <table> 태그와 <td> 태그에서 border 속성을 사용하면 셀과 셀 사이에 여백이 생기면서 두 줄로 표시되는데, 이 때 두 줄로 둘 것인지 혹은 합쳐서 하나로 표시할 것인지 결정함
- <table> 태그에 적용되는 스타일에만 지정하면 됨
- "표에 테두리를 그려주는 속성"의 예시의 결과를 보면 <table> 태그와 <td> 태그에서 border 속성을 사용하면 셀과 셀 사이에 여백이 생기면서 두 줄로 표시되는데, 이 때 두 줄로 둘 것인지 혹은 합쳐서 하나로 표시할 것인지 결정함
- border-collapse의 속성값
- collapse : 표와 셀의 테두리를 합쳐 하나로 표시함
- separate : 표와 셀의 테두리를 따로 표시함 / 기본값
-(예시) :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Exmaple</title>
<style>
table {
caption-side: bottom; /* 표 캡션 위치 아래로 */
border: 1px solid black; /* 표 테두리는 검은색 실선으로 */
border-collapse: collapse; /* 표와 테두리를 한 줄로 표시 */
}
td, th {
border: 1px dotted black; /* 셀 테두리는 검은색 점선으로 */
}
</style>
</head>
<body>
<h1>예제</h1>
<table>
<caption>예제</caption>
<thead>
<tr>
<th>예시 1</th>
<th>예시 2</th>
<th>예시 3</th>
<th>예시 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>가</td>
<td>나</td>
<td>다</td>
<td>라</td>
</tr>
</tbody>
</table>
</body>
</html>-(결과) :
'Web Basic > CSS' 카테고리의 다른 글
| 박스 모델 테두리 지정하기 (0) | 2021.07.30 |
|---|---|
| CSS 박스 모델 (1) | 2021.07.15 |
| 목록 스타일 (0) | 2021.07.15 |
| 텍스트 관련 스타일 (0) | 2021.07.14 |
| 웹 폰트 (0) | 2021.07.14 |