css3表格相关属性

表格相关属性：（table）

1，使用 border-collapse 控制单元格边框

border-collapse：seperate;或者collapse；

collapse;（边框合并，使得单元格的分隔线为单线,与table的外边框合并，样式使用最近原则）。

seperate; (边框分开，默认)

与border-collapse：seperate;配合使用的样式

border-spacing: 当设置 border-collapse 为 seperate 时，该属性用于设置两个单元格边框之间的间距。 （ border-spacing: 20px）

empty-cells : 该属性控制单元格内没有内容时，是否显示单元格边框。只有当 border-collapse 属性设置成 seperate 时，该属性才有效。该属性支待 show （显示）和 hide （隐藏）两个属性值。 (empty-cells : show;)

2, caption-side: 用于设置表格标题位于表格哪边。

该属性必须和<caption…／＞元素一起使用。该属性有 4 个值，即 top、 bottom、 left、 right, 分别对应于将表格标题放在表格的 上、下、左、右 4 处。

<table style="caption-side : bottom">
     <caption>我是标题</caption> <!--caption-side属性必须和caption一起使用-->
     <tr>
          <td>内容1</td> 
          <td>内容2</td> 
      </tr> 
      <tr> 
          <td>内容1</td> 
          <td>内容2</td> 
      </tr> 
  </table> 

3，使用 table-layout 控制表格布局

通过将表格的 table-layout 指定为 fixed 可以控制表格的布局方式，指定 table-layout:fixed 是一种固定布局方式。在这种布局方式下，表格的宽度会按如下方式计算得到。
（1）如果通过<col./>或<colgroup.／＞元素设置了每列的宽度，则表格宽度将等千所有列宽 的总和。

 <table>
<!-- 表格的宽度将由如下两个 col 元素的宽度计算出来-->
        <col style="width: 240px; "/>
        <col style="width:120px;"/>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

（2）如果表格内第一行的单元格设置了宽度信息，则表格宽度将等千第一行内所有单元格 宽度的总和 。

<table>
<!--表格的宽度将由如下第一行的单元格的宽度计算出来-->
        <tr>
            <td style="width: 240px">1</td>
            <td style="width: 120px">2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

（3） 直接平均分配每列的宽度，忽略单元格中内容的实际宽度。

 <table style="width: 240px;">
<!-- 每列将会平均分配该表格的宽度--> 
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>