CSS 테이블, 표 스타일 셀 여백 및 테두리 한줄로 표현하는 방법
테이블 제목 위치 지정 caption-side 속성
HTML 태그로 표를 작성할 때 table 태그를 사용하며, table 태그 하위에 caption 태그로 표 제목을 지정할 수 있습니다. 이때 표 제목의 위치는 기본값으로 위에 표시됩니다만 표 제목을 아래에 위치시키고 싶을 경우 caption-side 속성을 사용하면 됩니다.
caption-side 속성 기본형
caption-side : top | bottom
표 테두리 스타일 border 속성
표 테두리의 스타일 변경이 필요할 때는 border 속성을 사용하면 됩니다. border 속성은 표 이외에도 다양한 곳에 사용됩니다. 기본적으로 HTML의 table 태그로 그려진 표의 테두리는 외부 테두리와 내부 테두리로 표현이 됩니다. 외부 테두리는 table 태그에 스타일 지정해 주면 되고, 내부 테두리는 td, th 태그에 지정해 주면 됩니다.
border 속성 기본형
border : <테두리 굵기> <테두리 모양> <테두리 색>
border 테두리 속성값 리스트
속성값 | 설명 |
none | 테두리 표시 안함.(단 주변에 의해서 그려질 수 있음.) |
hidden | 테두리 표시 안함.(강한 우선순위로 표시되지 않음.) |
dotted | 테두리가 점선으로 표현 |
dashed | dotted 보다 길게 표현되는 점선 |
solid | 테두리가 직선으로 표현 |
double | 테두리가 두 선으로 표현 |
groove | 테두리가 파인 듯한 모양으로 표현 |
ride | 테두리가 튀어나온 듯한 모양. |
inset | 테두리가 파인 듯한 모양으로 표현. boder-collapse의 값에 따라 차이가 있음. |
outset | 테두리가 튀어나온 듯한 표현. boder-collapse의 값에 따라 차이가 있음. |
border 속성 사용 예제
<style>
table {
border : 2px solid gray;
caption-side: bottom;
}
th, td {
text-align: center;
padding : 15px;
border : 1px dotted black;
}
</style>
</head>
<body>
<table>
<caption>책 리스트</caption>
<tr>
<th>책제목</th>
<th>장르</th>
</tr>
<tr>
<td>삼국지</td>
<td>소설</td>
</tr>
<tr>
<td>리팩터링</td>
<td>IT 전공서적</td>
</tr>
<tr>
<td>셜록홈즈</td>
<td>추리소설</td>
</tr>
</table>
</body>
 |
| HTML의 표는 내부 테두리와 셀 테두리 두종류가 존재합니다. |
표 셀 사이 여백 지정 border-spacing 속성
표의 외부 테두리와 내부 테두리 사이의 여백을 조정할 때 사용합니다. 수평거리와 수직거리가 동일하다면 1개만 입력해도 됩니다.
border-spacing 기본형
border-spacing : 수평거리 수직거리
테이블, 표 테두리를 한줄로 표현
table 태그에 의해 그려지는 외부 테두리와 td, th로 그려지는 내부 테두리가 보여서 HTML 테이블, 표는 두 줄로 표현되는 게 기본값입니다. border-collapse 속성을 사용하면, HTML 표 테두리를 한 줄로 표현할 수 있습니다.
border-collapse 속성값
- collapse - 내부 테두리와 외부 테두리를 합쳐 한줄로 표현
- separate - 기본값으로 내부 테두리와 외부 테두리 두줄로 표현
border-collapse 사용예제
<style>
table {
border : 2px solid gray;
caption-side: bottom;
border-collapse: collapse;
}
th, td {
text-align: center;
padding : 15px;
border : 1px dotted black;
}
</style>
 |
| border-collapse 속성을 사용하여 테두리를 두줄로 표현할지 한줄로 표현할지 설정할 수 있습니다. |