1、 表格简介🍅
表格由 table 标签来定义。
每个表格均有若干行(由tr标签定义),每行被分割为若干单元格(由td标签定义)
2、表格的作用
之前;web开发人员过去也常常使用表格来完成整个网页布局,结构嵌套复杂修改维护困难,现在已经被DlV+CSS布局所取代。
现在,用于显示. 展示数据。(能够简捷迅速地查找或早现不同类型的数据及它们之间的关系)
注意:现在HTML表格应该用于展现表格数据,而不是用来实现网页布局!
3表格基本标签
5. 表格结构标签
- table
- 语法:<table></table>
- 作用;定义表格
- tr
- 语法;<tr></tr>
- 作用;定义表格中的行
- td
- 语法:<td></td>
- 作用:定义表格数据 (table data)
单元格可以包含文本,图片、列表、段落、表单、水平线、表格等等。 - 默认样式:内容水平居左,垂直居中
- th
- 语法:<th></th>
- 作用:表示表头单元格,通常在行或列的开始处,定义行或列包含的数据类型
- caption
- 作用:定义表格的标题
- 默认样式:居中于表格之上
- 注意:
caption 标签心须紧随 table 标签之后 - thead
- 作用:用于组合 HTML 表格的表头内容
- tbody
- 作用;用于组合 HTML 表格的主体内容
- 提示:一个表格允许包含多个<tbody>
- tfoot
- 语法:<tfoot></tfoot>
- 作用:用于组合 HTML 表格的页脚内容
- 总结
- 每个表格只能定义一个标题<caption>
- thead tbody,tfoot通常配合适用,用于划分表格语义,实现长 表格分步加载,或通过改变结构顺序,优先加载tbody