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跨行）的更多相关文章

  1. easyui DataGrid表体单元格跨列rowspan

    最近做项目用到了jquery easyui,其中一组DataGrid做的报表是给客户大领导看的,客户要求报表样式跟他们原有系统的一模一样(如下图1). DataGrid样式好调,只是城市名称单元格跨行 ...

  2. display：table标签来自动改变列宽 改变的同时table的整体宽度跟随变化

    发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...

  3. table中tr间距的设定table合并单元格 colspan（跨列）和rowspan（跨行）

    table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...

  4. table合并单元格 colspan（跨列）和rowspan（跨行）

    colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...

  5. HTML表格跨行、跨列操作(rowspan、colspan)

    转自:https://blog.csdn.net/u012724595/article/details/79401401 一般使用<td>元素的colspan属性来实现单元格跨列操作,使用 ...

  6. colspan是跨列，rowspan是跨行

    colspan是跨列,rowspan是跨行,可以看作是网页设计表格中的列和行的一个属性.跨列相当于把两列或者多列合并成一个单元格:跨行同理是把两行或者多行合并成一行:colspan和rowspan分别 ...

  7. Latex 表格（跨行、跨列、背景加灰）new

    一. 效果如图 二.代码如下 1. 首部增加宏包: \usepackage{multirow} 2. 正文部分增加: \begin{table} \centering \caption{Suspici ...

  8. label、input、table标签

    <label>标签 <form> <label for="male">Male</label> <input type=&qu ...

  9. ol,ul,dl,table标签的基本语法

    ol,ul,dl,table标签的基本语法 有序列表: 无序列表:                                  自定义列表: <ol> <ul> < ...

随机推荐

  1. 逆向知识之CS1.6辅助/外挂专题.1.实现CS1.6主武器副武器无限子弹

    逆向知识之CS辅助/外挂专题.1.实现CS主武器副武器无限子弹 PS: 相信大家CS1.6这类的FPS应该玩过.现在我们通过外挂手法.讲解逆向的本质.以及应用. 关于CS1.6的下载.网络百度下载即可 ...

  2. C语言第十讲,枚举类型简单说明

    C语言第十讲,枚举类型简单说明 一丶C语言中的枚举类型(ENUM) 在我们实际工作中,或者编写代码中.我们有的时候会用固定的值.而且不是很多. 这个时候就可以使用枚举了.如果我们使用#define显然 ...

  3. Jenkins持续集成学习-Windows环境进行.Net开发3

    目录 Jenkins持续集成学习-Windows环境进行.Net开发3 目录 前言 目标 优化nuget包生成流程 自动触发构建 Jenkins定时轮询触发 SVN客户端钩子触发 SVN服务器钩子触发 ...

  4. [转]Angular4---部署---将Angular项目部署到IIS上

    本文转自:https://www.cnblogs.com/kingkangstudy/p/7699710.html Angular项目部署到一个IIS服务器上 1.安装URL rewrite组件: 网 ...

  5. windows BLE编程 net winform 连接蓝牙4.0

    winform 程序调用Windows.Devices.Bluetoot API 实现windows下BLE蓝牙设备自动连接,收发数据功能.不需要使用win10的UWP开发. 先贴图,回头来完善代码 ...

  6. EXTJS4 Grid Filter 插件的使用 与后台数据解析------Extjs 查询筛选功能的实现

    先汗一个,一个小功能又踢腾了一天.本来这个带Demo的,但是上面介绍的不是很详细.用的时候问题不大,主要问题在文件导入方面.以为这个插件的使用和其他的不一样. 1.首先是需要引入文件的位置:如图 需要 ...

  7. Maven之setting.xml配置文件详解

    setting.xml配置文件 maven的配置文件settings.xml存在于两个地方: 1.安装的地方:${M2_HOME}/conf/settings.xml 2.用户的目录:${user.h ...

  8. Centos7 firewalld 基本使用

    Centos7 的防火墙 firewalld比较常见 简单介绍使用 详细介绍链接推荐:   https://blog.csdn.net/buster_zr/article/details/806049 ...

  9. 设计模式之享元模式（Flyweight）

    享元模式顾名思义就是羽量级模式或者蝇级模式,形容体量小的应用,该模式主要的设计目的是为了迎合系统大量相似数据的应用而生,减少用于创建和操作相似的细碎对象所花费的成本.大量的对象会消耗高内存,享元模式给 ...

  10. python学习之解决中英文混合输出的排版问题

    在python的格式输出时常使用format()方法,其中的多余空间默认使用英文空格作为占位符,不方便中英混合时的格式输出,因此我们要为其中的中文字符串使用占字符较大的中文空格符作为多余空间的占位符. ...