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

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

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

  1. <table>
  2. <thead>
  3. <tr>
  4. <th rowspan="2">学号</th>
  5. <th rowspan="2">姓名</th>
  6. <th rowspan="2">班级</th>
  7. <th colspan="2">联系电话</th>
  8. </tr>
  9. <tr>
  10. <th>区号</th>
  11. <th>号码</th>
  12. </tr>
  13. </thead>
  14. </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. 【原创】大叔经验分享(23)spark sql插入表时的文件个数研究

    spark sql执行insert overwrite table时,写到新表或者新分区的文件个数,有可能是200个,也有可能是任意个,为什么会有这种差别? 首先看一下spark sql执行inser ...

  2. Python-web应用 +HTTP协议 +web框架

    web架构 # web应用 架构# C/S 架构 | B/S 架构# client server: 客户端服务器架构,C++# browser server:浏览器服务器架构,Java.Python ...

  3. 用什么方法给PDF添加页眉页脚

    我们所看到的书本中都会设置好有页眉页脚,那么电子书想要添加页眉页脚要怎么操作呢,用什么方法可以在PDF中添加页眉页脚呢,今天就为大家分享一下,如何在电子文件中添加页眉页脚,想知道的小伙伴们就一起来看看 ...

  4. bzoj 3277

    十分之恶心的后缀自动机 (其实是水题,但是我太弱了...) 首先,有一个预备知识:bzoj 2780https://blog.csdn.net/lleozhang/article/details/89 ...

  5. lnoi2019游记

    好诡异的省选...... day0: 莫名其妙的订了下午从sy到dl的火车,得五点多才能到,所以.......是不需要试机的吗...... 好吧... 看着停课的jflr们,感觉他们好强啊,像我这种酱 ...

  6. (转发)Navicat 远程连接 Linux服务器上的MySQL数据库

    授权法: 在安装mysql的机器上运行: 1.# ./bin/mysql -uroot -p //这样应该可以进入MySQL服务器 2.mysql> GRANT ALL PRIVILEGES O ...

  7. 等待activity出现(android特有的wait_activity)

    前言 在启动app的时候,如果直接做下一步点击操作,经常会报错,于是我们会在启动完成的时候加sleep.那么问题来了,这个sleep时间到底设置多少合适呢?设置长了,就浪费时间,设置短了,就会找不到元 ...

  8. Win7+keras+tensorflow使用YOLO-v3训练自己的数据集

    一.下载和测试模型 1. 下载YOLO-v3 git clone https://github.com/qqwweee/keras-yolo3.git 这是在Ubuntu里的命令,windows直接去 ...

  9. 寻找符合条件的最短子字符串——SLIDING WINDOW

    简介 用一个可伸缩的窗口遍历字符串,时间复杂度大致为O(n).适用于“寻找符合某条件的最小子字符串”题型. 题目 链接 求某字符串T中含有某字符串S的所有字符的最小子字符串.如果不存在则返回" ...

  10. C#学习-接口的成员

    在接口中定义方法不能添加任何访问修饰符,因为接口中的方法是默认为public,如果显式地指定了修饰符,则会出现编译时错误. 定义玩接口之后,如果有类想继承该接口,则它必须显示接口中定义的所有方法. 在 ...