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. java提高篇---HashTable

    在java中与有两个类都提供了一个多种用途的hashTable机制,他们都可以将可以key和value结合起来构成键值对通过put(key,value)方法保存起来,然后通过get(key)方法获取相 ...

  2. TCP、UDP

    双方都是一种网络传输协议 2.TCP需要建立连接,而UDP不需要建立连接(无连接传输) 3.是否建立真实连接的特性,造成了双方可靠性的差距. TCP属于可靠的传输协议:因为传输前双方建立好了连接,相当 ...

  3. 光耦PC817

    光耦一共4个引脚,两个输入,两个输出. 输入接5v和gnd,5v接时加100欧姆电阻.输出不大于35v电压,这时输出端通路(只是通路,不是短路)

  4. 求解数组环中最大子数组和的问题(java)

    //石家庄铁道大学 信1405-1 班 唐炳辉 在上一次作业中,对于普通数组的最大子数组的求解问题的基础上,将普通的数组变成一个首尾相接的环,求这个环的最大子数组.类似的,只要改变普通数组的数组位置, ...

  5. 利用jdbc处理oracle大数据---大文件和二进制文件

    一.Oracle中大数据处理 在Oracle中,LOB(Large Object,大型对象)类型的字段现在用得越来越多了.因为这种类型的字段,容量大(最多能容纳4GB的数据),且一个表中可以有多个这种 ...

  6. 【转载】在Linux中使用VS Code编译调试C++项目

    原文:在Linux中使用VS Code编译调试C++项目 最近项目需求,需要在Linux下开发C++相关项目,经过一番摸索,简单总结了一下如何通过VS Code进行编译调试的一些注意事项. 关于VS ...

  7. 关于cookie的清除

    关于cookie的清除     设置cookie时若指定了目录,那么在删除cookie时也必须指定相同的目录,如此才可以删除之前设置的cookie的值!!!!!!!!!

  8. GitHub如何在自己的Stars中进行搜索

    默认的搜索结果,仅仅搜索原创的repository 想要搜索的时候,能够搜索到fork出来的repository的话 在关键字后面加上空格 fork:true

  9. Building，Packaging，Deploying，and Administering Applications and Types

    buliding types into a module: response files: the IL disassembler:ILDasm.exe add assemblies to a pro ...

  10. python_way day14 CSS

    python_way day14 CSS 层叠样式表 一.CSS作用域: 二.css标签选择器 三.css样式 一.css作用域: 基本用法:style="样式" <body ...