[CSS] Table의 cellpadding, cellspacing, border 속성 style로 정의하기

HyungJin

10년 ago

옛날 우리는 Table을 이용해 레이아웃을 짜던 시절.. 거의 외우다 시피한 속성들이 있었죠. cellpadding, cellspacing, border..

일명 DIV 코딩이라 불리우는 div 레이아웃을 사용하는 이 시점에서도 Table을 레이아웃으로 사용하지 않는다 뿐이지 아직도 Table은 유용한 녀석입니다.

하지만 예전같이 Table 태그라인 안에 속성을 박아넣고 W3C 검증을 받으면 Warning 메세지를 볼 수 있습니다. 즉, 형태를 꾸며주는 태그 속성대신 css를 이용하는 것을 권장하는 겁니다.

<table cellpadding="0" cellspacing="0" border="1">

이 것이 과거에 우리가 즐겨 사용하던 방법입니다. 거의 기계적으로 혹은 반사적으로 cellpadding과 cellspacing 그리고 border를 속성으로 지정해주곤 했습니다.

그럼 이걸 어떻게 css로 정의할 수 있을까요..

<table style="border-spacing:0px; border="1px solid #000;">
   <tr>
      <td style="padding:0px;"></td>
   </tr>
</table>

이런식으로 정의할 수 있겠습니다. 하지만 저렇게 style을 인라인으로 입력하는 경우는 드믈죠.

다시 정리해보겠습니다.

<style type="text/css">
.my_table {border-spacing:0px; border:1px solid #000;}
.my_table td {padding:0px;}
</style>

<table class="my_table">
   <tr>
      <td></td>
   </tr>
</table>

정리를 하면 이렇습니다. cellpadding은 td의 padding css 속성이, cellspacing은 table의 border-spacing css 속성이, border는 table의 border css 속성이 대신 역할을 하게 됩니다.

Share Content