Study 3 —— 表格
表格基本格式:
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
合并单元格
左右单元格合并需要使用<td>标记的colspan属性完成
上下单元格合并需要使用<td>标记的rowspan属性完成
以下是一个实例:
<table>
<tr>
<td rowspan="2">内容</td>
<td colspan="3">百度使用</td>
</tr>
<tr>
<td>指南针</td>
<td>生活</td>
<td>自然</td>
</tr>
</table>
网页显示结果如下:
为了让表格结构更清晰,以及配合CSS样式,表格中还会体现出表头、主体、脚注等,三者相应的HTML标记依次为<thead>、<tbody>、<tfoot>
另外,在表格中还有两个标记,<caption>表示表格的标题,<th>可以定义表格内的表头单元格
<table>
<caption>学生成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tfoot>
<tr>
<td>平均分</td>
<td colspan="2">540</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>560</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>520</td>
</tr>
</tbody>
</table>
border-collapse: collapse; 合并表格线
Study 3 —— 表格的更多相关文章
- 【240】◀▶IEW-Unit05
Unit 5 Education: Study Abroad 表格技巧讲解 1. Model1对应表格分析 This table shows the numbers of international ...
- jsp+oracle实现数据库内容以表格形式在前台显示(包含分页)
jsp+oracle实现数据库内容以表格形式在前台显示(包含分页) 在文件夹内新增list_emp.jsp 代码如下: <%@ page contentType="text/html& ...
- ligerui_实际项目_003:form中添加数据,表格(grid)里面显示,最后将表格(grid)里的数据提交到servlet
实现效果: "Form"中填写数据,向本页"Grid"中添加数据,转换成Json数据提交,计算总和,Grid文本框可编辑,排序 图片效果: 总结: //disp ...
- Data Visualization – Banking Case Study Example (Part 1-6)
python信用评分卡(附代码,博主录制) https://study.163.com/course/introduction.htm?courseId=1005214003&utm_camp ...
- VLOOKUP函数将一个excel表格的数据匹配到另一个表中
sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003& ...
- pandas连接多个表格concat()函数
网易云课堂该课程链接地址 https://study.163.com/course/courseMain.htm?share=2&shareId=400000000398149&cou ...
- Study Blazor .NET(四)数据绑定
翻译自:Study Blazor .NET,转载请注明. 数据绑定 单向绑定 在blazor中单向绑定简单而直接,无需UI刷新或渲染.下面示例展示了单向数据绑定: //Counter.razor @p ...
- ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑
前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...
- 03.LoT.UI 前后台通用框架分解系列之——多样的表格
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
随机推荐
- PAT 1003 我要通过!
https://pintia.cn/problem-sets/994805260223102976/problems/994805323154440192 “答案正确”是自动判题系统给出的最令人欢喜的 ...
- java collections - keyset() vs entrySet() in map
https://stackoverflow.com/questions/8962459/java-collections-keyset-vs-entryset-in-map http://blog.c ...
- Bootstrap Validator使用特性,动态(Dynamic)添加的input的验证问题
http://1000hz.github.io/bootstrap-validator/#validator-usage Validated fields By default, the valida ...
- Java控制台常用命令
http://docs.oracle.com/javase/7/docs/technotes/tools/windows/java.html javaw是java的带console版本,其他一致. h ...
- FuelPHP 系列(六) ------ CURD 增删改查
一.create $article = new Model_Article(); // 或 $article = Model_Article::forge(); // 保存数据,返回新增数据 id $ ...
- width() 、 height() 方法;innerWidth() 、innerHeight() 方法;outerWidth() 、 outerHeight() 方法的区别
1.width() . height() 方法 设置或返回元素的宽度.高度(不包括内边距.边框或外边距): 2.innerWidth() .innerHeight() 方法 返回元素的宽度.高度(包括 ...
- 一本通1548【例 2】A Simple Problem with Integers
1548:[例 2]A Simple Problem with Integers 题目描述 这是一道模板题. 给定数列 a[1],a[2],…,a[n],你需要依次进行 q 个操作,操作有两类: 1 ...
- LOJ2540 [PKUWC2018] 随机算法 【状压DP】
题目分析: 听说这题考场上能被$ O(4^n) $的暴力水过,难不成出题人是毕姥爷? 首先思考一个显而易见的$ O(n^2*2^n) $的暴力DP.一般的DP都是考虑最近的加入了哪个点,然后删除后递归 ...
- HNOI2017大佬
贼难的一道题 虽然算法都不难,但组合起来就是想不到 首先,最简单的一步,对所有大佬,嘲讽你减的自信值和你做水题回复自信值都是不变的,写个\(dp\),设\(dp[i][j]\)表示第\(i\)天自信值 ...
- 自学Zabbix11.6 Zabbix SNMP自定义OID
点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 自学Zabbix11.6 Zabbix SNMP自定义OID 为什么要自定义OID? 前面已经讲过 ...