HTML 表格<table><caption><th><tr><td><thead><tbody><tfoot><col><colgroup>

<table>标签：

定义和用法：

<table>标签定义HTML表格。

简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。

tr元素定义表格行，th元素定义表头，td元素定义表格单元。

可选的属性：

1.border

   值：pixels       规定表格边框的宽度。

2.cellpadding

   值:pixels或%     规定单元边沿与内容之间的空白。

3.cellspacing   

   值：pixels或%   规定单元格之间的空白。

4. frame

    值：void（不显示外侧边框。）                       规定外侧边框的哪个部分是可见的。

         above (显示上部的外侧边框。）

         below (显示下部的外侧边框。）

         hsides (显示上部和下部的外侧边框。）

         vsides  （显示左边和右边的外侧边框。）

         lhs  (显示左边的外侧边框。）

         rhs （显示右边的外侧边框。）

         box  （在所有四个边上显示外侧边框。）

         border (在所有四个边上显示外侧边框。） 

5. rules    值：  none (没有线条。）                             规定内侧边框的哪个部分是可见的。

           groups （位于行组和列组之间的线条。）

           rows   （位于行之间的线条。）

           cols    （位于列之间的线条。）

           all       （位于行和列之间的线条。）

6. summary

   值： text       规定表格的摘要。

7. width  

   值：%或pixels    规定表格的宽度。

<caption> 标签

定义和用法

caption 元素定义表格标题。

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

所有浏览器都支持 <caption> 标签。

<th> 标签

定义和用法

定义表格内的表头单元格。

HTML 表单中有两种类型的单元格：

• 表头单元格 - 包含表头信息（由 th 元素创建）

• 标准单元格 - 包含数据（由 td 元素创建）

th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。

提示和注释

提示：如果需要将内容横跨多个行或列，请使用 colspan 和 rowspan 属性。

可选的属性：

1. align

   值：left （左对齐内容（默认值）。）           规定表格的表头单元格中内容的水平对齐方式。

         right  （右对齐内容。）

         center  （居中对齐内容。）

         justify  （对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。

         char   （将内容对准指定字符。）注释：几乎没有浏览器能够正确地处理 "char" 值。

2. colspan

   值：number                              规定表头单元格可横跨的列数。

        注释：没有浏览器支持 colspan="0"，这个值有特殊的意义。

3. rowspan

    值：number                            规定表头单元格可横跨的行数。

    注释：没有浏览器支持 rowspan="0"，这个值有特殊的意义。

4.  valign

     值：top（对内容进行上对齐。）                   规定单元格中内容的垂直排列的方式。

           middle  （对内容进行居中对齐（默认值）。）

          bottom  （对内容进行下对齐。）

          baseline   （与基线对齐。）

         注释：基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。

          例如： valign="bottom"

                   valign="baseline"

<tr> 标签

定义和用法：

<tr> 标签定义 HTML 表格中的行。

tr 元素包含一个或多个 th 或 td 元素。

可选属性：

1. align

   值：left （左对齐内容（默认值）。）           规定表格行中内容的水平对齐方式。

         right  （右对齐内容。）

         center  （居中对齐内容。）

         justify  （对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。

         char   （将内容对准指定字符。）注释：几乎没有浏览器能够正确地处理 "char" 值。

2.  valign

     值：top（对内容进行上对齐。）                   规定表格行中内容的垂直排列的方式。

           middle  （对内容进行居中对齐（默认值）。）

          bottom  （对内容进行下对齐。）

          baseline   （与基线对齐。）

         注释：基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。

          例如： valign="bottom"

                   valign="baseline"

<td> 标签

定义和用法：

<td> 标签定义 HTML 表格中的标准单元格。

HTML 表格有两类单元格：

• 表头单元 - 包含头部信息（由 th 元素创建）
• 标准单元 - 包含数据（由 td 元素创建）

td 元素中的文本一般显示为正常字体且左对齐。

可选属性：

1. align

   值：left （左对齐内容（默认值）。）           规定单元格中内容的水平对齐方式。

         right  （右对齐内容。）

         center  （居中对齐内容。）

         justify  （对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。

         char   （将内容对准指定字符。）注释：几乎没有浏览器能够正确地处理 "char" 值。

2. colspan

   值：number                              规定单元格可横跨的列数。

        注释：没有浏览器支持 colspan="0"，这个值有特殊的意义。

3. rowspan

    值：number                            规定单元格可横跨的行数。

    注释：没有浏览器支持 rowspan="0"，这个值有特殊的意义。

4.  valign

     值：top（对内容进行上对齐。）                   规定单元格中内容的垂直排列的方式。

           middle  （对内容进行居中对齐（默认值）。）

          bottom  （对内容进行下对齐。）

          baseline   （与基线对齐。）

         注释：基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。

          例如： valign="bottom"

                   valign="baseline"

<thead> 标签

定义和用法

<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

thead 元素应该与 tbody 和 tfoot 元素结合起来使用。

tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

提示：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。

详细描述

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

可选属性：

1. align

   值：left （左对齐内容（默认值）。）           规定thead元素中内容的水平对齐方式。

         right  （右对齐内容。）

         center  （居中对齐内容。）

         justify  （对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。

         char   （将内容对准指定字符。）注释：几乎没有浏览器能够正确地处理 "char" 值。

2.  valign

     值：top（对内容进行上对齐。）                   规定thead元素中内容的垂直排列的方式。

           middle  （对内容进行居中对齐（默认值）。）

          bottom  （对内容进行下对齐。）

          baseline   （与基线对齐。）

         注释：基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。

          例如： valign="bottom"

                   valign="baseline"

<tbody> 标签

定义和用法

<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。

tbody 元素应该与 thead 和 tfoot 元素结合起来使用。

thead 元素用于对 HTML 表格中的表头内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

提示：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。

详细描述

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

可选属性：

1. align

   值：left （左对齐内容（默认值）。）           规定tbody元素中内容的水平对齐方式。

         right  （右对齐内容。）

         center  （居中对齐内容。）

         justify  （对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。

         char   （将内容对准指定字符。）注释：几乎没有浏览器能够正确地处理 "char" 值。

2.  valign

     值：top（对内容进行上对齐。）                   规定tbody元素中内容的垂直排列的方式。

           middle  （对内容进行居中对齐（默认值）。）

          bottom  （对内容进行下对齐。）

          baseline   （与基线对齐。）

         注释：基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。

          例如： valign="bottom"

                   valign="baseline"

<tfoot> 标签

定义和用法 

<tfoot> 标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。

tfoot 元素应该与 thead 和 tbody 元素结合起来使用。

thead 元素用于对 HTML 表格中的表头内容进行分组，而 tbody 元素用于对 HTML 表格中的主体内容进行分组。

注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

 提示：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。

详细描述

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

可选的属性：

1. align

   值：left （左对齐内容（默认值）。）           规定tfoot元素中内容的水平对齐方式。

         right  （右对齐内容。）

         center  （居中对齐内容。）

         justify  （对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。

         char   （将内容对准指定字符。）注释：几乎没有浏览器能够正确地处理 "char" 值。

2.  valign

     值：top（对内容进行上对齐。）                   规定tfoot元素中内容的垂直排列的方式。

           middle  （对内容进行居中对齐（默认值）。）

          bottom  （对内容进行下对齐。）

          baseline   （与基线对齐。）

         注释：基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。

          例如： valign="bottom"

                   valign="baseline"

提示和注释：

注释：<thead> 内部必须拥有 <tr> 标签！

注释：<thead>、<tbody> 以及 <tfoot> 很少被使用，这是因为糟糕的浏览器支持。我们期望在 XHTML 的未来版本中这种情况会发生变化。

 <col> 标签

定义和用法

<col> 标签为表格中一个或多个列定义属性值。

如需对全部列应用样式，<col> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。

您只能在 table 或 colgroup 元素中使用 <col> 标签。

提示和注释：

提示：请为 <col> 标签添加 class 属性。这样就可以使用 CSS 来负责对齐方式、宽度和颜色等等。

提示：如果您希望在 colgroup 内部为每个列规定不同的属性值时，请使用此元素。如果没有 col 元素，列会从 colgroup 那里继承所有的属性值。

注释：col 元素是仅包含属性的空元素。如需创建列，您就必须在 tr 元素内部规定 td 元素。

可选属性：

1.span 

   值：number            规定 col 元素应该横跨的列数。

2.  valign

     值：top（对内容进行上对齐。）                   规定col元素中内容的垂直排列的方式。

           middle  （对内容进行居中对齐（默认值）。）

          bottom  （对内容进行下对齐。）

          baseline   （与基线对齐。）

         注释：基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。

          例如： valign="bottom"

                   valign="baseline"

3. width

   值：pixels或%或像素       规定col元素的宽度。

通常，col 元素占用的空间就是它显示内容需要的空间。width 属性用于为 col 元素设置预定义的宽度。

注释：该属性会覆盖 colgroup 元素中的任何宽度设置。

<colgroup> 标签

定义与用法：

<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。

如需对全部列应用样式，<colgroup> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。

 <colgroup> 标签只能在 table 元素中使用。

提示和注释：

提示：请为 <colgroup> 标签添加 class 属性。这样就可以使用 CSS 来负责对齐方式、宽度和颜色等等。

注释：col 元素是仅包含属性的空元素。如需创建列，您就必须在 tr 元素内部规定 td 元素。

可选属性：

1.span 

   值：number            规定列组应该横跨的列数

2.  valign

     值：top（对内容进行上对齐。）                   定义在列组合中内容的垂直对齐方式。

           middle  （对内容进行居中对齐（默认值）。）

          bottom  （对内容进行下对齐。）

          baseline   （与基线对齐。）

         注释：基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。

          例如： valign="bottom"

                   valign="baseline"

3. width

   值：pixels或%或像素                   规定列组合的宽度。

通常，col 元素占用的空间就是它显示内容需要的空间。width 属性用于为 col 元素设置预定义的宽度。

注释：该属性会覆盖 colgroup 元素中的任何宽度设置。

 

例子：

1.跨行或跨列的表格单元格

本例演示如何定义跨行或跨列的表格单元格。

横跨两列的单元格：

姓名	电话
Bill Gates	555 77 854	555 77 855

 

横跨两行的单元格：

姓名	Bill Gates
电话	555 77 854
	555 77 855

<html>

<body>

<h4>横跨两列的单元格：</h4>
<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>

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

 2. 单元格边距(Cell padding)

 本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

没有 cellpadding：

First	Row
Second	Row

 

带有 cellpadding：

First	Row
Second	Row

<h4>没有 cellpadding：</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有 cellpadding：</h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

3.框架(frame)属性

本例演示如何使用 "frame" 属性来控制围绕表格的边框。

注释：frame 属性无法在 Internet Explorer 中正确地显示。

Table with frame="box":

Month	Savings
January	$100

 

 

Table with frame="above":

Month	Savings
January	$100

 

 

Table with frame="below":

Month	Savings
January	$100

 

 

Table with frame="hsides":

Month	Savings
January	$100

 

 

Table with frame="vsides":

Month	Savings
January	$100

<p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>

<p>Table with frame="box":</p>
<table frame="box">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="above":</p>
<table frame="above">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="below":</p>
<table frame="below">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="hsides":</p>
<table frame="hsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="vsides":</p>
<table frame="vsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>