表格 HTML table、caption、tr、th、td、thead、tbody、tfoot、colgroup、col 标签

<table> 标签

定义 HTML 表格。一个 HTML 表格包括 <table> 元素，一个或多个<tr> 行、<th> 表头以及<td> 单元格 元素。更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。

属性	值	描述
cellpadding	pixels	规定单元边沿与其内容之间的空白。
cellspacing	pixels	规定单元格之间的空白。
rules	none groups rows cols all	规定内侧边框的哪个部分是可见的。

<p>位于行之间的线条:</p>
<table rules="rows">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>位于列之间的线条:</p>
<table rules="cols">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>位于行和列之间的线条:</p>
<table rules="all">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<caption>标签

定义表格的标题，必须直接放置到 <table> 标签之后,只能对每个表格定义一个标题。

<colgroup>标签

用于对表格中的列进行组合，以便对其进行格式化。

<col> 标签 规定了 元素内部的每一列的列属性。
span 属性 : number ，规定 <col>， <colgroup> 元素应该横跨的列数。

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

<thead>、<tbody>、<tfoot>标签

<thead> 元素的使用条件：

1、 <thead>、 <tbody> 和 <tfoot> 元素结合起来使用（表头、主体、页脚）。

2、必须作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 元素之后， <tbody>、 <tfoot> 和 <tr> 元素之前。

<style type="text/css">
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
</style>

<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>

<tr>标签

定义 HTML 表格中的行，一个 <tr> 元素包含一个或多个 <th> 或 <td> 元素。

HTML 表格有两种单元格类型

<th>标签

表头单元格 - 包含 头部信息（由 <th> 元素创建），粗体并且居中

<td>标签

标准单元格 - 包含 数据（由 <td> 元素创建），左对齐

属性	值	描述
colspan	number	规定单元格可横跨的列数
rowspan	number	规定单元格可横跨的行数
valign	top middle bottom baseline	规定单元格内容的垂直排列方式
align	right left center justify char	定义单元格行的内容对齐方式
valign	top middle bottom baseline	规定表格行中内容的垂直对齐方式。

<table border="1">
  <caption>Monthly savings</caption>  //表格标题：Monthly savings
  <!--表头一栏，包含了两个表头单元格，两列两行-->
  <tr>
    <th valign="middle">Month</th>    //垂直居中对齐
    <th valign="bottom">Savings</th>  //垂直向底部对齐
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>