表格常使用记录二
2017-01-25 15:55
162 查看
补充前面学习的内容。
在网页中编写<table>表格之后,通过我们的浏览器浏览网页源代码时,会发现我们的<table>中多了<tbody>标签,这是浏览器自动添加的标签,但这也说明我们的表格标签没有写完整。但是在企业开发中不会用到表格的完整格式,所以这部分可以当做了解不用掌握。
一个表格的完整格式包括:表头信息<thead>、主要内容<tbody>、表尾信息<tfoot>。
这三个标签中都含有<tr>行标签,一般我们在<thead>表头的行内使用<th>标签。
<tbody>和<tfoot>的行里使用<td>标签。
最后还有就是关于单元格合并的问题,在HTML中,表格的单元格并不存在合并单元格的问题,但是可以通过让单元格同时占用多个空间来实现同样的效果。
在行里面,我们想要实现几个单元格合并的效果,可以通过在需要的<td>中添加colspan属性,colspan属性的属性值代表着该单元格要占用多少个单元格的空间,如果此时规定表格是三行三列的,而我们将第一个单元格的colspan属性的属性值设置为 2 ,那么这个时候这个单元格将会占用两个单元格的位置,我们需要手动删除第一行中多余出来的单元格,这样才不会使表格变形。
在列里面,我们想要实现几个单元格的合并效果,我们需要为<td>添加rowspan标签,rowspan属性的属性值代表着该单元格要占用多少行级单元格的位置。所以我们在设置这个值得时候得清楚知道我们表格的行和列的变化情况,因为这个属性将会让对应列的所有行都向下移动,当我们设置rowspan的属性值为 2 时,我们需要在其他的行中删除多余出来的单元格,才能使表格不变形。
所以我们的表格应该包括以下的结构
<table>
<caption></caption>
<thead><tr><th></th></tr></thead>
<tbody><tr><td></td></tr></tbody>
<tfoot><tr><td></td></tr></tfoot>
</table>
在网页中编写<table>表格之后,通过我们的浏览器浏览网页源代码时,会发现我们的<table>中多了<tbody>标签,这是浏览器自动添加的标签,但这也说明我们的表格标签没有写完整。但是在企业开发中不会用到表格的完整格式,所以这部分可以当做了解不用掌握。
一个表格的完整格式包括:表头信息<thead>、主要内容<tbody>、表尾信息<tfoot>。
这三个标签中都含有<tr>行标签,一般我们在<thead>表头的行内使用<th>标签。
<tbody>和<tfoot>的行里使用<td>标签。
最后还有就是关于单元格合并的问题,在HTML中,表格的单元格并不存在合并单元格的问题,但是可以通过让单元格同时占用多个空间来实现同样的效果。
在行里面,我们想要实现几个单元格合并的效果,可以通过在需要的<td>中添加colspan属性,colspan属性的属性值代表着该单元格要占用多少个单元格的空间,如果此时规定表格是三行三列的,而我们将第一个单元格的colspan属性的属性值设置为 2 ,那么这个时候这个单元格将会占用两个单元格的位置,我们需要手动删除第一行中多余出来的单元格,这样才不会使表格变形。
在列里面,我们想要实现几个单元格的合并效果,我们需要为<td>添加rowspan标签,rowspan属性的属性值代表着该单元格要占用多少行级单元格的位置。所以我们在设置这个值得时候得清楚知道我们表格的行和列的变化情况,因为这个属性将会让对应列的所有行都向下移动,当我们设置rowspan的属性值为 2 时,我们需要在其他的行中删除多余出来的单元格,才能使表格不变形。
所以我们的表格应该包括以下的结构
<table>
<caption></caption>
<thead><tr><th></th></tr></thead>
<tbody><tr><td></td></tr></tbody>
<tfoot><tr><td></td></tr></tfoot>
</table>
相关文章推荐
- 【iOS】一种仿京东搜索历史记录的表格的实现(sqlite3的使用)
- 基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- 实现类似EXTJS表格插件 Flexgrid.js GridView中使用的记录
- 使用bootstraptable插件实现表格记录的查询、分页、排序操作
- 表格常使用记录
- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- 记录一次使用knockout实现表格中select绑定,并选中默认值。
- 怎么使用jquery来突出加亮鼠标所停留在的表格行记录?
- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- 使用dom4j和XMLHTTP轻松解决多条记录操作
- 使用Session记录页面地址和实现页面返回功能
- Community Server 1.0 Beta安装使用记录
- 在J2ME中使用记录存储系统(RMS)存储信息
- 使用 hash map 动态显示 表格
- 为何使用表格排版是不明智的?
- 如何使用 Visual Basic .NET 和 ASP.NET 将数据集转换为 Excel 的电子表格 XML
- Community Server 1.0 Beta安装使用记录(二)
- 普通及使用VML实现表格特效
- 为何使用表格排版是不明智的
- 用于查询当前数据库中所有表格的记录条数的脚本