这个是一个很常见的一个表格展示需求,其中最要的就两个属性 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. zabbix3.2使用fping批量监控ip的连通性

    .在zabbix-agent端安装fping wget http://www.fping.org/dist/fping-3.16.tar.gz tar zxvf fping-3.16.tar.gz c ...

  2. LNMP 下使用命令导出导入 MySQL 数据库

    导出数据库 导出数据库为 db_wp.sql.gz 文件: 1 mysqldump -u数据库用户名 -p数据库密码 --add-drop-table --complete-insert 数据库名 | ...

  3. 【转载】MySQL5.7 添加用户、删除用户与授权

    mysql -uroot -proot MySQL5.7 mysql.user表没有password字段改 authentication_string: 一. 创建用户: 命令:CREATE USER ...

  4. $a=[1,2,3,4,5]; $b=[a,b,c,d,e]; 转成[[1,a],[2,b],[3,c],[4,d],[5,3]]

    $a=[1,2,3,4,5]; $b=[a,b,c,d,e]; 结果 [[1,a],[2,b],[3,c],[4,d],[5,3]] return array_map(function($v1,$v2 ...

  5. Git使用六:版本对比

    准备工作: 创建一个新的项目,并初始化git 创建两个文件,并写入对应内容(utf-8无bom格式) 执行git add 命令将两个文件添加到暂存区,执行commit命令提交到仓库并生产快照 修改工作 ...

  6. PHP二维数组按某个字段排序

    //准备 二维数组 //按一个字段排序 foreach($rank as $key=>$val){ $dos[$key] = $val['timelength']; } array_multis ...

  7. docker-- 卷

    进入容器centos终端中 #docker   attach   c1 在 容器中安装nginx #yum   install  epel-relesae #yum  install  nginx # ...

  8. open_basedir php授权目录设置

    php为了安全性考虑,有一项 open_basedir 的设置.根据你web服务器环境,open_basedir可以在几个地方设置. 首先 在php.ini中配置. ;open_basedir = 如 ...

  9. 【Linux】-- 在linux上安装mysql及基本操作

    1.MySQL的安装 1.删除mariadb数据库 yum remove mariadb-libs.x86_64 CentOS7默认安装mariadb数据库,所以要先删除 2.下载mysql源 进入m ...

  10. ISP PIPLINE(零) 知识综述预热之光学概念篇

    1.光学成像关系如下:这是我看到最清晰的易懂的数学关系图 2.上面的知识了解完,camera应用的知识就是Autofocus技术,自动对焦 马达的起始位置一般在焦距处,由上面光学数学关系可知,焦距处可 ...