[CSS 입문] 표 스타일 속성

1. caption-side 속성 - 표 제목 위치 정하기

caption-side: top | bottom

2. border 속성 - 표 테두리 스타일 정하기

CSS를 이용해 테두리를 표시할 때는 표의 바깥 테두리와 셀의 테두리를 따로 지정해야 합니다.

<style>

            body{

                font-family:"맑은 고딕", "고딕", "굴림";

            }

            .table1 {

                border:1px solid black;

            }

            .table1 td {

                border:1px dotted black;

                padding:10px;

                text-align:center;

            }

</style>

3. border-collapse 속성 - 테두리 통합, 분리하기

border-collapse: collapse | separate;

<table> 태그와 <td> 태그에서 border 속성을 사용하면 두 줄로 표시되는데 이때 border-collapse 속성을 사용하면 표의 바깥 테두리와 셀의 각 테두리가 떨어져 있는 것을 그대로 둘 것인지, 두 테두리를 하나로 합칠 것인지를 결정할 수 있습니다.

4. border-spacing 속성 - 인접한 셀 테두리 사이 거리 지정하기

border-spacing: <크기>;

border-collapse: separate를 사용해 셀들을 분리했을 경우, 인접한 셀 테두리 사이의 거리를 지정합니다.

5. empty-cells 속성 - 빈 셀의 표시 여부 지정하기

empty-cells: show | hide;

6. width, height 속성 - 표 너비와 높이 지정하기

width: <크기>;

height: <크기>;

7. table-layout 속성 - 콘텐츠에 맞게 셀 너비 지정하기

속성 값	설명
fixed	셀 너비를 고정한다. 셀 내용에 따라 셀의 너비가 달라지지 않는다.
auto	셀 내용에 따라 셀의 너비가 달라진다. 기본 값.

8. text-align 속성 - 셀 안에서 수평 정령하기

text-align: left | right | center;

9. vertical-align 속성 - 셀 안에서 수직 정렬하기

vertical-align: top | bottom | middle;

<출처> Do it! HTML5+CSS3 웹 표준의 정석