css table布局

表格布局有两种方式:

1.HTML Table(<table>标签)和 2. CSS Table(display:table 等相关属性)。

HTML Table是指使用原生的<table>标签,而CSS Table是指用CSS属性模仿HTML 表格的模型。

两者对应关系大致如下:

  1. table { display: table }
  2. tr { display: table-row }
  3. thead { display: table-header-group }
  4. tbody { display: table-row-group }
  5. tfoot { display: table-footer-group }
  6. col { display: table-column }
  7. colgroup { display: table-column-group }
  8. td, th { display: table-cell }
  9. caption { display: table-caption }

l利用上面所列的属性可方便实现许多功能:

如:块状元素垂直居中:display: table-cell; vertical-align: middle; 关于元素居中问题有过专门归纳

  实现圣杯布局。

posted @ 2018-03-09 15:16  zuyan  Views(1299)  Comments(0Edit  收藏  举报