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. 洛谷P1478 陶陶摘苹果（升级版）【水题】

    又是一年秋季时,陶陶家的苹果树结了n个果子.陶陶又跑去摘苹果,这次她有一个a公分的椅子.当他手够不着时,他会站到椅子上再试试. 这次与NOIp2005普及组第一题不同的是:陶陶之前搬凳子,力气只剩下s ...

  2. php去除h5标签

    function html2text($str){  $str = preg_replace("/<style .*?<\\/style>/is", " ...

  3. 关于bitnami redmine 的一些问题

    http://blog.csdn.net/yanyaming920817/article/details/50059523

  4. Ruby对象、变量和常量

    Ruby操作的数据主要有部分:对象.类.变量.常量. 对象 在Ruby中表示数据的基本单位称为对象,在Ruby中一切都是对象. 经常使用对象: 数值对象 2.3.14.-5等表示数字的对象,另外还有矩 ...

  5. CSDN日报20170416 ——《为什么程序猿话少钱多死得早？》

    [程序人生]为什么程序猿话少钱多死得早? 作者:文奇 我在想,程序猿都是话少吗?不一定吧.像我和我的同学.都是话非常多啊. 可是经历过非常多事的如今.再想想,发现事实的确如此.程序猿确实话少. 我是一 ...

  6. 关于使用chrome插件改动全部的站点的响应responseHeaders头的注意

    1 眼下我掌握的调试技巧非常不方便,如今使用的是浏览器动作,每次都须要点击那个popup页面弹出,然后右键->查看元素,才干显示它的调试面板.一点击某些位置它又没有了; 2 改动响应报头的值时, ...

  7. spring学习笔记(22)声明式事务配置，readOnly无效写无异常

    在上一节内容中.我们使用了编程式方法来配置事务,这种优点是我们对每一个方法的控制性非常强.比方我须要用到什么事务,在什么位置假设出现异常须要回滚等.能够进行非常细粒度的配置.但在实际开发中.我们可能并 ...

  8. .NET 开发者必备的工具箱

    本文作者Spencer是一名专注于ASP.NET和C#的程序员,他列举了平时工作.在家所使用的大部分开发工具,其中大部分工具都是集中于开发,当然也有一些其它用途的,比如图片处理.文件压缩等. 如果你是 ...

  9. Node.js：Buffer

    ylbtech-Node.js:Buffer 1.返回顶部 1. Node.js Buffer(缓冲区) JavaScript 语言自身只有字符串数据类型,没有二进制数据类型. 但在处理像TCP流或文 ...

  10. 用dom4j解析xml文件并执行增删改查操作

    转自:https://www.aliyun.com/jiaocheng/1339446.html xml文件: <?xml version="1.0" encoding=&q ...