안녕하세요, 여행벌입니다.
오늘은 표를 꾸미는데 필요한 CSS 속성들에 대해서 포스팅해보겠습니다.
caption-side 속성 : 표 제목 위치 정하기
<caption> 태그를 이용해 만든 표 제목은 caption-side 속성을 이용해 캡션의 위치를 표 아래쪽으로 옮길 수 있습니다.
caption-side : top | bottom
caption-side : top 은 캡션을 표의 윗부분에 표시해주고 HTML table 관련 태그 포스팅에서 caption 태그를 이용해 표 위에다가 제목을 달아봤습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 스타일</title>
<style>
body{
font-family:"맑은 고딕", "고딕", "굴림";
}
.table1 {
caption-side : bottom;
border : 1px solid black;
}
</style>
</head>
<body>
<table class="table1">
<caption>축구 경기 일정</caption>
<tr>
<td>울산</td>
<td>울산 vs 인천</td>
</tr>
<tr>
<td>부산</td>
<td>부산 vs 대전</td>
</tr>
<tr>
<td>서울</td>
<td>서울 vs 강원</td>
</tr>
</table>
</body>
</html>
caption-side 속성을 이용해 표 아래에 표 제목을 달아보겠습니다.
border 속성 : 표 테두리 스타일 결정하기
표를 삽입할 때 기본적으로 <table border="1"> 처럼 많이 사용해 표에 테두리를 표시합니다. 이처럼 border 속성을 이용하면 표에 테두리를 표시할 수 있고, 테두리의 색상이나 형태, 너비등을 지정할 수 있습니다. 또, border 속성은 table의 테두리 스타일 말고도 다른 태그에서도 자주 사용되는 속성입니다.
자세한 내용은 다음 포스팅에 정리해두었습니다.
(https://travelbeeee.tistory.com/397?category=807502)
border-collapse 속성 : 테두리 통합, 분리하기
<table>태그와 <td> 태그에 동시에 border 속성을 사용하면 테두리가 두 줄로 표시됩니다. 이때, border-collapse 속성을 사용하면 표의 바깥 테두리와 셀의 각 테두리가 떨어져 있는 것을 그대로 둘 것인지, 두 테두리를 하나로 합칠 것인지 결정할 수 있습니다.
border-collapse : collapse | separate
위와 동일한 예시에 td 태그에도 border 속성을 부여해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 스타일</title>
<style>
body{
font-family:"맑은 고딕", "고딕", "굴림";
}
.table1 {
caption-side : bottom;
border : 1px solid black;
}
td{
border : 1px solid black;
}
</style>
</head>
<body>
<table class="table1">
<caption>축구 경기 일정</caption>
<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가 생기고, 각 셀마다 border가 생겨서 테두리가 2개 겹치는 부분이 생기는 것을 확인할 수 있습니다.
같은 예시에 border-collapse 속성을 적용해 겹치는 부분을 없애보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 스타일</title>
<style>
body{
font-family:"맑은 고딕", "고딕", "굴림";
}
.table1 {
caption-side : bottom;
border : 1px solid black;
border-collapse : collapse;
}
td{
border : 1px solid black;
}
</style>
</head>
<body>
<table class="table1">
<caption>축구 경기 일정</caption>
<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 속성에서 collapse를 이용해 테두리를 통합한 경우에는 적용할 수 없는 속성입니다.
border-spacing 속성은 값을 1개 혹은 2개 줄 수 있는데, 값이 하나라면 수평 거리와 수직 거리를 한꺼번에 지정한 것이고, 2개라면 첫 번째 값은 수평 거리, 두 번째 값은 수직 거리를 의미합니다.
border-spacing : <크기> | <수평거리> <수직거리>
같은 예시에 border-spacing 속성을 이용해 테두리 사이의 거리를 띄워보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 스타일</title>
<style>
body{
font-family:"맑은 고딕", "고딕", "굴림";
}
.table1 {
caption-side : bottom;
border : 1px solid black;
border-spacing : 20px;
}
td{
border : 1px solid black;
}
</style>
</head>
<body>
<table class="table1">
<caption>축구 경기 일정</caption>
<tr>
<td>울산</td>
<td>울산 vs 인천</td>
</tr>
<tr>
<td>부산</td>
<td>부산 vs 대전</td>
</tr>
<tr>
<td>서울</td>
<td>서울 vs 강원</td>
</tr>
</table>
</body>
</html>
위와 비교하면 셀과 테두리 사이의 거리가 벌어져있는 것을 확인할 수 있습니다.
empty-cells 속성 : 빈 셀의 표시 여부 지정하기
border-collapse : separate 를 사용해 셀들을 분리했을 경우, empty-cells 속성을 사용하면 내용이 없는 빈 센들의 표시 여부를 지정할 수 있습니다.
empty-cells : show | hide
동일한 테이블에 한 쪽은 empty-cells : show / 다른 쪽은 empty-cells : hide 를 적용해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 스타일</title>
<style>
body{
font-family:"맑은 고딕", "고딕", "굴림";
}
.schedule {
border-collapse:separate;
margin:20px;
}
td {
border:1px solid black;
padding:10px;
text-align:center;
}
#tb1 td{
empty-cells:show;
}
#tb2 td {
empty-cells:hide;
}
</style>
</head>
<body>
<table class="schedule" id="tb1">
<caption>프로축구 경기 일정</caption>
<tr>
<td>울산</td>
<td>울산 vs 인천</td>
<td>TV 중계</td>
</tr>
<tr>
<td>부산</td>
<td>부산 vs 대전</td>
<td></td>
</tr>
<tr>
<td>서울</td>
<td>서울 vs 강원</td>
<td></td>
</tr>
</table>
<table class="schedule" id="tb2">
<caption>프로축구 경기 일정</caption>
<tr>
<td>울산</td>
<td>울산 vs 인천</td>
<td>TV 중계</td>
</tr>
<tr>
<td>부산</td>
<td>부산 vs 대전</td>
<td></td>
</tr>
<tr>
<td>서울</td>
<td>서울 vs 강원</td>
<td></td>
</tr>
</table>
</body>
</html>
아래 테이블은 empty-cells : hide; 를 통해 빈 셀을 표시하지 않았습니다.
width, height, padding 속성 : 표 너비, 높이, 패딩 지정하기
앞에서 다뤘던 width, height, padding 속성을 이용하면 표의 너비와 높이, 패딩을 지정할 수 있습니다. 너비나 높이를 특별히 지정하지 않는다면 셀 안의 내용이 표시될 만큼만 표시됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 스타일</title>
<style>
body{
font-family:"맑은 고딕", "고딕", "굴림";
}
.schedule {
border-collapse:separate;
margin:20px;
}
td {
border:1px solid black;
padding:10px;
text-align:center;
}
#tb1{
width : 300px;
padding : 10px;
}
</style>
</head>
<body>
<table class="schedule" id="tb1">
<caption>프로축구 경기 일정</caption>
<tr>
<td>울산</td>
<td>울산 vs 인천</td>
</tr>
<tr>
<td>부산</td>
<td>부산 vs 대전</td>
</tr>
<tr>
<td>서울</td>
<td>서울 vs 강원</td>
</tr>
</table>
<table class="schedule" id="tb2">
<caption>프로축구 경기 일정</caption>
<tr>
<td>울산</td>
<td>울산 vs 인천</td>
</tr>
<tr>
<td>부산</td>
<td>부산 vs 대전</td>
</tr>
<tr>
<td>서울</td>
<td>서울 vs 강원</td>
</tr>
</table>
</body>
</html>
첫 번째 테이블에는 width와 padding 속성 값을 적용해보았습니다.
table-layout 속성 : 콘텐츠에 맞게 셀 너비 지정하기
table-layout 속성을 이용하면 셀 안의 내용 양에 따라 셀 너비를 변하게 할지, 고정시킬지를 결정할 수 있습니다.
table-layout : fixed | auto
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 스타일</title>
<style>
body{
font-family:"맑은 고딕", "고딕", "굴림";
}
.table1 {
border-collapse:collapse;
width:300px;
table-layout:fixed;
}
.table1 td {
width:150px;
border:1px solid black;
padding:5px;
}
</style>
</head>
<body>
<h1>Table Layout</h1>
<table border="1" class="table1">
<tr>
<td>
한글로띄어쓰기없기길게붙여쓰기
</td>
<td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
</tr>
</table>
</body>
</html>
table-layout 에 fixed를 적용하면 위와 같이 영문 같은 경우에는 너비를 넘어가는 내용이 표 밖으로 나가게 됩니다.
text-align 속성 : 셀 안에서 수평 정렬하기
text-align : left | right | center
text-align 속성은 셀 안에서 텍스트의 수평 정렬 방법을 지정합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 스타일</title>
<style>
body{
font-family:"맑은 고딕", "고딕", "굴림";
}
table {
border-collapse:collapse;
width:300px;
}
td {
text-align : center;
padding:10px;
}
</style>
</head>
<body>
<table border="1">
<caption>프로축구 경기 일정</caption>
<tr>
<td>울산</td>
<td>울산 vs 인천</td>
</tr>
<tr>
<td>부산</td>
<td>부산 vs 대전</td>
</tr>
<tr>
<td>서울</td>
<td>서울 vs 강원</td>
</tr>
</table>
</body>
</html>
vertical-align 속성 : 셀 안에서 수직 정렬하기
vertical-align 속성은 수직 정렬 방법을 지정하는 속성이기 때문에 inline이나 inline-block으로 배치한 요소의 세로 정렬 방법으로 지정합니다.
vertical-align : baseline | top | bottom | middle | sub | super | text-top | text-bottom
| <길이값> | <백분율값>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Table CSS</title>
<style>
td {
height:100px;
padding:20px;
}
.va1 { vertical-align:top; }
.va2 { vertical-align:bottom; }
.va3 { vertical-align:middle; }
</style>
</head>
<body>
<table border="1">
<caption>vertical-alignment</caption>
<tr>
<td class="va1">alignment</td>
<td class="va2">alignment</td>
<td class="va3">alignment</td>
</tr>
</table>
</body>
</html>
이상으로 표를 꾸미는데 필요한 여러 CSS 속성에 대한 포스팅을 마치겠습니다.
'Dev > HTML5 + CSS3' 카테고리의 다른 글
| [HTML+CSS] 텍스트 단 나누기(다단) - travelbeeee (0) | 2020.04.12 |
|---|---|
| [HTML+CSS] CSS 포지셔닝 float, position, z-index - travelbeeee (0) | 2020.04.12 |
| [HTML+CSS] 배경 스타일 : background 속성 정리 (0) | 2020.04.09 |
| [HTML+CSS] display, padding, margin, border 속성 정리 - travelbeeee (0) | 2020.04.09 |
| [HTML+CSS] 목록 스타일 : list 속성 정리 - travelbeeee (0) | 2020.04.08 |