html5：table表格与页⾯布局整理传统表格布局之table标签排版总结：
默认样式：
<style>
table {
max-width: 800px;
border-spacing: 2px;
border-collapse: initial;
display: table;
html表格元素}
table td {
padding: 10px;
min-width: 50px;
box-sizing: border-box;
}
</style>
1. 基本表格（双线表格）
table标签内添加border属性：border="1"，value值不带单位
aa11
bb22
代码如下：
<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. ⽆边框表格
aa11
bb22
代码如下：
<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. 单线表格
aa11
bb22
代码如下：
<table border="1" width="100%" >      <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:⾏合并数⽬aa1 bb2
cc33
aa colspan: 列合并数⽬(特定长度的单元格，不会删除后
⾯的单元格）
1
bb222代码如下：
<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 234
表体2：tbody 注：tbody如果不写，浏览器⾥也会⾃动⽣
成
1
234注脚: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 >表体1：tbody</td><td >注：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
catD1catD2 catD3catD4
代码如下：
<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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。