table을 좀더 예쁘게, border-collapse 속성

블로그에서 포스팅을 할 때 가끔씩 표를 삽입 해야될 때가 있다.

일반적인 HTML 태그인 TABLE 태그를 이용해서 표를 만들지만, 이렇게 만들경우 표의 모양이 그렇게 이쁘진 않다. 더군다나, 표에 테두리 색깔이나 음영같은 효과를 줄수가 없는데, 간단한 CSS를 추가하면 원하는 모양의 표를 만들수 있다.

우선, <table> 태그만을 가지고 표를 만들경우 아래와 같은 모습이 된다.

일반적인 table

위의 모양을 보면, 셀과 셀사이에 선이 굵어 그렇게 이쁘게 보이진 않는다. 이 테이블에 border-collapse:collapse 속성을 추가하면, 테이블 셀간의 간격을 합쳐서 표시하기 때문에 모양이 좋아진다.

테이블 속성에 아래와 같은 CSS를 추가해보자. 선의 굵기가 1px인 검정색 셀 테두리가 합쳐서 표시가 되게 된다.

<table style="border-collapse:collapse; border: 1px solid #000000;">

border-collapse:collapse

모양이 조금 좋아졌다. 하지만, 셀 사이에 선들이 없어졌기 때문에 내용을 구분을 하기가 힘들다. 이렇게 테이블에 border-collapse 속성을 추가하게 되면, 각 셀마다 선을 추가하는 CSS를 삽입해 주어야 한다. 각 셀마다 아래의 CSS를 추가해 준다.

<td style="border: 1px solid #000000;">백두산</td>

border: 1px solid #000000

내용을 구분하기가 훨씬 쉬워졌고 table의 모양도 보기좋아졌다. 이 상태에서 테이블의 상단 셀에 색깔을 넣어주면, 훨씬 더 모양이 좋아진다.

<td style="border: 1px solid #000000; background-color: #f4a460">산</td>

background-color: #f4a460

테이블 상단셀에 색깔을 삽입함으로써 구분도 좋아지고, 좀더 보기좋은 테이블이 되었다.

전체적인 HTML 코드는 아래와 같다.

<table style="border-collapse:collapse; border: 1px solid #000000;">
   <tr>
      <td style="border: 1px solid #000000; background-color: #f4a460">산</td>
      <td style="border: 1px solid #000000; background-color: #f4a460">높이</td>
   </tr>
   <tr>
       <td style="border: 1px solid #000000;">백두산</td>
       <td style="border: 1px solid #000000;">2,744 m</td>
   </tr>
   <tr>
        <td style="border: 1px solid #000000;">한라산</td>
        <td style="border: 1px solid #000000;">1,950 m</td>
    </tr>
</table>

CSS는 HTML 상단에 먼저 선언을 해주어서 사용을 하는 것이 가장 좋지만, 블로그처럼 하나하나 포스팅을 작성해야 하는 경우는 위와 같은 방법으로, HTML 태그에 직접 선언해서 사용하는 방법이 가장 사용 하기가 쉽다.