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

2011. 4. 7. 02:40IT/Tistory Tips


 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 태그 속성같은 효과의 스타일 속성 및 적용 방법스타일 적용 예
widthwidth: 길이(px, % 등) table{width: 60%}
border, bordercolorborder: 두께 형태(solid, double, dotted, dashed 등) 색table, th, td{border:1px solid #ccc}
bgcolorbackground: 배경색 url('배경 그림 주소') 반복 고정 위치table{background:#f7f7f7}
alignmargin:0 auto (width 값이 지정됐을 때만 적용됨)table{margin:0 auto}
cellpaddingpadding: 길이(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 모두에서 지원하므로 사용하는 웹브라우저에 상관없이 일관된 결과를 얻을 수 있다.


  • 프로필사진
    커스라이프2011.04.14 04:50

    css로 테이블 태그 작업하기에 어려움이 많았었는데, 아주 도움이 많이 되었습니다.

  • 프로필사진
    알 수 없는 사용자2011.08.16 21:11

    잘 읽었슴다. 이 댓글 난에 댓글 남겨주세요 글은 어떻게 넣는 건지 궁금해요. 스킨 디자인 예뻐요.

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.08.19 19:33 신고

      해당하는 input 요소에 HTML5의 placeholder 속성으로 지정합니다.

      <textarea 내용입력 placeholder="댓글을 남겨주세요~"></textarea>

      이런 식으로 HTML 입력하면 적용됩니다. IE8 이하는 placeholder를 지원하지 않아서 jQuery 플러그인을 사용했구요.

      여러가지 있지만, 전 http://www.iliadraznin.com/2011/02/jquery-placeholder-plugin/
      여기에 있는 걸 사용했습니다.
      한번 해보고 안되시면 댓글 남겨주세요~

  • 프로필사진
    알 수 없는 사용자2011.08.19 20:18

    전 구글크롬이고, 넘 어려워보여요. ..^^ 완전 전문가네요. 흐헉....

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.08.20 02:02 신고

      안녕하세요^^ HTML과 CSS 다룬 블로그나 사이트 돌아다니면서 몇 번 해보면 금방 배우실꺼에요~
      크롬 쓰시는군요! 저도 크롬 사촌인 크롬 플러스 씁니다!!

  • 프로필사진
    알 수 없는 사용자2011.08.20 08:18

    완전 새로 짠 스킨인데요. 디자인 전문가시군요. 인터넷결재 안되는 거 빼고는 모든 면에서 크롬이 월등하다 생각합니다. ^^* 감사합니다^^

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.08.20 16:40 신고

      네, 저도 물건 살 때만 익스플로러 사용하고 나머진 크롬+만 씁니다.
      근데 가끔 스킨 만들거나 수정할 때 크롬 기준으로 하다보니 익스플로러에선 기대한 모습이 안나오더라구요.ㅠㅠ

      참, 혹시 스킨 만드실 계획이 있는데 HTML과 CSS를 잘 모르겠다 싶으시면 여기↓ 가 보세요.

      http://www.w3schools.com

      HTML 요소와 CSS 속성이 잘 정리되어 있어서 궁금한 내용 찾아볼 때 좋습니다^^