블로그에 유용한 태그 5 - table 태그에 스타일 적용하기

* 이전 글 보기
- 블로그에 유용한 태그 4 - table 태그로 간단한 표 만들기

 table 태그는 다양한 속성을 제공하지만, 속성으로 해결할 수 없는 것들이 있다. 또 font 태그와 CSS의 font 속성 비교에서 확인한 것처럼 같은 스타일을 일괄 적용하려면 CSS를 사용하는 편이 경제적이다. table 태그와 스타일을 함께 사용하는 것에 대해 살펴보자.

1. 표 전체 테두리와 각 셀 테두리 합치기 (border-collapse:collapse)

 개인적으로 table에 적용하는 스타일 중 가장 자주 사용하는 속성이 border-collapse다. 블로그에 유용한 태그 4 - table 태그로 간단한 표 만들기의 예제를 살펴보면 표 전체의 외곽선과 각 셀(작은 칸)의 외곽선이 따로 표시되는 것을 확인할 수 있다. border-collapse 속성을 collapse로 지정하면 표 전체 외곽선과 각 셀 외곽선을 합칠 수 있다. 표의 내용에 집중하기도 쉽고 표 자체의 디자인도 한결 보기 좋다.

border-collapse: collapse | separate
collapse	표 외곽선과 셀 외곽선을 하나로 합친다.
separate	표 외곽선과 셀 외곽선을 구분한다. 기본값이다.

<예제 1>

border-collapse: separate
첫째 줄 첫째 칸 첫째 줄 둘째 칸 둘째 줄 첫째 칸 둘째 줄 둘째 칸
border-collapse: collapse
첫째 줄 첫째 칸 첫째 줄 둘째 칸 둘째 줄 첫째 칸 둘째 줄 둘째 칸

 <예제 1>에서 border-collapse: separate로 지정된 표를 보면 표 전체 테두리와 각 셀 테두리 사이의 간격을 확인할 수 있다. 이것이 table 태그의 기본값이다. 그러나 아래의 border-collapse: collapse를 보면 표 전체 테두리와 각 셀 테두리가 붙어 있다. 표가 보기도 좋고 내용도 한눈에 들어온다. 보통의 상황에선 border-collapse: collapse로 지정한 표가 훨씬 많이 사용된다. 만약 HTML 문서 전체에 border-collapse: collapse 속성을 지정하려면 CSS 문서에 아래 내용을 삽입한다.

table {border-collapse: collapse}

 위 내용을 CSS에 삽입하면 사용자가 table 태그 스타일에 따로 border-collapse: separate 속성을 지정하지 않는 한 HTML 문서 내의 모든 표에 border-collapse: collapse 속성이 적용된다.

2. table 태그 속성을 스타일로 적용하기

 table 태그의 다양한 속성 중 내가 자주 사용하는 것은 width, border, bordercolor, bgcolor, align, cellpadding 등이다. 대부분 비슷할 것이다. 문서에 table 태그가 하나만 있을 땐 상관없지만, 같은 스타일의 표 여러 개를 사용한다면 같은 속성을 반복해서 지정해야 한다. 이때 자주 사용하는 속성을 스타일로 지정하면 HTML 문서를 간단하게 만들 수 있다.

