CSS를 활용하면 HTML 테이블에 원하는 스타일을 자유롭게 정의할 수 있습니다. <table> 요소와 그 하위 요소들을 꾸밀 때 주로 사용되는 대표적인 CSS 속성은 다음과 같습니다.
- border
테두리의 두께(border-width), 스타일(border-style), 색상(border-color)을 한 번에 정의할 수 있는 속성입니다. - border-collapse
테이블 셀들의 테두리를 서로 공유(병합)할지, 아니면 각각 분리해서 표시할지 지정합니다. - caption-side
테이블 캡션(<caption>) 박스를 위쪽 또는 아래쪽 등 세로 위치에 배치할 때 사용합니다. - empty-cells
내용이 없는 빈 셀의 테두리와 배경을 표시할지 여부를 결정합니다. - table-layout
브라우저가 테이블의 행, 열, 셀을 배치할 때 사용할 레이아웃 알고리즘(auto 또는 fixed)을 정의합니다.
예제 1: 기본 테이블 스타일링
다음 예제는 border 속성으로 특정 헤더 셀에 굵은 파란색 테두리를 추가하고, letter-spacing으로 글자 간격을 조절해 직원 목록 테이블을 스타일링한 것입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Bookman Old Style', serif;
}
th {
letter-spacing: 1.9px;
}
#one {
border-right: thick solid blue;
}
td {
text-align: center;
}
</style>
</head>
<body>
<h2>직원 목록</h2>
<div>
<table>
<tr>
<th id="one">직원</th>
<th>부서</th>
</tr>
<tr>
<td>John</td>
<td>마케팅</td>
</tr>
<tr>
<td>Brad</td>
<td>재무</td>
</tr>
<tr>
<td>Tim</td>
<td>IT</td>
</tr>
<tr>
<td>Steve</td>
<td>운영</td>
</tr>
</table>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
예제 2: empty-cells와 box-shadow 활용
다음 예제는 empty-cells 속성으로 내용이 없는 빈 셀을 숨기고, box-shadow를 활용해 테이블 전체, 행, 셀에 각각 다른 색상의 음영 효과를 추가한 모습입니다.
<!DOCTYPE html>
<html>
<head>
<style>
table {
float: left;
empty-cells: hide;
box-shadow: inset 0 0 4px orange;
}
tr {
box-shadow: inset 0 0 10px greenyellow;
}
td {
font-style: italic;
box-shadow: inset 0 0 8px red;
}
table, td {
margin: 6px;
padding: 6px;
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>데모 테이블</caption>
<tr>
<th>헤더 1</th>
<th>헤더 2</th>
<th>헤더 3</th>
</tr>
<tr>
<td>demo</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>demo</td>
</tr>
<tr>
<td></td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html>실행 결과
위 코드를 실행하면 빈 셀이 숨겨지고 각 요소에 음영 효과가 적용된 다음과 같은 화면이 출력됩니다.
