table-一列细分为多列(合并单元格)
这个是一个很常见的一个表格展示需求,其中最要的就两个属性 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-一列细分为多列(合并单元格)的更多相关文章
- poi获取合并单元格内的第一行第一列的值
当读取如图所示的excel时,显示为第1行 第1列 的内容是:合并单元格 其它在合并单元格区域内的单元格不显示 示例代码如下: import java.io.FileInputStream; impo ...
- .Net用字符串拼接实现表格数据相同时合并单元格
前言 最近在做项目通过GridView或Repeater绑定数据,如果两行或若干行某列值相同,需要进行合并单元格,但是实现过程中想到了字符串拼接,于是就没用绑定数据控件,而是用了html结合字符串实现 ...
- 【Javascript】Javascript横向/纵向合并单元格TD
> 需求是这样滴(>_<) 在报表系统中,涉及“HTML的TD单元格的合并”恐怕为数不少. 比如,从DB查得数据并经过后台的整理后,可能是这样的: Table1 JOB TO ...
- python 利用三方的xlrd模块读取excel文件,处理合并单元格
目的: python能使用xlrd模块实现对Excel数据的读取,且按照想要的输出形式. 总体思路: (1)要想实现对Excel数据的读取,需要用到第三方应用,直接应用. (2)实际操作时候和我 ...
- table中tr间距的设定table合并单元格 colspan(跨列)和rowspan(跨行)
table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...
- Repeater多列分别合并单元格
GridView.Repeater合并单元格可以参考http://www.cnblogs.com/zhmore/archive/2009/04/22/1440979.html,但是原文例子是合并一列的 ...
- 【表格设置】HTML中合并单元格,对列组合应用样式,适应各浏览器的内容换行
1.常用表格标签 普通 <table> | <tr> | | <th ...
- vue中 表头th 合并单元格,且表格列数不定的动态渲染方法
吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头的单元格,且合并单元格的那列还是动态数据,也就是说你不知道会有多少组要合并起来,哎,我也有点说不清楚,废话不多说了,看代码把: 代码示例 da ...
- vue中 表头 th 合并单元格,且表格列数不定的动态渲染方法
吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头. 这个需求在js里用Ju ...
- GRIDVIEW多行多列合并单元格(合并列)
GitHub项目地址:https://github.com/mingceng/merge-gridviewcell 去年的时候,我写了两篇文章: GridView多行多列合并单元格(完整代码和例子) ...
随机推荐
- 解决tomcat端口被占用:Port 8005 required by Tomcat v7.0 Server at localhost is already in use
问题提示8005端口被占用 首先:在cmd下,输入 netstat -ano|findstr 8005 (什么端口号被占用就输入什么端口号),回车 再输入 taskkill /pid 20 ...
- SSH 架构
这几天学习了 ssh 架构,中间出了好多错误,现在终于整理好了,就记录下来 ssh机构的框架构成,以及它们的作用 struts2 :这个框架主要用做控制处理的,其核心是 Contraller ,即 A ...
- 获取元素属性get_attribute
获取text # coding:utf-8 from appium import webdriver from time import sleep desired_caps = { 'platform ...
- 论文阅读笔记四十一:Very Deep Convolutional Networks For Large-Scale Image Recongnition(VGG ICLR2015)
论文原址:https://arxiv.org/abs/1409.1556 代码原址:https://github.com/machrisaa/tensorflow-vgg 摘要 本文主要分析卷积网络的 ...
- CAS tomcat6搭建
#genkey:在tomcat根目录下keytool -genkey -alias tomcat_cas -keyalg RSA -storepass changeit -keystore serve ...
- Wine中中文显示为错误的解决方案
First u must download wqy-microhei.ttc font online (https://github.com/anthonyfok/fonts-wqy-microhei ...
- oracle下查询的sql已经超出IIS响应时间
场景: 最近一直发生oracle下查询的sql已经超出IIS响应时间,但是后台DB的SQL查询还未终止,一直在查询.这对DB是造成很大的压力. 解决办法 增加OracleCommand 中的Comma ...
- 读文件/写文件。http请求。读取文件列表。
package transfor; import java.io.*; import java.net.HttpURLConnection; import java.net.URL; import j ...
- python底层原理
有同学问到了一个问题,python中存储变量是通过内存地址来存储,那么python又是如何去判断内存中的地址是什么数据类型的呢.经过查找,找到这篇文章: 原博客地址:http://www.cnblog ...
- Python学习笔记整理(python 3)
一.tuple(元组) tuple和list非常类似,但是tuple一旦初始化就不能修改,如: classmates = ('Michael', 'Bob', 'Tracy') 1 classmate ...