colspan和rowspan这两个属性用于创建特殊的表格。
colspan是“column span（跨列）”的缩写。colspan属性用在td标签中，用来指定单元格横向跨越的列数：
 
在浏览器中将显示如下：
单元格1
单元格2 单元格3 单元格4
 
该例通过把colspan设为“3”, 令所在单元格横跨了三列。如果我们将colspan设为“2”，则该单元格将只跨越两列，于是有必要在第一行插入另外一个单元格，以确保两行占据相同的列数。
 
该例在浏览器中将显示如下：
单元格1 单元格2
单元格3 单元格4 单元格5
 
rowspan的作用是指定单元格纵向跨越的行数。
 
浏览器中将显示如下：
单元格1 单元格2
单元格3
单元格4
 
上例中的单元格1，其rowspan被设为“3”，这表示该单元格必须跨越三行（本身一行，加上另外两行）。因此，单元格1和单元格2在同一行，而单元格3和单元格4形成独立的两行。
 
 
综合实例
ss
　 　 　 　
　 　 　 　
　 　 　
　 　
　 　 　
 
 <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自定义样式设置：border-collapse: collapse;   

关于table排版的更多相关文章

  1. HTML用table布局排版 padding清零

    之前博文:HTML布局排版2如何设置div总是相对于页面居中 中是用div进行排版的,div是切了三条,顶部的图片,下部的图片,中间的平铺条,中间的div不设高度,根据内容,该区域的大小不固定,便于后 ...

  2. web网页的表单排版利器--960css

    表单排版样式 960css 前言 一般web网页的表单排版,大家都习惯用table排版,自己需要根据实际需要去定义TR和TD,很多时候对于TD的高宽度.是否合并行,合并列,都要去做一些处理,这些都是比 ...

  3. 善用 CSS 中的 table-layout 屬性加快 Table 的顯示速度

    在很久以前我們都是用 Table 在排版的,我相信現在還是有不少人還是在用 Table 進行排版而非現在較為流行的 CSS 排版,使用 Table 排版最大的好處就是版面在各瀏覽器中顯示比較不會亂掉. ...

  4. AspNet MVC与T4，我定制的视图模板

    一. 遇到的问题 文章开头部分想先说一下自己的困惑,在用AspNet MVC时,完成Action的编写,然后添加一个视图,这个时候弹出一个添加视图的选项窗口,如下: 很熟悉吧,继续上面说的,我添加一个 ...

  5. （旧）子数涵数·DW——网页制作的流程

    PS:这是我很早以前的一个废掉的项目. 当时用的还是table排版,现在基本都是div了吧. 这个项目前段时间,我还抢救过一次,后来还是放弃了. 先行.网页制作的流程分为哪些呢? 一.网站策划(当时, ...

  6. div中嵌套div速度将会同样很慢

    ---恢复内容开始--- div中嵌套了div速度将会同样很慢   最近很多老板在我们公司做企业站的时候都会要求说:我要div+css的,不要表格建的那种,那样不利于优化.但我们发现就算给他们用div ...

  7. css 实用代码汇总

    1.table 排版(防止td文字过多导致table变形) table { /*为表格设置合并边框模型*/ border-collapse: collapse; border-spacing: 0; ...

  8. （11）用css设计电子相册 {上}

    本篇学习资料讲解:       通过css对电子相册进行排版 和 侧面强调“盒子模型.标准流.浮动和定位”的重要性. 先来看看"双向联动模式"的电子相册图: {鼠标指针经过某张图片 ...

  9. mjml - 如何快速编写响应式电子邮件？

    一.背景 以前做项目碰到发邮件的需求,邮件模板的编辑就是一件头疼的事.因为虽说邮件是支持 HTML 的,但是确是 HTML 子集程度的支持,所以存在必须通过 <table> 排版的恶心之处 ...

随机推荐

  1. 分治FFT模板

    题目链接:https://www.luogu.org/problemnew/show/P4721 总结了一下蒟蒻FFT/NTT容易写错的地方: ​ 1.rev数组求错. ​ 2.cdq注意顺序:先递归 ...

  2. 06.系统编程-4.多线程和GIL

    为什么有人会说 Python? 多线程是鸡肋?知乎上有人提出这样一个问题,在我们常识中,多进程.多线程都是通过并发的方式充分利用硬件资源提高程序的运行效率,怎么在 Python 中反而成了鸡肋? 有同 ...

  3. c++0x11新特性:delete删除函数

    c_plus_plus_0x11.cpp: // c_plus_plus_0x11.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #inc ...

  4. 洛谷 P3183 BZOJ 4562 [HAOI2016]食物链

    题目描述 如图所示为某生态系统的食物网示意图,据图回答第1小题现在给你n个物种和m条能量流动关系,求其中的食物链条数.物种的名称为从1到n编号M条能量流动关系形如a1 b1a2 b2a3 b3.... ...

  5. NYOJ 一笔画问题 欧拉路

    一笔画问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 zyc从小就比较喜欢玩一些小游戏,其中就包括画一笔画,他想请你帮他写一个程序,判断一个图是否能够用一笔画下 ...

  6. BZOJ——T 1053: [HAOI2007]反素数ant

    http://www.lydsy.com/JudgeOnline/problem.php?id=1053 Description 对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6) ...

  7. Mycat连接数据库之后导致表名全小写的问题分析研究

    初步研究:通过部署发现在Mycat中部署逻辑表表名大小写混合时,在Mycat连接后出现全变小.容易造成错误逻辑表(按混合表名创建物理表): 可能拯救的方法: 1.Linux下部署安装MySQL,默认不 ...

  8. C算法与数据结构-线性表的应用,多项式求和---ShinePans

    /*---上机作业作业,二项式加法---*/ /*---By 潘尚 ---*/ /*---日期: 2014-5-8 . ---*/ /*---题目:---*/ //如果有两个稀疏多项式A和B,设计算法 ...

  9. F5设备控制脚本

    此脚本用于控制F5设备,可对pool成员进行操作及成员状态,该脚本及源自于f5官网 使用格式: 1.查看pool成员状态 /usr/bin/perl /scripts/togglepoolmember ...

  10. PHP设计模式之 单例模式 工厂模式 实例讲解

    单例模式又称为职责模式,它用来在程序中创建一个单一功能的访问点,通俗地说就是实例化出来的对象是唯一的.所有的单例模式至少拥有以下三种公共元素:1. 它们必须拥有一个构造函数,并且必须被标记为priva ...