使用 Div 與 Css 繪製 Html Table

表格 是網頁排版中常見的資料顯示方式，一般我們都是直接用 Html 提供的 <table>、<tr>、<td> 等等…，來進行開發與製作，在這裡來介紹如何使用 div 與 css 取代原本 <table> 標籤進行製作：

<table> 與 <div> + css 比較 ：

Demo <table>：

<table>
    <tr>
        <td>標題</td>
        <td>內容</td>
    </tr>
    <tr>
        <td>文章標題</td>
        <td>文章內容</td>
    </tr>
</table>

Demo <div> + css ：

<div id="css_table">
    <div class="css_tr">
        <div class="css_td">標題</div>
        <div class="css_td">回應</div>
    </div>
    <div class="css_tr">
        <div class="css_td">文章標題</div>
        <div class="css_td">文章內容</div>
    </div>
</div>

<style>
  #css_table {
      display:table;
  }
  .css_tr {
    display: table-row;
  }
  .css_td {
    display: table-cell;
  }
</style>

Css 屬性對照

inline-table：顯示成前後沒有換行的表格
table：對應<table>標籤，以表格方式顯示。
table-row：對應<tr>標籤。
table-row-group：對應<tbody>標籤。
table-cell：對應<td>標籤。
table-caption：對應<caption>標籤。
table-column：對應<col>標籤
table-column-group：對應<colgroup>標籤。
table-header-group：對應<theader>標籤。
table-footer-group：對應<tfooter>標籤。