html5: 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>
html5: table表格与页面布局整理的更多相关文章
- html5 移动端单页面布局
序 移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面 今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都是 ...
- 页面布局整理(基于scss)
页面开发步骤: 1.全局reset.设置基础背景色.设置基础字体样式 2.全局布局页面结构,meta 标签引入 3.按钮等相同的样式,用scss提前写好一份公用,渐变等 border-radius b ...
- HTML——使用表格进行页面布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 九九乘法表,全js编写,放入table表格带入页面渲染出来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html5常用标签table表格布局
html5常用标签table表格布局 一.总结 一句话总结: 二.html5常用标签table表格布局 用表格显示信息调理清楚,使浏览者一目了然.表格在网页中还有协助布局的作用,可以把文字.图像等组织 ...
- html页面布局之table布局:
table布局: table来做整体页面的布局,布局技巧归纳如下: (1)按照设计图的尺寸设置表格的宽高以及单元格的宽高 (2)将表格的border.cellpadding.cellspacing全部 ...
- HTML5/CSS3 第三章页面布局
页面布局 1 页面组成 2 布局相关的标签 <div></div> 定义文档中的分区或节 <span></span> 这是一个行内元素,没有任何意义 & ...
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
- HTML5新结构标签和移动端页面布局
--------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.ar ...
随机推荐
- Linux 中设置 MySQL 字符集为 UTF-8
(1)查看 MySQL 字符集 登录 mysql:mysql -u root -p 查询 mysql 字符集:mysql> show variables like 'chara%'; 说明:将 ...
- vue-cli项目结构分析
总体框架 一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关文件,了解一下即可. 文件结构细分 1.build——[webpack配置] bui ...
- java--删除链表偶数节点
public class ListNode { int data;//当前节点的值 ListNode next = null;//是指向下一个节点的指针/引用 public ListNode(int ...
- jdk版本特性
https://segmentfault.com/a/1190000004419611 java5 泛型 枚举 装箱拆箱 变长参数 注解 foreach循环 静态导入 格式化 线程框架/数据结构 Ar ...
- ModelMap org.springframework.ui.ModelMap
ModelMap实现了map接口,可以在其中存放属性,作用域同request,同时可与@SessionAttributes联合使用,把数据放入到session中去, 下面这个示例,我们可以在Model ...
- 九度oj 题目1049:字符串去特定字符
题目1049:字符串去特定字符 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:10173 解决:4611 题目描述: 输入字符串s和字符c,要求去掉s中所有的c字符,并输出结果. 输入: ...
- [luoguP2915] [USACO08NOV]奶牛混合起来Mixed Up Cows(DP)
传送门 f[i][S] 表示当前集合为 S,最后一个数为 i 的最优解 f[i][S] += f[j][S - i] (j, i ∈ S && j != i && ab ...
- B树、B-树、B+树、B*树介绍,和B+树更适合做文件索引的原因
今天看数据库,书中提到:由于索引是采用 B 树结构存储的,所以对应的索引项并不会被删除,经过一段时间的增删改操作后,数据库中就会出现大量的存储碎片, 这和磁盘碎片.内存碎片产生原理是类似的,这些存储碎 ...
- WCF 配置文件中的MaxStringContentLength & MaxReceivedMessageSize
中午测试员在测试系统模块时发现无法通过WCF从服务器下载数据,检查配置文件后,建议开发人员修改站点的WEB.CONFIG文件,具体修改对比如下: 旧的: <binding name=" ...
- Oracle Multitenant Environment (一) About
About oracle mulittenant environment The multitenant architecture enables an Oracle database to func ...