CSS 테이블

    2018-03-20 14:11:28 작성

    테이블

    테이블 관련 CSS 속성
    속성 설명
    table-layout 셀안의 내용 크기에 따른 셀의 크기 변화를 지정합니다.
    border-collapse 각 셀의 테두리를 하나로 합칠지 여부를 지정합니다.
    border-spacing 셀 사이이의 간격을 지정합니다.
    empty-cells 빈 셀의 테두리와 배경의 표시 여부를 지정합니다.
    caption-side caption의 위치를 지정합니다.


    table-layout

    table-layout: auto|fixed|initial|inherit;

    셀안의 내용 크기에 따른 셀의 크기 변화를 지정합니다.

    auto 기본값, 셀의 폭이 내용의 크기에 따라 결정됨
    fixed 셀의 내용의 크기와 관계없이 셀의 폭에 의해 결정됨


    border-collapse

    border-collapse: separate|collapse|initial|inherit;

    각 셀의 테두리를 하나로 합칠지 여부를 지정합니다.

    separate 기본값, 각 셀의 테두리를 간격을 두고 표시
    collapse 셀의 각셀의 테두리를 겹쳐서 표시
    border-spacing 과 empty-cells 속성은 무시됨


    border-spacing

    border-spacing: length|initial|inherit;

    셀은 margin이 없으며 border-spacing 속성으로 셀 사이이의 간격을 지정합니다.
    이 속성은 border-collapse: collapse; 이면 효과가 없습니다.


    empty-cells

    empty-cells: show|hide|initial|inherit;

    빈 셀의 테두리와 배경의 표시 여부를 지정합니다.
    이 속성은 border-collapse: collapse; 이면 효과가 없습니다.

    show 기본값, 테두리와 배경 표시
    hide 셀의 내용이 없으면 테두리와 배경 표시하지 않음


    caption-side

    caption-side: top|bottom|initial|inherit;

    caption의 위치를 지정합니다.

    top 기본값, 표 상단에 caption 표시
    bottom 표 하단에 caption 표시