这个是一个很常见的一个表格展示需求,其中最要的就两个属性 rowspan 和 colspan 。他们分别就是合并行 与 合并列。

要做的效果是如图下面这个,联系电话就是合并了单元格。这个说法类似于excel表格里的表格处理说法。

我们实现它的代码就是如下代码块。其中学号,姓名,班级都在th中添加了rowspan=“2”这个值,含义就是这三个格子td占两行;联系电话的添加了colspan="2"则是表示这个单元格要占两行的位置。再来一个<tr></tr>标签放区号和号码,默认的时候rowspan是1 ,所以联系电话和区号和号码就聚在一起了,占领了两行,构成了上图的样子。

<table>
<thead>
<tr>
<th rowspan="2">学号</th>
<th rowspan="2">姓名</th>
<th rowspan="2">班级</th>
<th colspan="2">联系电话</th>
</tr>
<tr>
<th>区号</th>
<th>号码</th>
</tr>
</thead>
</table>

  现在明白了rowspan与colspan的含义之后就可以随意蹂躏这个table了,就算你想加多个列在某一列下面也可以了,只需要改变colspan的值,让他与需要细分的列值能对应起来即可。对了这里要叨叨一句,赋值的问题。我没看图可以看出他其实真正的只有5列的值,所以只需要在tbody中的每个<tr></tr>中放入5个<td></td>就可以了。

下面想要扩展写一下类似于下面的数据展示,依旧是这两个属性。相信可以一眼看懂。

table-一列细分为多列(合并单元格)的更多相关文章

  1. poi获取合并单元格内的第一行第一列的值

    当读取如图所示的excel时,显示为第1行 第1列 的内容是:合并单元格 其它在合并单元格区域内的单元格不显示 示例代码如下: import java.io.FileInputStream; impo ...

  2. .Net用字符串拼接实现表格数据相同时合并单元格

    前言 最近在做项目通过GridView或Repeater绑定数据,如果两行或若干行某列值相同,需要进行合并单元格,但是实现过程中想到了字符串拼接,于是就没用绑定数据控件,而是用了html结合字符串实现 ...

  3. 【Javascript】Javascript横向/纵向合并单元格TD

    > 需求是这样滴(>_<) 在报表系统中,涉及“HTML的TD单元格的合并”恐怕为数不少. 比如,从DB查得数据并经过后台的整理后,可能是这样的: Table1     JOB TO ...

  4. python 利用三方的xlrd模块读取excel文件,处理合并单元格

      目的: python能使用xlrd模块实现对Excel数据的读取,且按照想要的输出形式.  总体思路: (1)要想实现对Excel数据的读取,需要用到第三方应用,直接应用. (2)实际操作时候和我 ...

  5. table中tr间距的设定table合并单元格 colspan(跨列)和rowspan(跨行)

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

  6. Repeater多列分别合并单元格

    GridView.Repeater合并单元格可以参考http://www.cnblogs.com/zhmore/archive/2009/04/22/1440979.html,但是原文例子是合并一列的 ...

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

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

  8. vue中 表头th 合并单元格,且表格列数不定的动态渲染方法

    吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头的单元格,且合并单元格的那列还是动态数据,也就是说你不知道会有多少组要合并起来,哎,我也有点说不清楚,废话不多说了,看代码把: 代码示例 da ...

  9. vue中 表头 th 合并单元格,且表格列数不定的动态渲染方法

    吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头. 这个需求在js里用Ju ...

  10. GRIDVIEW多行多列合并单元格(合并列)

    GitHub项目地址:https://github.com/mingceng/merge-gridviewcell 去年的时候,我写了两篇文章:  GridView多行多列合并单元格(完整代码和例子) ...

随机推荐

  1. sed 正则 ! 取反

    !符号表示取反,x,y!表示匹配不在x和y行号范围内的行,利用sed命令用于的阿银不在2-7之间的行 [111 sed]$ cat input [111 sed]$ sed -n '2,7!p' in ...

  2. Linker errors in Android NDK (undefined reference to `__cxa_end_cleanup')

    在 Android 中移植一个库(该库 使用了 libstlport )时 产生如下错误: ./obj/local/armeabi/objs/jniWrapper/native.o: In funct ...

  3. 行为驱动:Cucumber + Selenium + Java(一) - Cucumber简单操作实例

    场景(Scenarios) 场景是Cucumber结构的核心之一.每个场景都以关键字“Scenario:”(或本地化一)开头,后面是可选的场景标题.每个Feature可以有一个或多个场景,每个场景由一 ...

  4. java控台输入

    import java.util.Scanner;//访问util包的Scanner(控台输入) public class HelloWorld {public static void main(St ...

  5. 【linux】awk相关

    按字段相加文本内容 a 3 b 4 c 5 a 8 d 2 c 6 将上面内容中字段相同的数据相加 awk -F ' ' '{sum[$1]+=$2}END{for(i in sum){print i ...

  6. 你不知道的CSS单位

    CSS中大部分属性值都有对应的量词单位,常见的如描述盒模型尺寸的 width, height, margin, padding, border,又比如CSS3中的transform属性的一些值.下面的 ...

  7. Git基本操作指令

    Git是世界上目前最先进的分布式版本控制系统. 工作原理图: Workspace工作区,Index暂存区,Repository本地仓库区,Remote远程仓库. SVN与Git的最主要的区别? SVN ...

  8. 对.zip格式的文件进行解压缩

    //第一个参数就是需要解压的文件,第二个就是解压的目录public static boolean upZipFileDir(File zipFile, String folderPath) { Zip ...

  9. 按比例缩放DIV

    class ResponsiveDiv extends React.Component { constructor(props) { super(props); this.state = { widt ...

  10. Django跨域、cookie、session

    前后台分离开发 1.前台页面运行在前台服务器上,负责页面的渲染(静态文件的加载)与跳转 2.后台代码运行在后台服务器上,负责数据的处理(提供数据请求的接口) 跨域 什么是跨域? 通常情况下,A网页访问 ...