表格元素

在网页中, 对于某些内容的展示使用表格元素更为合适和方便

表格常见的元素

table

• 表格

tr(table row)

• 表格中的行

td(table data)

• 行中的单元格

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

表格的练习

通过表格元素和CSS完成下面的表格

这里我们需要用到一个非常重要的属性

• border-collapse：CSS属性是用来决定表格的边框是分开的还是合并的;
• table { border-collapse: collapse; }
• 合并单元格的边框
  

表格的其他元素

thead

• 表格的表头

tbody

• 表格的主体

tfoot

• 表格的页脚

caption

• 表格的标题

th

• 表格的表头单元格
  

单元格合并

在某些特殊的情况下, 每个单元格占据的大小可能并不是固定的

• 一个单元格可能会跨多行或者多列来使用;
  
  单元格合并分成两种情况

• 跨列合并: 使用colspan;
  ✓ 在最左边的单元格写上colspan属性, 并且省略掉合并的td;
  

• 跨行合并: 使用rowspan;
  ✓ 在最上面的单元格协商rowspan属性, 并且省略掉后面tr中的td;