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. PHP和zookeeper结合实践

    Zookeeper 简单介绍 Apache Zookeeper是开发和维护开源服务器的服务,它能够实现高度可靠的分布式协调. 安装Zookeeper(无需安装) wget http://mirror. ...

  2. python爬虫08 | 你的第二个爬虫，要过年了，爬取豆瓣最受欢迎的250部电影慢慢看

    马上就要过年啦 过年在家干啥咧 准备好被七大姑八大姨轮番「轰炸」了没? 你的内心 os 是这样的 但实际上你是这样的 应付完之后 闲暇时刻不妨看看电影 接下来咱们就来爬取豆瓣上评分最高的 250部电影 ...

  3. Unity 利用FFmpeg实现录屏、直播推流、音频视频格式转换、剪裁等功能

    目录 一.FFmpeg简介. 二.FFmpeg常用参数及命令. 三.FFmpeg在Unity 3D中的使用. 1.FFmpeg 录屏. 2.FFmpeg 推流. 3.FFmpeg 其他功能简述. 一. ...

  4. mysql优化 explain index

    本文章属于转载,尊重原创:http://www.2cto.com/database/201501/369135.html 实验环境: 1.sql工具:Navicat 2.sql数据库,使用openst ...

  5. 使用厂商MIB库查找设备OID值并实施监控的方法

    https://wenku.baidu.com/view/8f4b389e0029bd64783e2cd0.html

  6. Linux Storage Stack Diagram 4.0

    https://www.thomas-krenn.com/en/wiki/Linux_Storage_Stack_Diagram

  7. centos 解压压缩包到指定目录

    解压.tar.gz文件: tar -zxvf web.tar.gz tar不支付解压文件到指定的目录! 解压.war .zip文件到指定目录: unzip web.war -d webapps/ROO ...

  8. Android 自己定义TextView 实现文本间距

    转载请标明出处: http://blog.csdn.net/u011974987/article/details/50845269: Android系统中TextView默认显示中文时会比較紧凑.不是 ...

  9. java5核心基础之泛型（3）-泛型作用于编译阶段-怎样将String对象传入Integer类型的泛型对象中？

    泛型作用于编译阶段: 泛型是作用于编译阶段,在编译阶段控制类型,以确保在编写代码的时候仅仅能传入指定类型数据到泛型集合对象中去. 怎样验证呢,贴代码例如以下: package highBasic.ge ...

  10. TI C66x DSP 系统events及其应用 - 5.6（INTMUX）

    系统event 0~127(包含了eventCombiner的输出event 0~3)与CPU支持的12个可屏蔽中断是通过INTMUX寄存器进行映射的(不包含NMI.RESET).能够选择将系统eve ...