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. Linux启用ftp服务及连接

    虚拟机的系统是centos6.3 第一步.启动ftp service vsftpd restart 提示 vsftpd: 未被识别的服务 解决方法是升级vsftpd服务 yum install vsf ...

  2. Spring Cloud-Ribbon实现客户端的服务均衡(三)

    客户端负载均衡与服务端负载均衡 服务端负载均衡 通过服务端负载均衡设备维护的服务清单根据算法(轮训 权重负载 流量负载)取出服务地址 进行转发 客户端负载 将指定服务的服务清单订单(注册中心)下来 在 ...

  3. CodeForces - 340 C - Tourist Problem

    先上题目: A - Tourist Problem Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & ...

  4. 【ACM】hdu_zs2_1005_Problem E _201308030747

    Problem E Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other)Total Subm ...

  5. 关于Bubblesort算法

    Java中的经典算法之冒泡排序(Bubble Sort) 原理:比较两个相邻的元素,将值大的元素交换至右端. 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面.即在第一趟:首先比较第1个和第2 ...

  6. Amoeba for MySQL 中间件

      来源:http://docs.hexnova.com/amoeba/ Amoeba for MySQL致力于MySQL的分布式数据库前端代理层,它主要在应用层访问MySQL的时候充当query 路 ...

  7. IPC总结学习

    写的不错. http://www.cnblogs.com/CheeseZH/p/5264465.html IPC的方式通常有管道(包括无名管道和命名管道).消息队列.信号量.共享存储.Socket.S ...

  8. event.currentTarget与event.target的差别介绍

    event.currentTarget与event.target的差别想大家在使用的时候不是非常在意.本文以測试代码来解说它门之间的不同.即,event.currentTarget指向事件所绑定的元素 ...

  9. Python标准库：内置函数range(stop) range(start, stop[, step])

    本函数是产生一系列序列的数组,返回迭代子.參数stop是终止的数字:參数start是指明開始数列開始值:參数step是数列之间的差值. 因此这个函数就是产生以start为起点.以stop为终点,以st ...

  10. HDU 4607 Park visit (求树的直径）

    解题思路: 通过两次DFS求树的直径,第一次以随意点作为起点,找到距离该点距离最远的点,则能够证明这个点一定在树的直径上,然后以该点为起点进行DFS得到的最长路就是树的直径. 最后的询问,假设K &l ...