CSS —表格基本知识

2014-11-23 本文已影响282人 Miss____Du

table的基本格式
这篇里面，写了表格基本用到的标签。但是出于兼容性，不考虑thead tbody tfoot
未修饰的效果
依据属性设置表格
border
- **border-spacing **
  
  效果
  
  border-spacing设置边框之间的距离，一个值代表水平边框之间的距离，两个值分别代表水平与垂直之间的距离。
- border-collapse
  效果
  border-collapse代表设置是否把表格边框合并为单一的边框。他有两个值，collapse代表边框合并为单一的边框。separate默认值，边框会被分开。
  当设置成border-collapse:collapse时，border-spacing会不起作用。
padding
效果
关于padding的设置同盒子模型。
利用之前学的进行修饰
效果
文本内容
效果
文本水平对齐：text-align:center、left、right
文本垂直对齐：vertical-align:bottom、middle、top
标题的位置
caption{caption-side: bottom;}//IE7以前及IE7不支持
标题对齐方式：caption-side: bottom、top(默认)
空单元格
table,tr,th,td{
border: 2px solid #FFAFA0;
border-collapse: separate;//隐藏空单元格的前提
empty-cells: hide; }
空单元格的显示与否：empty-cells:hide、show（默认）
效果