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=""  >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=""> 　 </td>

        <td   width= "25% "> 　 </td>

        <td   width= "25% "> 　 </td>

        <td   width= "25% "> 　 </td>

     </tr>

     <tr>

        <td   width= "25% "> 　 </td>

        <td   width= "25% " rowspan=""> 　 </td>

        <td   width= "25% "> 　 </td>

     </tr>

     <tr>

        <td   width= "25% " colspan=""  > 　 </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>标签总结（colspan跨列 ，rowspan跨行）

    table标签有些内置属性要设置: <table cellpadding="0" cellspacing="0" border="0" ...

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

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

  3. table合并单元格colspan和rowspan .

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

  4. css table 合并单元格

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

  5. 【表格设置】HTML中合并单元格，对列组合应用样式，适应各浏览器的内容换行

    1.常用表格标签 普通    <table>           |           <tr>          |           |          <th ...

  6. table合并单元格

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

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

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

  8. BootStrap Table 合并单元格

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

  9. [C#]合并单元格(行、列)

    详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak説明:控件ID指的是页面上面的Grid ...

随机推荐

  1. 安卓手机USB无法共享、上网或卡顿的解决方法

    安卓手机通过USB为电脑(Windows10)提供网络接入点时,系统程序会异常卡顿. 1)设备管理器2)点击“网络适配器”,在弹出的下拉列表中选择”Remote NDIS based Internet ...

  2. SQL Server存储过程作业（一）

    创建客房类型表RoomType 创建客房状态表RoomState 创建客房信息表Room 创建结账状态表ResideState 创建客人信息表GuestRecord 编写sql语句 USE maste ...

  3. 错误 RC1015: 无法打开包含文件 'XTToolkitPro.rc'

    XtremeToolkitPro作为VC++/MFC平台下目前最流行的GUI界面库之一,安装和使用都很方便.不过,在实际使用中还是碰到许多问题.如果在编译工程时只显示一个错误:RC1015: 无法打开 ...

  4. 【sqli-labs】 less31 GET- Blind -Impidence mismatch -Having a WAF in front of web application (GET型基于盲注的带有WAF注入)

    标题和less30一样 http://192.168.136.128/sqli-labs-master/Less-31/login.php?id=1&id=2" ")闭合的 ...

  5. EF MySql:Specified key was too long; max key length is 767 bytes解决方案

    [DbConfigurationType(typeof(MySqlEFConfiguration))]//添加特性 public partial class Model1 : DbContext { ...

  6. 环境变量、system（day10）

    一.环境变量 bash下的环境变量. 每个进程都默认从父进程继承环境变量 bash本身就是一个程序,这个程序运行的时候,bash进程 可以定义只能之自己这个进程中使用的变量,这种变量称为自定义变量. ...

  7. PAT 1088. Rational Arithmetic

    For two rational numbers, your task is to implement the basic arithmetics, that is, to calculate the ...

  8. 我的网站恢复访问了,http://FansUnion.cn

    博客网站 http://FansUnion.cn 恢复访问了. 周末,发表几篇原创文章.

  9. 去除html标签 php

    function my_html($string,$sublen =80){ $string = strip_tags($string); $string = preg_replace ('/\n/i ...

  10. 【[Offer收割]编程练习赛11 C】岛屿3

    [题目链接]:http://hihocoder.com/problemset/problem/1487 [题意] 中文题 [题解] 岛屿的数目对应了这个图中联通块的数目; 面积则对应有多少个方块; 周 ...