table 태그 속성	같은 효과의 스타일 속성 및 적용 방법	스타일 적용 예
width	width: 길이(px, % 등)	table{width: 60%}
border, bordercolor	border: 두께 형태(solid, double, dotted, dashed 등) 색	table, th, td{border:1px solid #ccc}
bgcolor	background: 배경색 url('배경 그림 주소') 반복 고정 위치	table{background:#f7f7f7}
align	margin:0 auto (width 값이 지정됐을 때만 적용됨)	table{margin:0 auto}
cellpadding	padding: 길이(px, % 등)	td{padding:10px}

 위 표는 내가 자주 사용하는 속성을 스타일로 구현한 것이다. 이것뿐 아니라 모든 table 태그의 속성은 스타일로 구현할 수 있다. 스타일을 적용해서 실제로 표를 만들어보자.

<예제 2>

태그 및 스타일 소스
<style type="text/css"> /*<![CDATA[*/ table.t_ex2 {background:#E2F2D3; width:90%; margin:0 auto; text-align:right} .t_ex2 td, .t_ex2 th {border:1px solid #33904E;padding:10px} .t_ex2 th {background:#8FC147; color:#fff; text-align:center} table.t_ex2 .c1 {text-align:center} table.t_ex2 .c2 {text-align:left} /*]]>*/ </style> <table class="t_ex2"> <tr><th class="c1">날짜</th><th>내용</th><th>수입</th><th>지출</th><th>합계</th></tr> <tr><td class="c1">4/5</td><td class="c2">차비</td><td></td><td>3,000원</td><td>37,000원</td></tr> <tr><td class="c1">4/5</td><td class="c2">육회 비빔밥</td><td></td><td>8,000원</td><td>29,000원</td></tr> <tr><td class="c1">4/5</td><td class="c2">나무 심기 묘종</td><td></td><td>5,000원</td><td>24,000원</td></tr> <tr><td class="c1">4/5</td><td class="c2">복권 구매 및 당첨</td><td>30,000원</td><td>2,000원</td><td>52,000원</td></tr> </table>
적용 결과
날짜 내용 수입 지출 합계 4/5 차비 3,000원 37,000원 4/5 육회 비빔밥 8,000원 29,000원 4/5 나무 심기 묘종 5,000원 24,000원 4/5 복권 구매 및 당첨 30,000원 2,000원 52,000원

 스타일 지정을 먼저 살펴보자. 첫째 줄은 table 스타일에 background, width, margin:0 auto, text-align 속성을 지정한 것이다. 표 전체의 배경 및 너비, 가운데 정렬, 글자 오른쪽 정렬 속성이다. (text-align은 p, table, div 등 block 속성을 가진 요소의 글자 정렬 상태를 지정하는 속성이다.) 둘째 줄은 table, th, td에 테두리를 적용했다. table 태그의 border 속성은 표의 각 셀에 적용되지만, 스타일로 border를 지정하면 선택자로 정의한 요소에만 외곽선이 적용된다. 예를 들어 table{border:3px double #ccc}라고 지정하면 표 전체 외곽선 하나만 표시되고 각 셀은 테두리 없이 표시된다. 표의 각 셀 테두리를 표시하려면 td 요소에 border를 지정한다. 표의 각 항목 제목으로 th를 사용했다면 th, td {border: 1px dashed #000}처럼 지정하면 된다. 만약 border-collapse: separate로 지정된 표가 있으면 table 요소에도 border를 지정해야 표 전체에 외곽선이 표시된다.

 셋째 줄은 cellpadding 대신 td와 th에 각각 padding 스타일을 적용해서 각 셀 테두리와 셀 내용 간격을 지정했다. 넷째 줄은 제목을 표시하는 th에 개별 속성을 지정한 부분이다. 셀 배경색을 좀 더 진하게 설정하고 글자 색을 바꾸고 글자 정렬 상태를 가운데 정렬로 지정했다. 다섯째와 여섯째 줄은 글자 정렬 상태를 바꾸기 위해 추가한 부분이다. 날짜와 내용 줄에 class를 지정해서 각각 가운데 정렬, 왼쪽 정렬을 지정했다. (HTML 태그의 col, colgroup 속성을 사용하면 표의 각 열(column) 글자 정렬 상태를 지정할 수 있지만, 모든 웹브라우저에서 지원하는 속성이 아니므로 위 예제처럼 class를 지정하고 CSS에 text-align 속성을 사용하는 것이 좋다.)

 표 자체엔 class만 지정했다. 전체 표를 구분 짓는 t_ex2, 날짜와 내용의 글자 정렬을 지정하기 위한 c1, c2 class를 제외하면 어떤 table 태그의 속성도 사용하지 않았다. HTML 문서에 표를 여러 개 그리지 않아도 표 자체가 크다면 아무래도 태그를 반복해서 사용하게 된다. 그럴 때 위 예제처럼 스타일 적용으로 간단히 해결할 수 있다.

 table 태그에 HTML 속성 대신 스타일 속성을 지정했을 때 좋은 점 또 하나는 브라우저별로 결과물의 차이가 적다는 것이다. 예를 들어 table 태그에 bordercolor를 지정할 때 HEX 코드 색의 줄임꼴(#rrggbb 형태에서 #ff00cc처럼 rr과 gg와 bb 값이 각각 같을 때 #f0c처럼 #rgb 형태로 줄여 쓰는 것)을 사용하면 IE에선 검은색으로 표시된다. 그러나 스타일의 border 속성을 사용하면 그런 문제가 없다. Opera에서는 bordercolor를 #rrggbb 형태로 지정해도 인식되지 않을 때가 있다. 이때 역시 스타일로 지정하면 문제없이 표시된다. 각 웹브라우저에서 지원하는 CSS 종류에 차이가 있긴 하지만, 2에서 이야기한 스타일은 IE, FF, Opera, Chrome, Safari 모두에서 지원하므로 사용하는 웹브라우저에 상관없이 일관된 결과를 얻을 수 있다.

* 다음 글 보기
- 블로그에 유용한 태그 7 - CSS로 표 (table 태그) 꾸미기