html5: table表格與頁面佈局整理
阿新 • • 發佈:2019-01-12
傳統表格佈局之table標籤排版總結:
預設樣式:
程式碼如下:
<style> table { max-width: 800px; border-spacing: 2px; border-collapse: initial; } table td { padding: 10px; min-width: 50px; box-sizing: border-box; } </style>
1. 基本表格(雙線表格)
table標籤內新增border屬性:border="1",value值不帶單位aa | 1 | 1 |
bb | 2 | 2 |
<table border="1" width="100%"> <tbody> <tr> <td>aa</td><td>1</td><td>1</td> </tr> <tr> <td>bb</td><td>2</td><td>2</td> </tr> </tbody> </table>
2. 無邊框表格
aa | 1 | 1 |
bb | 2 | 2 |
程式碼如下:
<table width="100%"> <tbody> <tr> <td>aa</td><td>1</td><td>1</td> </tr> <tr> <td>bb</td><td>2</td><td>2</td> </tr> </tbody> </table>
3. 單線表格
aa | 1 | 1 |
bb | 2 | 2 |
程式碼如下:
<table border="1" width="100%" style="border-collapse: collapse;"> <thead></thead> <tbody> <tr> <td>aa</td><td>1</td><td>1</td> </tr> <tr> <td>bb</td><td>2</td><td>2</td> </tr> </tbody> </table>
4. 合併多列表格
rowspan: 行合併數目 |
aa | 1 |
bb | 2 | |
cc | 3 | 3 |
aa | colspan: 列合併數目(特定長度的單元格,不會刪除後面的單元格) | 1 | |
bb | 2 | 2 | 2 |
程式碼如下:
<table border="1" width="100%"> <tbody> <tr> <td rowspan="2" width="100px">rowspan:<br />行合併數目</td><td>aa</td><td>1</td> </tr> <tr> <td>bb</td><td>2</td> </tr> <tr> <td>cc</td><td>3</td><td>3</td> </tr> </tbody> </table> <table border="1" width="100%"> <tbody> <tr> <td>aa</td><td colspan="2">colspan: 列合併數目(特定長度的單元格,不會刪除後面的單元格)</td><td>1</td> </tr> <tr> <td>bb</td><td width="200px">2</td><td width="200px">2</td><td>2</td> </tr> </tbody> </table>
5. 涵蓋所有table標籤表格
表體1:tbody | 注:tbody可以有多個 | 1 |
2 | 3 | 4 |
表體2:tbody | 注:tbody如果不寫,瀏覽器裡也會自動生成 | 1 |
2 | 3 | 4 |
註腳:tfoot | - | - |
程式碼如下:
<table border="1" width="100%">
<caption>表格標題:caption標籤<br /><br /></caption>
<thead> <th>表頭thead</th><th>th1</th><th>th2</th> </thead>
<tbody> <tr> <td style="width: 33%">表體1:tbody</td><td style="width: 33%">注:tbody可以有多個</td><td>1</td> </tr> <tr> <td>2</td><td>3</td><td>4</td> </tr> </tbody>
<tbody> <tr> <td>表體2:tbody</td><td>注:tbody如果不寫,瀏覽器裡也會自動生成</td><td>1</td> </tr> <tr> <td>2</td><td>3</td><td>4</td> </tr> </tbody>
<tfoot> <tr> <td>註腳:tfoot</td><td>-</td><td>-</td> </tr> </tfoot>
</table>
6. 表格例項
公司名稱 | xxx有限公司 | |||
證件型別 | 身份證 | |||
身份證 | 10011***123 | |||
資訊 | catA | br: br: |
||
catB | ||||
catC | ||||
catD1 | catD2 | |||
catD3 | catD4 |
程式碼如下:
<table border="1" width="100%"> <thead></thead> <tbody> <tr> <td>公司名稱</td><td colspan="4">xxx有限公司</td> </tr> <tr> <td>證件型別</td><td colspan="4">身份證</td> </tr> <tr> <td>身份證</td><td colspan="4">10011***123</td> </tr> <tr> <td rowspan="5">資訊</td><td class="label">catA</td><td colspan="3">br:<br />br:<br /></td> </tr> <tr> <td>catB</td><td colspan="3"></td> </tr> <tr> <td>catC</td><td colspan="3"></td> </tr> <tr> <td>catD1</td><td></td><td class="label">catD2</td><td></td> </tr> <tr> <td>catD3</td><td></td><td class="label">catD4</td><td></td> </tr> </tbody> </table>