传统表格布局之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值不带单位
代码如下：
<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. 无边框表格
代码如下：
???<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. 单线表格
代码如下：
???<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标签表格
表格标题：caption标签
?| 表体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表格与页面布局整理
原文地址：https://www.cnblogs.com/ziChin/p/10165946.html