고정 헤더 영역
상세 컨텐츠
본문
반응형
caption-side 속성 - 표 제목 위치 정하기
- 표 제목은 <caption> 태그를 이용해 캡션으로 표시한다. 기본적으로 캡션은 표의 위쪽에 표시되지만 caption-side 속성을 이용하면 캡션의 위치를 표 아래쪽으로 옮길 수 있다.
caption-size: top | bottom
속성
- top : 캡션을 표의 윗부분에 표시한다. 기본값이다.
- bottom : 캡션을 표의 아랫부분에 표시한다.
border 속성 - 표 테두리 스타일 결정하기
- 표도 border 속성을 이용해 테두리를 그릴 수 있다. 표의 바깥 테두리와 셀의 테두리를 따로 지정을 할 수 있다.
<html>
<head>
<meta charset="utf-8">
<style>
.table1 { border: 1px solid black; }
.table1 td {
border: 1px dotted blue;
padding: 11px;
text-align: center;
}
</style>
</head>
<body>
<h4>프로축구 경기 일정</h4>
<table class="table1`">
<tr>
<td>울산</td>
<td>울산 vs 인천</td>
</tr>
<tr>
<td>부산</td>
<td>부산 vs 대구</td>
</tr>
<tr>
<td>서울</td>
<td>서울 vs 대구</td>
</tr>
<table>
</body>
</html>
border-collapse 속성 - 테두리 통합, 분리하기
- 테두리가 2줄로 표시되는데 border-collapse 속성을 이용하면 표의 바깥 테두리와 셀의 각 테두리가 떨어져 있는 것을 그대로 둘 것인지, 두 테두리를 하나로 합칠 것 인지를 결정할 수 있다.
border-collapse : collapse | seperate
속성
- collapse : 테두리를 하나로 합쳐 표시한다.
- separate : 테두리를 따로 표시한다. 기본 값이다.
<html>
<head>
<meta charset="utf-8">
<style>
.table1 {
border: 1px solid black;
border-collapse: collapse;
}
.table1 td {
border: 1px dotted blue;
padding: 11px;
text-align: center;
}
</style>
</head>
<body>
<h4>프로축구 경기 일정</h4>
<table class="table1`">
<tr>
<td>울산</td>
<td>울산 vs 인천</td>
</tr>
<tr>
<td>부산</td>
<td>부산 vs 대구</td>
</tr>
<tr>
<td>서울</td>
<td>서울 vs 대구</td>
</tr>
<table>
</body>
</html>
border-spacing 속성 - 인접한 셀 테두리 사이 거리 지정하기
- border-spacing 속성은 border-collapse: separate를 사용해 셀들을 분리했을 경우, 인접한 셀 테두리 사이의 거리를 지정한다.
border-spacing: <크기>
속성
- <크기> : px이나 em 등 크기의 단위로 직접 지정한다.
<html>
<head>
<meta charset="utf-8">
<style>
.table1 {
border-collapse: separate;
border-spacing: 10px 10px;
}
.table1 td {
border: 1px dotted blue;
padding: 11px;
text-align: center;
}
</style>
</head>
<body>
<h4>프로축구 경기 일정</h4>
<table class="table1`">
<tr>
<td>울산</td>
<td>울산 vs 인천</td>
</tr>
<tr>
<td>부산</td>
<td>부산 vs 대구</td>
</tr>
<tr>
<td>서울</td>
<td>서울 vs 대구</td>
</tr>
<table>
</body>
</html>
반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [HTML5] 시맨틱 태그 (0) | 2021.05.10 |
|---|---|
| [CSS 기초] 표 스타일 (2) (0) | 2021.05.07 |
| [CSS 기초] 다단으로 편집하기 (0) | 2021.05.03 |
| [CSS 기초] CSS 포지셔닝과 주요 속성들 (0) | 2021.05.01 |
| [CSS 기초] 여백을 조절하는 속성들 (0) | 2021.04.28 |
댓글 영역