<table>标签总结（colspan跨列 ，rowspan跨行）
table标签有些内置属性要设置：
<table cellpadding="0" cellspacing="0" border="0" summary="各银行的网上银行支付限额总表">
1.摘要summary的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，
使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
2. cellpadding 规定单元格与其内容之间的空白
3.cellspacing 规定单元格之间的空白
4.border-collapse: collapse;去掉这些空白的属性,如果不设置table标签的这些属性值为0，可以直接在样式里面设置border-collapse: collapse;也可以去掉这些空白的！
综合实例1-合并四行，合并三列
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>各银行的网上银行支付限额总表</title>
<link href="//gsy.oss-cn-beijing.aliyuncs.com/css/global.css>" rel="stylesheet">
<style type="text/css">
table{width:1190px;font-size:15px;line-height:1.2;border-top:1px solid #a8a8a8;border-left:1px solid #a8a8a8;text-align: center;margin:57px auto;}
table caption{padding:26px 0;font-size: 26px;line-height: 1;color:#e63b3b;}
table td, table th{ border-right:1px solid #a8a8a8; border-bottom:1px solid #a8a8a8;height:20px;}
table th{background-color:#eeeeee;padding:8px 0;}
table td{font-size: 12px;line-height:26px;padding:4px 15px 4px 9px;}
.align-justy{text-align: justify;}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" summary="各银行的网上银行支付限额总表">
<caption align="top">各银行的网上银行支付限额总表</caption>
<tr>
<th width="89"></th>
<th width="80"></th>
<th width="156"></th>
<th width="300"></th>
<th width="109"></th>
<th width="130"></th>
<th width="130"></th>
<th></th>
</tr>
<!-- 合并四行则要写4个 tr ,第二第三第四个 tr 里面合并过了的列就不用再写了,如下是合并了四行的代码-->
<tr>
<th rowspan="4"></th>
<td rowspan="4"></td>
<td rowspan="4"></td>
<td rowspan="4" class="align-justy"></td>
<td rowspan="3"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th rowspan="3"></th>
<td rowspan="3"></td>
<td rowspan="3"></td>
<td rowspan="3" class="align-justy"></td>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th rowspan="3"></th>
<td rowspan="3"></td>
<td rowspan="3"></td>
<td rowspan="3" class="align-justy"></td>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="3"></td>
</tr>
</table>
</body>
</html>
综合实例2 - 综合应用colspan ,rowspan
<html>
<head>
</head>
<table border= "1 " width= "200 " >
<tr>
<td colspan="4" >ss
</td>
</tr>
<tr>
<td width= "25% "> </td>
<td width= "25% "> </td>
<td width= "25% "> </td>
<td width= "25% "> </td>
</tr>
<tr>
<td width= "25% "rowspan="2"> </td>
<td width= "25% "> </td>
<td width= "25% "> </td>
<td width= "25% "> </td>
</tr>
<tr>
<td width= "25% "> </td>
<td width= "25% " rowspan="3"> </td>
<td width= "25% "> </td>
</tr>
<tr>
<td width= "25% " colspan="2" > </td>
<td width= "25% "> </td> </tr>
<tr>
<td width= "25% "> </td>
<td width= "25% "> </td>
<td width= "25% "> </td>
</tr>
</table>
</html>
<table>标签总结（colspan跨列 ，rowspan跨行）的更多相关文章
- easyui DataGrid表体单元格跨列rowspan
最近做项目用到了jquery easyui,其中一组DataGrid做的报表是给客户大领导看的,客户要求报表样式跟他们原有系统的一模一样(如下图1). DataGrid样式好调,只是城市名称单元格跨行 ...
- display：table标签来自动改变列宽 改变的同时table的整体宽度跟随变化
发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...
- table中tr间距的设定table合并单元格 colspan（跨列）和rowspan（跨行）
table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...
- table合并单元格 colspan（跨列）和rowspan（跨行）
colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...
- HTML表格跨行、跨列操作(rowspan、colspan)
转自:https://blog.csdn.net/u012724595/article/details/79401401 一般使用<td>元素的colspan属性来实现单元格跨列操作,使用 ...
- colspan是跨列，rowspan是跨行
colspan是跨列,rowspan是跨行,可以看作是网页设计表格中的列和行的一个属性.跨列相当于把两列或者多列合并成一个单元格:跨行同理是把两行或者多行合并成一行:colspan和rowspan分别 ...
- Latex 表格（跨行、跨列、背景加灰）new
一. 效果如图 二.代码如下 1. 首部增加宏包: \usepackage{multirow} 2. 正文部分增加: \begin{table} \centering \caption{Suspici ...
- label、input、table标签
<label>标签 <form> <label for="male">Male</label> <input type=&qu ...
- ol,ul,dl,table标签的基本语法
ol,ul,dl,table标签的基本语法 有序列表: 无序列表: 自定义列表: <ol> <ul> < ...
随机推荐
- SpringMVC之文件上传异常处理
一般情况下,对上传的文件会进行大小的限制.如果超过指定大小时会抛出异常,一般会对异常进行捕获并友好的显示出来.以下用SpringMVC之文件上传进行完善. 首先配置CommonsMultipartRe ...
- SpringMVC教程4
SpringMVC教程3 一.数据回写 数据回写:在做数据更新的时候服务端查询的数据自动填充到表单中. 1.1默认方式 通过前面讲解的 Map Mode ModelMap绑定数据 @RequestMa ...
- Spark SQL结构化数据处理
Spark SQL是Spark框架的重要组成部分, 主要用于结构化数据处理和对Spark数据执行类SQL的查询. DataFrame是一个分布式的,按照命名列的形式组织的数据集合. 一张SQL数据表可 ...
- [AHOI2008] 紧急集合
Description 欢乐岛上有个非常好玩的游戏,叫做"紧急集合".在岛上分散有N个等待点,有N-1条道路连接着它们,每一条道路都连接某两个等待点,且通过这些道路可以走遍所有的等 ...
- Vue 动态加载组件
为什么要动态加载呢?而不是一次性加载呢? 一次性?你能保证你拿的内容不多,那从性能方面说还是OK的.否则,就该什么时候用,就什么时候取. 得出这想法,源于前几天上班赶产品的故事: A组件是父亲,B组件 ...
- Redis入门 -- Redis安装与配置
Redis入门 -- Redis安装与配置 Redis的安装 Redis的安装,我这里使用的是虚拟机. 为了让主机和虚拟机之间可以顺利通信,按照以下步骤进行: 1. 将网络连接模式改为桥接 2. re ...
- HDU5543(SummerTrainingDay03-O DP)
Pick The Sticks Time Limit: 15000/10000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others ...
- Ansible安装 入门教程
learn一门新技术咯: ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了批量系统配置 ...
- The Minimum Cycle Mean in a Digraph 《有向图中的最小平均权值回路》 Karp
文件链接 Karp在1977年的论文,讲述了一种\(O(nm)\)的算法,用来求有向强连通图中最小平均权值回路(具体问题请参照这里) 本人翻译(有删改): 首先任取一个节点 \(s\) ,定义 \(F ...
- imooc《JavaScript深入浅出》上的一个 arraysSimilar 函数
任务 请在 index.html 文件中,编写 arraysSimilar 函数,实现判断传入的两个数组是否相似.具体需求: 数组中的成员类型相同,顺序可以不同.例如 [1, true] 与 [fal ...