display:table 속성

display:table 는 웹표준에 맞춰 작업 할 시 div를 쓰게 되는데 간혹 table의 속성을 필요로 할때가 있다. 이때 쓰게 되면 유용하게 쓰일수 있다.

특히, table에서 쓰이는 style를 적용 시킬수 있다.

속성표

display

속성

table:

table-caption: 테이블 캡션으로 표시됨

table-cell: 테이블의 셀 영역을 표시

table-column: 테이블의 열 영역을 표시

table-column-group: 테이블의 열 그룹 영역 표시

table-row: 테이블의 행 영역을 표시

table-row-group: 테이블의 행 그룹 영역 표시

table-header-group: 테이블의 머리글 행 그룹 표시

table-footer-group: 테이블의 바닥글 행 그룹 표시

쓰는 방법

<div style="display:table">

  <div style="display:table-row">

    <div style="display:table-cell">1-1</div>

    <div style="display:table-cell">2-1</div>

    <div style="display:table-cell">3-1</div>

  </div>

  <div style="display:table-row">

    <div style="display:table-cell">1-2</div>

    <div style="display:table-cell">2-2</div>

    <div style="display:table-cell">3-2</div>

  </div>

</div>

위와 같이 하게 되면 2행 3열의 표가 나온다.