HTML 表格标签

<table>

标签定义及使用说明

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

属性

属性	值	描述
border	1 “”	规定表格单元是否拥有边框，

实例

一个简单的 HTML 表格，包含两列两行：

<table border="1">
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
</table>

<caption>

标签定义及使用说明

• <caption> 标签定义表格的标题。
• <caption> 标签必须直接放置到 <table> 标签之后。
• 您只能对每个表格定义一个标题。
• 提示：通常这个标题会被居中于表格之上，然而，CSS 属性 text-align 和 caption-side 能用来设置标题的对齐方式和显示位置。

<tr>

标签定义及使用说明

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

<th>

标签定义及使用说明

• <th> 标签定义 HTML 表格中的表头单元格。
• HTML 表格有两种单元格类型：
  • 表头单元格 - 包含头部信息（由 <th> 元素创建）
  • 标准单元格 - 包含数据（由 <td>元素创建）
• <th> 元素中的文本通常呈现为粗体并且居中。
• <td> 元素中的文本通常是普通的左对齐文本。

提示和注释

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

属性

属性	值	描述
colspan	number	规定表头单元格可横跨的列数，
headers	header_id	规定与表头单元格相关联的一个或多个表头单元格，
rowspan	number	规定表头单元格可横跨的行数，
scope	col colgroup row rowgroup	规定表头单元格是否是行，列，行组或列组的头部，

<td>

标签定义及使用说明

• <td> 标签定义 HTML 表格中的标准单元格。
• HTML 表格有两种单元格类型：
  • 表头单元格 - 包含头部信息（由<th>元素创建）
  • 标准单元格 - 包含数据（由 <td> 元素创建）
• <th> 元素中的文本通常呈现为粗体并且居中。
• <td> 元素中的文本通常是普通的左对齐文本。

提示和注释

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

属性

属性	值	描述
colspan	number	规定单元格可横跨的列数，
headers	header_id	规定与单元格相关联的一个或多个表头单元格，
rowspan	number	设置单元格可横跨的行数，

<thead>

标签定义及使用说明

• <thead> 标签用于组合 HTML 表格的表头内容。
• <thead> 元素应该与和 元素结合起来使用，用来规定表格的各个部分（表头，主体，页脚）
• 通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动，当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
• <thead> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>,<colgroup> 元素之后，<tbody>, <tfoot> 和 <tr> 元素之前。

提示和注释

• 注释:<thead> 元素内部必须包含一个或者多个 <tr> 标签。
• 提示:<thead>,<tbody> 和<tfoot> 元素默认不会影响表格的布局，不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

<tbody>

标签定义及使用说明

• <tbody> 标签用于组合 HTML 表格的主体内容。
• <tbody> 元素应该与 and 元素结合起来使用，用来规定表格的各个部分（主体，表头，页脚）
• 通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动，当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
• <tbody> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>,<colgroup> 和 <thead> 元素之后。

提示和注释

• 注释:<tbody> 元素内部必须包含一个或者多个 <tr> 标签。
• 提示:<thead>,<tbody> 和 <tfoot> 元素默认不会影响表格的布局，不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

<tfoot>

标签定义及使用说明

• <tfoot> 标签用于组合 HTML 表格的页脚内容。
• <tfoot> 元素应该与和 元素结合起来使用，用来规定表格的各个部分（页脚，表头，主体）
• 通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动，当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
• <tfoot> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>,<colgroup> 和 <thead> 元素之后，<tbody> 和 <tr> 元素之前。

提示和注释

• 注释:<tfoot> 元素内部必须包含一个或者多个 <tr> 标签。
• 提示:<thead>,<tbody> 和 <tfoot> 元素默认不会影响表格的布局，不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

<col>

标签定义及使用说明

• <col> 标签规定了元素内部的每一列的列属性。
• 通过使用 <col> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。

属性

元素应该横跨的列数，

属性	值	描述
span	number	规定

实例

<colgroup> 和 <col> 标签为表格中的三个列设置了背景色：

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

<colgroup>

标签定义及使用说明

• <colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。
• 通过使用 <colgroup> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。
• 注释：只能在 <table> 元素之内，在任何一个 <caption> 元素之后，在任何一个 <thead>,<tbody>,<tfoot>,<tr> 元素之前使用 <colgroup> 标签。
• 提示：如果想对<colgroup> 中的某列定义不同的属性，请在 <colgroup> 标签内使用标签。

属性

属性	值	描述
span	number	规定列组应该横跨的列数，