表格

22 阅读1分钟

表格

在网页中, 表格是经常使用的一种展示形式。对于某些内容的展示使用表格元素更为合适和方便。

编写表格最常见的是下面的元素有table、tr、td:

  • table:表格
  • tr(table row):表格中的行
  • td(table data):行中的单元格

另外表格有很多相关的属性可以设置表格的样式, 但是已经不推荐使用了。

image.png

给表格设置边框时我们需要用到一个非常重要的属性:border-collapse。border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。table { border-collapse: collapse; }合并单元格的边框。

表格的其他元素:

  • thead:表格的表头
  • tbody:表格的主体
  • tfoot:表格的页脚
  • caption:表格的标题
  • th:表格的表头单元格

单元格合并

在某些特殊的情况下, 每个单元格占据的大小可能并不是固定的。一个单元格可能会跨多行或者多列来使用,这个时候我们就要使用单元格合并来完成。

单元格合并分成两种情况:

  • 跨列合并: 使用colspan。在最左边的单元格写上colspan属性, 并且省略掉合并的td。
  • 跨行合并: 使用rowspan。在最上面的单元格写上rowspan属性, 并且省略掉后面tr中的td。