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. Java核心技术读书笔记01

    Volume I Chapter 1  An Introduction to Java  • 1.1 Java as a Programming Platform• 1.2 The Java ‘Whi ...

  2. php中的empty()方法

    empty() 判断一个变量是否为“空”,isset() 判断一个变量是否已经设置.empty还会检测变量是否为空.为零.当一个变量值为0,empty() 认为这个变量同等于空,即相当于没有设置.例如 ...

  3. mongodb--update高级用法

    配合update使用的函数 $set 修改某列的值 $unset 删除某个列 $rename 重命名某个列 $inc 增长某个列 $setOnInsert 当upsert为true时,并且发生了ins ...

  4. J - Assign the task

    J - Assign the task HDU - 3974 思路:一眼秒思路<(*￣▽￣*)/ dfs序+线段树. 通过dfs序把树上问题转化成线段上的问题.然后用线段树解决.    错因:都 ...

  5. HDU 3934

    /*这是用的有旋转卡壳的思想. 首先确定i,j,对k进行循环,知道找到第一个k使得cross(i,j,k)>cross(i,j,k+1),如果k==i进入下一次循环. 对j,k进行旋转,每次循环 ...

  6. 报错configure:error: no acceptable C compiler found in $PATH。。

    报错configure:error: no acceptable C compiler found in $PATH.. 查看日志: 出错原因:新安装的linux系统,没有gcc库 解决方案:使用yu ...

  7. 面向对象的三大特性之二——继承（含super的使用）

    1.继承的语法:class 子类 extends 父类 例1: class Person { int age; String name; public void print1() { System.o ...

  8. 2016.04.07,英语,《Vocabulary Builder》Unit 11

    cant, from the Latin verbs canere and cantare, meaning 'sing'. by way of French, add an h to the roo ...

  9. 关于android中线程，进程，组件，app的理解

    android系统是一座房子.有一个正常执行的公司进驻这所座子 cpu是这家公司的老板 进程是公司中的办公室,办公室不干活 线程是办公室中的员工,干活的永远是员工 一间办公室中可有多个员工,而且办公室 ...

  10. MySQL调优 —— Using temporary

      DBA发来一个线上慢查询问题. SQL例如以下(为突出重点省略部分内容): select distinct article0_.id, 等字段 from article_table article ...