关于html中表格总结(超详细)

511 阅读3分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

表格总结

表格是一组由行和列组成的结构化数据集,可以将不同类型的数据集成在一张表中以显示不同类型数据之间存在的某种关系。

  • 行:水平方向上的一组数据,一般为某个主题的各种数据内容。
  • 列:垂直方向上的一组数据,一般为某一项数据。
  • 单元格:表格中的显示某一项数据的方块。

为了可以在 HTML 页面中实现表格的效果,HTML 提供了一系列表格元素。

  • <table> 元素:表示一个表格,作为表格的容器。
  • <tr> 元素:表示一个表格中的行。
  • <td> 元素:表示一个表格中的单元格。

HTML <th> 元素用来定义为一组单元格的标题。该元素的用法与 <td> 元素保持一致,定义在 <tr>元素中。

HTML <caption> 元素用来定义 HTML 页面中表格的标题。该元素一般作为 <table> 元素的第一个子级元素出现,同时会显示在表格内容中的最前面,并且会在水平方向居中显示。

  • <thead> 元素:用来定义 HTML 页面中表格的标题单元格的行。
  • <tbody> 元素:用来定义 HTML 页面中表格的主体(表格中真正的数据内容)。
  • <tfoot> 元素:用来定义 HTML 页面中表格一组各列的汇总行。

CSS caption-side 属性用来设置 HTML 页面中表格的 <caption> 元素显示的位置,该属性需要与 <caption> 属性配合使用。

  • top:默认值,表示表格标题显示在表格的上方。
  • bottom:表示表格标题显示在表格的下方。

表格是由行、列、单元格组成,在HTML中用标签表示。

表格样式可以用css设置:

伪类选择器作用
selector:first-child用来定位一组兄弟元素中的第一个元素
selector:last-child用来定位一组兄弟元素中的最后一个元素
selector:nth-child(n)用来定位一组兄弟元素中的第 n 个元素
selector:nth-last-child(n)用来定位一组兄弟元素中倒序方式的第 n 个元素
selector:first-of-type用来定位一组同类型的兄弟元素中的第一个元素
selector:last-of-type用来定位一组同类型的兄弟元素中的最后一个元素
selector:nth-of-type(n)用来定位一组同类型的兄弟元素中的第 n 个元素
selector:nth-last-of-type(n)用来定位一组同类型的兄弟元素中倒序方式的第 n 个元素
selector:only-child用来定位一个没有任何兄弟元素的元素
selector:only-of-type用来定位一个没有任何同类型兄弟元素的元素
selector:empty用来定位一个没有子级元素的元素,并且该元素也没有任何文本内容
selector:root用来定位 HTML 页面中的根元素(<html>