table 테이블 관련 태그 및 속성

1. table의 구성요소

- table 요소의 구성: thead / tbody / tfoot

- table cell: th / td

- table row: tr 셀들로 이루어진 행을 정의할 때 사용한다.

 

2. table의 CSS 기본값(고유 속성값)

table {

  display: table;

  border-collapse: separate;

  border-spacing: 2px;

  border-color: gray;

}

tr {

  display: table-row;

  vertical-align: inherit;

  border-color: inherit;

}

th {

  display: table-cell;

  vertical-align: inherit;

  font-weight: bold;

  text-align: center;

}

td {

  display: table-cell;

  vertical-align: inherit;

}

 

3. CSS를 이용한 테이블 레이아웃

HTML table 요소(태그)가 아닌 다른 요소(태그)를 사용, 그 요소에 display 값을 table속성으로 사용할 수 있다.

(예, div 또는 ul & li)

- <table></table> = display: table;

- <tr></tr> = display: table-row;

- <th></th> = display: table-cell;

- <td><td/> = display: table-cell;

 

4. 테이블의 주요 style 설정

- table - layout ( <col style="width:  px"> 또는 너비를 px단위로 지정할 경우 반드시 table에 table-layout: fixed"를 넣어라!

- border-collapse & border-spacing

- vertical-align

- white-spacae / word-break / text-align

- width / height

- colspan / rowspan (병합)

 

<table>

    <thead> Table head

        <tr> Table Row 

            <th></th> header cell

            <th></th>

            <th></th>

        </tr>

    </thead>

    <tbody> Table body

        <tr>

            <td></td> data cell

            <td></td>

            <td></td>

        </tr>

    </tbody>

    <tfoot> Table foot

        <tr>

            <td></td>

            <td></td>

            <td></td>

        </tr>

    </tfoot>

</table>

 

※ 테이블 가로/세로 스크롤 만들 때!!!

colgroup과 col의 너비값이 지정되어 있어야 한다.

 

테이블관련 상황#1 (table / table-cell / table-layout: fixed) https://www.biew.co.kr/entry/%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94%EA%B0%80-%EC%95%8C%EA%B3%A0%EC%9E%88%EC%96%B4%EC%95%BC-%ED%95%A0-display-table-%EC%86%8D%EC%84%B1