html5: table表格與頁面布局整理
阿新 • • 發佈：2019-01-12
initial 也會 strong 基本 max-width 涵蓋 padding 身份證 cap 傳統表格布局之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>
html5: table表格與頁面布局整理