使用 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>標籤。