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合并单元格colspan和rowspan .的更多相关文章

  1. table中tr间距的设定table合并单元格 colspan（跨列）和rowspan（跨行）

    table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...

  2. table合并单元格 colspan（跨列）和rowspan（跨行）

    colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...

  3. css table 合并单元格

    1. css table 合并单元格 colspan:合并列, rowspan:合并行, 合并行的时候,比如rowspan="2",它的下一行tr会少一列: 合并列的时候,比如co ...

  4. table合并单元格

    table合并单元格 新建一张表格.要求表格有四行四列,当中第一行的四列合并,第二行.第三行和第四行的第一列合并 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  5. ant design Table合并单元格合并单元格怎么用？

    1.ant design table合并单元格怎么用?

  6. BootStrap Table 合并单元格

    为了更直观展示表格的一大堆乱七八糟的数据,合并单元格就派上用场: 效果: 贴上JSON数据(后台查询数据一定要对合并字段排序): [ { "city": "广州市&quo ...

  7. 一种HTML table合并单元格的思路

    /** * 合并单元格 * @param table1 表格的ID * @param startRow 起始行 * @param col 合并的列号,对第几列进行合并(从0开始).如果传下来为0就是从 ...

  8. JQuery Table 合并单元格-解决Bug版本

    网络中提供的方法是: <script type="text/javascript"> function _w_table_rowspan(_w_table_id, _w ...

  9. Html table 合并单元格

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Educational Codeforces Round 1 A

    In this problem you are to calculate the sum of all integers from 1 to n, but you should take all po ...

  2. mysql计划任务

    这两天一直遇见mysql计划任务的案例,今天我就给大家分享一个真是的实例: 1.创建计划任务的语法: create event 任务名称 on schedule  at 时间周期 starts '年- ...

  3. VirtualBox下Ubuntu利用桥接方式上网

    1.打开virtualbox,选择[设置]-[网络]将连接方式改为[Bridged Adapter] 2.在Ubuntu中, 运行sudo gedit /etc/network/interfaces ...

  4. nginx fastcgi 超时问题解决记录

    在网站后台导数据时,出现超时的情况.经过网上查找资料和试验 主要在下面几个配置的限制 1.php配置 第一种:set_time_limit(0); 永不过期 第二种: php.ini   max_ex ...

  5. 关于打开MTK_SDCARD_SWAP 宏后MTK目前升级方案和 关于打开MTK_SHARED_SDCARD宏后MTK目前升级方案

    如果设置宏MTK_SDCARD_SWAP=yes:默认是优先从外卡获取升级包,外卡没有包,才会去内卡获取!   1.插入外卡,升级包update.zip放入外卡,升级可以成功!   2.插入外卡,升级 ...

  6. Pre-Query trigger in Oracle D2k / Oracle Forms

    Pre-Query trigger in Oracle D2k / Oracle Forms DescriptionFires during Execute Query or Count Query ...

  7. [CF724B]Batch Sort（暴力，思维）

    题目链接:http://codeforces.com/contest/724/problem/B 题意:给出n*m的数字阵,每行数都是1-m的全排列,最多可以交换2个数一次,整个矩阵可以交换两列一次. ...

  8. 【转】在网页中运行VB6程序

      用VB6做的程序在网页里运行, 需要把程序做成OCX格式,下面简单做一介绍: 首先新建一个工程, 选择ActivX控件: 然后添加控件和代码: 然后F5运行 然后按下图设置,去掉弹出消息阻止 这样 ...

  9. Tomcat源码导入Eclipse测试

    想要研究下Tomcat的体系结构或者源码,最好将Tomcat的源码导入到ide中,编写实例进行代码跟踪(debug). 这里参考了网上一些资料,将自己操作过程记个流水账. 准备: 1.Tomcat源码 ...

  10. 访问者模式，visitor

    定义: 表示作用于某对象结构中的各个元素的操作. 可以在不改变各元素的类的前提下定义作用于这些元素的新操作. 前提: 适用于数据结构(Element)相对稳定的系统,这样visitor中的方法就是稳定 ...