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