- 表格中复杂表头的编辑
- vue2.0+elementUI构建复杂表头的表格
- SDP开发平台完成多表头列表
- 【Excel系列05】表格中如何制作斜线表头
- HTML,HTML5标签
- excel单元格斜线制作方法
- 2018-12-26
- HTML表格-13
- html5表格标签
- HTML <table> 标签
（新手写给新手的share吧，各位方家还请海涵）
1.什么算是复杂表头
样例
2.如何设置
众所周知，简单的行合并和列合并方法很简单，分别使用rowspan和colspan就ok了。
但是，像这样的表头往往新手第一次会不知道如何下手（其实笔者就是新手：），借此，给大家share一下我的一点点经验吧。
废话不多说，先上代码为敬。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>biaoge 1</title> <link rel="stylesheet"href="biaoge.css"> </head> <body> <table border="1"> <caption>购物车</caption> <thead> <tr> <th rowspan="2">名称</th> <th colspan="2">2016--11--22</th> <th rowspan="2">小计</th> </tr> <tr> <th>重量</th> <th>单价</th> </tr> </thead> <tbody> <tr> <td>苹果</td> <td>3公斤</td> <td>5元/公斤</td> <td>15元</td> </tr> <tr> <td>香蕉</td> <td>2公斤</td> <td>6元/公斤</td> <td>12元</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" style="text-align: center">总 <td>27元</td> </tr> </tfoot> </table> </body> </html>如果你还有一些疑问的话，那就看过来！
接下来讲一下步骤。
首先，咱们很快的把大致框架写出来，但是，这个表头千万不要这么写：
我是反例
因为整个表格是五行四列，表头部分占到了两行。所以正确的应该是这个：
我是正解
所以整体代码顺理成章如下：
我是框架
接下来对表头部分使用简单的合并方法，如：
这样，复杂一点的表头就设置好了。
其实，只要掌握好简单的合并方法，然后分析好表格的行和列，基本就可以做大多数的表格了。
当然，HTML的table用法呀、难点呀都还很多，仍需要学习和总结。
最后祝各位学习进步进步进步！！
相关文章
表格中复杂表头的编辑
（新手写给新手的share吧，各位方家还请海涵） 1.什么算是复杂表头 2.如何设置 众所周知，简单的行合并和列合...
vue2.0+elementUI构建复杂表头的表格
vue2.0+elementUI构建复杂表头的表格（点击表头收缩列） css部分 HTML部分 js部分 效果预览图
SDP开发平台完成多表头列表
在页面设计中，可以通过数据集合来定义和建立复杂关系的多表头列表表格，通过拖拉方式轻松实现多层表头数据列表，并且能显...
【Excel系列05】表格中如何制作斜线表头
Excel表格的表头通常需要分项目，要根据项目的复杂程度来添加斜线数量。那么问题来了，你会制作斜线表头吗？今...
HTML,HTML5标签
html标签 基本 文本 图形 定义图像 表单 表格 … 定义表格 … 定义表格中的表头单元格 … 定义表格...
excel单元格斜线制作方法
Excel如何制作不同的斜线表头 1、打开excel文字编辑器，新创一个表格，菜单栏-插入-表格来创建表格，然后在...
2018-12-26
10.2.3 操作表格 元素是HTML中最复杂的结构之一。要想创建表格，一般都必须设计表示表格行、单位格、表头等方...
HTML表格-13
HTML 表格 实例： HTML 表格表头
html5表格标签
表格 格式： 表格标签： ————定义表格 ———— 定义表格标题。 ———— 定义表格的表头。 ———— ...
HTML <table> 标签
HTML
标签 tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。 表格中的属性 ...
本文标题：表格中复杂表头的编辑
本文链接：https://www.haomeiwen.com/subject/phfusftx.html
深度阅读
- 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！
热点阅读
网友评论