表格的HTML标签和CSS属性

HTML <table> 标签

　　① thead、tfoot 以及 tbody 元素

　　使用 thead、tfoot 以及 tbody 元素时，就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

View Code

　　②caption元素

　　为table设置标题，放在<table>标签内

<caption>我的标题</caption>

表格类型

　　①横向类型

<table border="1">
<tr>
  <th>姓名</th>
  <th>电话</th>
  <th>电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

　　②纵向类型

<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 855</td>
</tr>
</table>

表格单元格

　　①跨行或跨列的表格单元格

　　（1）单元格横跨列

　　为th元素添加colspan属性

<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

　　（2）单元格横跨行

　　为th或td元素添加rowspan属性

<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="3">电话</th>
  <td >555 77 854</td>
</tr>
<tr>
  <td rowspan="2">555 77 855</td>
</tr>
</table>

　　②单元格填充（cellpadding）

　　在<table>标签内设置内联样式

<table border="1" cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

　　③单元格内边距（cellspacing）

　　在<table>标签内设置内联样式

<table border="1" cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

　　④在表格单元里排列内容（align）

　　在th或td元素中设置内联样式

<table width="400" border="1">
 <tr>
  <th align="left">消费项目....</th>
  <th align="right">一月</th>
  <th align="right">二月</th>
 </tr>
 <tr>
  <td align="left">衣服</td>
  <td align="right">$241.10</td>
  <td align="right">$50.20</td>
 </tr>
</table>