html5: table表格与页面布局整理
2024-10-21 12:58:46
传统表格布局之table标签排版总结：
默认样式：
<style>
table {
max-width: 800px;
border-spacing: 2px;
border-collapse: initial;
display: table;
}
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></td><td></td>
</tr>
<tr>
<td>bb</td><td></td><td></td>
</tr>
</tbody>
</table>
2. 无边框表格
| aa | 1 | 1 |
| bb | 2 | 2 |
代码如下：
<table width="100%">
<tbody>
<tr>
<td>aa</td><td></td><td></td>
</tr>
<tr>
<td>bb</td><td></td><td></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></td><td></td>
</tr>
<tr>
<td>bb</td><td></td><td></td>
</tr>
</tbody>
</table>
4. 合并多列表格
| rowspan: 行合并数目 |
aa | 1 |
| bb | 2 | |
| cc | 3 | 3 |
| aa | colspan: 列合并数目(特定长度的单元格，不会删除后面的单元格） | 1 | |
| bb | 2 | 2 | 2 |
代码如下：
<table border="" width="100%">
<tbody>
<tr>
<td rowspan="2" width="100px">rowspan:<br />行合并数目</td><td>aa</td><td></td>
</tr>
<tr>
<td>bb</td><td></td>
</tr>
<tr>
<td>cc</td><td></td><td></td>
</tr>
</tbody>
</table> <table border="" width="100%">
<tbody>
<tr>
<td>aa</td><td colspan="2">colspan: 列合并数目(特定长度的单元格，不会删除后面的单元格）</td><td></td>
</tr>
<tr>
<td>bb</td><td width="200px"></td><td width="200px"></td><td></td>
</tr>
</tbody>
</table>
5. 涵盖所有table标签表格
| 表体1：tbody | 注：tbody可以有多个 | 1 |
| 2 | 3 | 4 |
| 表体2：tbody | 注：tbody如果不写，浏览器里也会自动生成 | 1 |
| 2 | 3 | 4 |
| 注脚:tfoot | - | - |
代码如下：
<table border="" 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></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>表体2：tbody</td><td>注：tbody如果不写，浏览器里也会自动生成</td><td></td>
</tr>
<tr>
<td></td><td></td><td></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="">xxx有限公司</td>
</tr>
<tr>
<td>证件类型</td><td colspan="">身份证</td>
</tr>
<tr>
<td>身份证</td><td colspan="">***</td>
</tr>
<tr>
<td rowspan="5">信息</td><td class="label">catA</td><td colspan="">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>
最新文章
- 闲聊——浅谈前端js模块化演变
- 3.用Redis Desktop Manager连接Redis
- ROW_NUMBER、RANK()、DENSE_RANK()和OVER的使用
- npm命令总结
- 20145316GDB调试汇编堆栈
- HDOJ 1596
- 利用Jmeter做接口测试
- spring定时器 @component
- html css 如何将表头固定（转）
- 深入浅出Ajax（四）
- 开涛spring3(6.5) - AOP 之 6.5 AspectJ切入点语法详解
- MySQL Database Command Line Client
- Xcode 7 你能不能再抗扎腾点儿呢 - 尤其自个儿强制升级后，没事儿就关闭
- linux下利用shell脚本实现添加crontab任务
- UE4网络同步属性笔记
- Pygal之世界地图绘制from pygal.i18n import COUNTRIES 报错的解决办法
- webstorm基础使用
- 项目初始化mysql建库和授权
- /debug/requests is already registered. You may have two independent copies of golang.org/x/net/trace in your binary, trying to maintain separate state. This may involve a vendored copy of golang.org/x
- chest