CSS布局系列二：table布局

概念

表格布局由两种实现方式：一种是HTML Table（<table>等相关标签和属性）和CSS Table（display:table等相关属性）。

HTML Table-标签	CSS Table-display选项	说明
table	table/inline-table
caption	table-caption	表格标题
thead	table-header-group
tbody	table-row-group
tfoot	table-footer-group
tr	table-row	表格行
th/td	table-cell	单元格
colgroup	table-column-group	单元列组
col	table-column	单元列

HTML元素属性

table属性

• cellspacing：
• cellpadding：单元格padding
• border：边框

td属性

• rowspan：跨行合并
• colspan：跨列合并

CSS样式属性

table属性

• table-layout:
  • auto：默认值，表示根据内容决定宽度；
  • fixed：表示根据首列宽度决定宽度。
• border-collapse：
  • separate：默认值，表示单元格边框和table边框分隔；
  • collapse ：表示单元格边框和table边框合并

caption属性

• caption-side：标题位置

其他

• visibility:hidden 可以隐藏table的行和列

 系列

CSS布局系列一：标准、浮动、定位_betty_grant的博客-CSDN博客

CSS布局系列二：table布局_betty_grant的博客-CSDN博客

CSS布局系列三：flex布局_betty_grant的博客-CSDN博客

CSS布局系列四：网格布局_betty_grant的博客-CSDN博客