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열의 표가 나온다.
css 속기법 (0) | 2013.05.19 |
---|---|
css 선택자 (0) | 2013.05.02 |
div height 100% (0) | 2013.02.04 |
배경이미지 css (0) | 2012.12.25 |
css 반사효과 만들기 (0) | 2012.11.22 |
댓글 영역