这个是一个很常见的一个表格展示需求,其中最要的就两个属性 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. 解决tomcat端口被占用:Port 8005 required by Tomcat v7.0 Server at localhost is already in use

    问题提示8005端口被占用 首先:在cmd下,输入  netstat   -ano|findstr  8005 (什么端口号被占用就输入什么端口号),回车 再输入 taskkill  /pid  20 ...

  2. SSH 架构

    这几天学习了 ssh 架构,中间出了好多错误,现在终于整理好了,就记录下来 ssh机构的框架构成,以及它们的作用 struts2 :这个框架主要用做控制处理的,其核心是 Contraller ,即 A ...

  3. 获取元素属性get_attribute

    获取text # coding:utf-8 from appium import webdriver from time import sleep desired_caps = { 'platform ...

  4. 论文阅读笔记四十一:Very Deep Convolutional Networks For Large-Scale Image Recongnition(VGG ICLR2015)

    论文原址:https://arxiv.org/abs/1409.1556 代码原址:https://github.com/machrisaa/tensorflow-vgg 摘要 本文主要分析卷积网络的 ...

  5. CAS tomcat6搭建

    #genkey:在tomcat根目录下keytool -genkey -alias tomcat_cas -keyalg RSA -storepass changeit -keystore serve ...

  6. Wine中中文显示为错误的解决方案

    First u must download wqy-microhei.ttc font online (https://github.com/anthonyfok/fonts-wqy-microhei ...

  7. oracle下查询的sql已经超出IIS响应时间

    场景: 最近一直发生oracle下查询的sql已经超出IIS响应时间,但是后台DB的SQL查询还未终止,一直在查询.这对DB是造成很大的压力. 解决办法 增加OracleCommand 中的Comma ...

  8. 读文件/写文件。http请求。读取文件列表。

    package transfor; import java.io.*; import java.net.HttpURLConnection; import java.net.URL; import j ...

  9. python底层原理

    有同学问到了一个问题,python中存储变量是通过内存地址来存储,那么python又是如何去判断内存中的地址是什么数据类型的呢.经过查找,找到这篇文章: 原博客地址:http://www.cnblog ...

  10. Python学习笔记整理(python 3)

    一.tuple(元组) tuple和list非常类似,但是tuple一旦初始化就不能修改,如: classmates = ('Michael', 'Bob', 'Tracy') 1 classmate ...