HTML_10——表格
2021/8/23 6:30:20
本文主要是介绍HTML_10——表格,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1. table定义表格
1.1 定义
表格由
标签来定义。每个表格均有若干行(由
标签定义),每行被分割为若干单元格(由
标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
thead 元素应该与 tbody 和 tfoot 元素结合起来使用。
tbody 元素用于对 HTML 表格中的主体内容进行分组,而 tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组。
2.2 实例
从结构上看,表格可以分成表头、主体和表尾三部分,在HTML语言中分别用thead、tbody、tfoot表示
<table><tbody><tr><td> `标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 tr代表行,th代表列,td代表元素 ### 1.2 实例 ```html <h4>这个表格没有边框:</h4> <table> <tbody><tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </tbody></table> <h4>这个表格也没有边框:</h4> <table border="0"> <tbody><tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </tbody></table>
1.3 边框属性
如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。
使用边框属性来显示一个带有边框的表格:
<table border="1"> <tbody><tr> <td>Row 1, cell 1</td> </tr> <tr> <td>Row 1, cell 2</td> </tr> </tbody></table>
1.4 表头
表格的表头使用 </td><th>
标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本:
<table border="1"> <tbody><tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </tbody></table>
1.5 空单元格
在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。
2. thead、tbody、tfoot元素
2.1 定义
`
Month | Savings |
---|---|
January | $100 |
February | $80 |
Sum | $180 |
![image-20210818171630456](https://gitee.com/Nadir-Echo/cloud/raw/master/image/image-20210818171630456.png) ### 2.3 注意点 > 1)thead和tfoot在一张表中都只能有一个,而tbody可以有多个。 > > 2)tfoot必须出现在tbody前面,这样浏览器在接收主体数据之前,就能渲染表尾,有利于加快表格的显示速度。这一点对大型表格尤其重要。 > > 3)thead、tbody和tfoot里面都必须使用tr标签。 ### 2.4 行列的分组 **td 的 colspan属性代表所占列数, rowspan 属性代表所占行数** ```html <table border="10"> <tbody><tr><td colspan="2" align="center">Test</td> </tr> <tr> <td rowspan="2" align="center">name</td> <td align="center">sex</td> </tr> <tr> <td colspan="2" align="center">age</td> </tr> </tbody></table>
3. 拓展
3.1 css相关
- CSS通过border属性设置边框
- border-collapse可以合并边框
- cation元素可以设置标题:存疑
- padding(css):设置单元内内容的边框距
3.2 设置样式
colgroup和col元素
4. 参考
HTML表格
thead、tbody 以及 tfoot 元素的 HTML 表格
HTML表格的制作
td 的 colspan 和 rowspan
这篇关于HTML_10——表格的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-15AntDesign项目实战:新手入门与初级应用教程
- 2024-11-15AntDesign-Form-rules项目实战:新手指南
- 2024-11-14ESLint课程:初学者指南
- 2024-11-14Form.List 动态表单课程:新手入门教程
- 2024-11-14Redux课程:新手入门完全指南
- 2024-11-13MobX 使用入门教程:轻松掌握前端状态管理
- 2024-11-12前端编程资料:新手入门指南与初级教程
- 2024-11-12前端开发资料入门指南
- 2024-11-12前端培训资料:适合新手与初级用户的简单教程
- 2024-11-12前端入门资料:新手必读指南