표 제목의 위치를 정해 주는 속성
- 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' 카테고리의 다른 글
박스 모델 테두리 지정하기 (2) | 2021.07.30 |
---|---|
CSS 박스 모델 (2) | 2021.07.15 |
목록 스타일 (1) | 2021.07.15 |
텍스트 관련 스타일 (0) | 2021.07.14 |
웹 폰트 (0) | 2021.07.14 |