[CSS] display:table / 테이블만들기

display:table 기본속성

◈ table: 표를 생성

◈ inline-table : html에서의 table

◈ table-row: 행(tr)

◈ table-row-group: 행(tbody)

◈ table-header-group: 행(thead)

◈ table-footer-group: 행(tfoot)

◈ table-column: 열(col)

◈ table-column-group: 열(colgroup)

◈ table-cell: 셀(td)

◈ table-caption: 제목

TABLE 기본구조

하얀색테이블초록색칸

해당 구조를 만들기 위해서는

<div style="display:table">

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

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

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

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

</div>

</div>

이런 구조가 필요한데, 이때

◈ display:table 테이블

◈ display:table-row 은 테이블 줄

◈ display:table-cell 은 테이블 칸을 나타낸다

위아래 정렬

top / middle / bottom

vertical-align 으로 지정해주며, line-height와는 달리 엔터를 쳐도 중앙에서 정렬이된다.

Vertical-align (세로정렬)

◈ top (맨위) / middle (중앙) / bottm (아래)

해당 값은 칸 (table-cell)에

TABLE-LAYOUT:FIXED (테이블 넓이 고정)

(1) 이렇게 게시판 형식을 만들 때도 사용이 가능한데. 게시판에서 제목 줄에 숨기기 기능을 전혀 넣지 않으면 높이가 각양 각색이 된다.

...white-space: text-overflow:ellipsis;유동적이지 않게 고정

(3) table 칸에다가 table-layout:fixed 를 쓰고 , cell (칸) 에다가 white-space: text-overflow:ellipsis; 를 사용하면 위와같이 잘 잘린다