div로 table 만들기

table 요소를 div로 구현해 보자.

table 요소를 div의 class 속성 중 display 값으로 지정해 줍니다.

 

table 요소      /     div display값

<table>         /     table

<tbody>        /     table-row-group

<thead>        /     table-header-group

<tfoot>         /     table-footer-group

<caption>     /     table-caption

<tr>              /      table-row

<td>, <th>    /     table-cell

<colgroup>   /     table-column-group

<col>            /     table-column

 

IE의 경우 8 이상에서 지원합니다.

 

예를 들자면 아래와 같이 적용합니다.

 

<div class="divTable"> // <table>

<div class="divTableBody"> // <tbody>

<div class="divTableRow"> // <tr>

<div class="divTableCell"></div> // <td></td>

<div class="divTableCell"></div> // <td></td>

</div> // </tr>

<div class="divTableRow"> // <tr>

<div class="divTableCell"></div> // <td></td>

<div class="divTableCell"></div> // <td></td>

</div> // </tr>

</div> // </tbody>

</div> // </table>

 

CSS는 다음과 같이 적용됩니다.

 

.divTable {display:table}

.divTableBody {display:table-row-group}

.divTableRow {display:table-row}

.divTableCell {display:table-cell}

 

흠.. 아직 모르는 게 많아서 그런지 colspan과 rowspan은 div로 구현하는 것이 어렵네요.