freezner

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

옛날 우리는 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 속성이 대신 역할을 하게 됩니다.

Exit mobile version