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. Bootstrap——导航栏编写

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">     ...

  2. CXF集成spring做webservice接口

    一 . cxf 的jar包 1.cxf-2.3.3.jar 2.wsdl4j-1.6.2.jar 3.wss4j-1.5.11.jar 4.wstx-asl-3.2.0.jar 5.XmlSchema ...

  3. SAP ST03N工作负载的后台作业定义

    ST03N可以把SAP的运行情况的统计数据展现出来,根据这些数据可以进行性能的分析. 1.登录到000集团,定义作业SAP_COLLECTOR_FOR_PERFMONITOR,周期每个小时执行.作业内 ...

  4. 定义一个“点”（Point）类用来表示三维空间中的点（有三个坐标）。要求如下： （1）可以生成具有特定坐标的点对象。 （2）提供可以设置三个坐标的方法。 （3）提供可以计算该“点”距原点距离平方的方法。 （4）编写主类程序验证。

    package b; public interface ZuoBiao { double zuobiao(); } package b; public class Point implements Z ...

  5. 【leetcode❤python】 257. Binary Tree Paths

    深度优先搜索 # Definition for a binary tree node.# class TreeNode:#     def __init__(self, x):#         se ...

  6. 【leetcode❤python】66. Plus One

    class Solution:      # @param digits, a list of integer digits      # @return a list of integer digi ...

  7. Android 网格布局 计算器

    <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&quo ...

  8. SAP传输系统TMS、开发类、传输请求

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  9. C#开发ActiveX控件及指纹采集

    最近做一个指纹采集和比对的功能,因为公司整个项目是WEB类型的,所以指纹采集的模块要嵌套在网页中,那只有用ActiveX了,以下是一些操作及效果,做个笔记! 新建用户控件,编写CS代码,如下: usi ...

  10. MySQL修改约束

    添加主键约束: ALTER  TABLE  tbl_name  ADD  [CONSTRAINT  [symbol索引名]] PRIMARY  KEY  [index_type] (index_col ...