테이블(table) 안쪽 여백(padding)과 가운데 정렬하기

오랜만에 스타일 팁 올립니다.


어떤 분이 테이블 안쪽 여백과 테이블 가운데 정렬 방법을 물으셨어요.


테이블(table) 태그는 기본 속성(attribute)을 몇개 갖고 있습니다.


글자 영렬(align), 테두리 모양(border), 배경색(bgcolor), 폭(width)...


전자책 만들 때 이런 속성은 사용하지 마세요!!!!!


태그 기본 속성을 사용해도 별 문제는 없습니다. 그런데 W3C에서도, IDPF에서도 스타일 편집은 CSS로, 그것도 외부 CSS로 하도록 하는 추세입니다. 


만들어 놓은거라 써도 상관은 없는데 앞으로는 이런거 전부 없앨거야~


그래서 이런 속성들 대부분은 HTML5에서 지원을 하지 않습니다.


그럼 이런건 어떻게 해야할까요? 

아래 표를 보세요. 위쪽 표는 테두리 색과 border-collapse 만 적용했습니다. 확인이 편하게 하려고 적용한 속성이고 이 두 속성을 제외하면 아무 스타일도 적용하지 않았을 때 테이블이 이런 모습으로 보여요.


이런 테이블을 아래쪽 표처럼 안쪽 여백을 주고, 테이블 자체를 가운데 정렬하려면 어떻게 해야할까요?

 


안쪽 여백이니 padding,가운데 정렬이니 text-align : center;를 주면 되겠지요?

그런데 이게 안먹힙니다.


여기서 2가지 문제가 생겨요. padding을 어디에 줘야 하는지, 그리고 text-align으로 가운데 정렬이 되지 않을 때 어떻게 가운데 정렬을 하는지.


먼저 스타일 코드를 보세요.


table, tr, td {

border : 1px solid #FF0000;

border-collapse: collapse;

}


.cell_padding {

padding : 1em;

}


.table_center {

display : table;

margin-left : auto;

margin-right : auto;

}


<table class="table_center">

<tbody>

<tr>

<td class="cell_padding">

안쪽 여백, 테이블 가운데 정렬

</td>

<td class="cell_padding">

안쪽 여백, 테이블 가운데 정렬

</td>

</tr>

<tr>

<td class="cell_padding">

안쪽 여백, 테이블 가운데 정렬

</td>

<td class="cell_padding">

안쪽 여백, 테이블 가운데 정렬

</td>

</tr>

</tbody>

</table>


1. padding은 셀(td)에 적용한다.


테이블에서 글자가 들어가는 곳은 tr 태그 안쪽입니다. table, td는 테이블의 구조를 만드는 태그고, td가 텍스트가 들어가는 셀을 만드는 태그예요. 그러니 텍스트가 들어가는 셀에 여백을 주고 싶다면 td 태그에 스타일을 적용해야겠지요.


2. 테이블을 가운데 정렬하기


테이블이나 div같은 상자를 가운데정렬 할때는 text-align 속성이 제대로 적용되지 않습니다.

적용할 방법이 없는건 아닌데 그럼 코드가 복잡해져요.

이럴 때 margin-left : auto; margin-right : auto;를 사용해 보세요.


div 박스일때는 display : table; 혹은 display : box; 속성도 같이 지정해야 합니다.

여기서는 display :table;이 없어도 되지만, 확실히 해주기 위해 추가했어요.


끝으로... 테이블을 오른쪽 정렬 하고싶다면?

.table_center {

display : table;

margin-left : auto;

}


이렇게 스타일을 바꿔보세요. 그럼 가운데 있던 테이블으 오른쪽으로 정렬됩니다.





설정

트랙백

댓글


티스토리 툴바