css表格和样式

表格的HTML标准为：<thead><tbody><tfoot>

<table border="1">
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>

</table>

备注：显示时，会按照<thead><tbody><tfoot>的顺序显示，而不是书写的顺序

一、border-collapse           设置表格的边框是否合并为一个单一的边框

separate          默认值，边框会被分开
collapse          边框会合并成一个单一的边框，会忽略border-spacing和empty-cells

二、border-spacing            设置表格单元格边框之间的间距

三、caption-side              设置表格<table>标题<caption>的位置
top               默认值，标题在上方
bottom            标题在下方
eg.table{
     caption-side:bottom;
}

四、empty-cells                是否显示表格中空单元格
hide               不在空单元格周围绘制边框
show               在空单元格周围绘制边框，默认

五、table-layout                该属性指定了完成表布局时所用的布局算法。
fixed              固定表格布局：
固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。
在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。
通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。

automatic/auto          默认，自动表格布局：
在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。
此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。

固定布局算法比较快，但是不太灵活，而自动算法比较慢，不过更能反映传统的 HTML 表。

六、vertical-align               设置文本在垂直上的位置
1、top               
2、middle
3、bottom
4、baseline           与基线对齐
以上四种只有在表格中使用，或display:table-cell时才有用
1、sub                垂直对齐文本的下标
2、super              垂直对齐文本的上标
以上两种对于任何位置的文本都有效
1、固定值px
2、百分比
以上两种对于任何位置的文本都有效，可以在控制行内元素在垂直方向上的位置。上面的两个值，

当你设为正值时，行内元素向上移动；当你设为负值时，行内元素向下移动。

1、text-top

2、text-bottom

3、middle

以上三种可用于在文本中插入图片时，规范图片在垂直方向上如何和文本对齐。

当使用middle规范图片与文本的对齐方式，最好设置一下文本的行高——line-height，使其的高度与图片的高度一致。

表格的具体使用

可以设置<table>的样式width:100%;这样可以使表格充分的充满整个规定空间

可以通过以下设置，设置表格的样式更加的炫酷：

    <style>
    table tr:nth-child(2n){
        background-color:#fafafa;
    }
    table tr:hover{
        background-color:#eee;
    }
    </style>