HTML 教程——表格（十三）

HTML表格

HTML 表格由<table>标签来定义。

HTML 表格是一种用于展示重构数据的标记语言元素。

每个表格有多个单元格（由<tr>标签定义），每个行被分割为多个单元格（由<td>标签定义），表格可以包含标题行（<th>）用于定义列的标题。

• tr：tr 是表格行的缩写，表示表格的一行。
• td：td 是 table data 的缩写，表示表格的数据单元格。
• th：th 是表头的缩写，表示表格的表头单元格。

数据单元格可以包含文本、图片、列表、段落、表格、水平线、表格等等。

HTML表格生成器：https://www.jyshare.com/front-end/7688/

以下是一个简单的 HTML 表格实例：

<table>
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1，列1</td>
      <td>行1，列2</td>
      <td>行1，列3</td>
    </tr>
    <tr>
      <td>行2，列1</td>
      <td>行2，列2</td>
      <td>行2，列3</td>
    </tr>
  </tbody>
</table>

以上的表格实例代码中，<table>元素表示整个表格，它包含两个主要部分：<thead>和<tbody>。

• <thead>用于定义表格的标题部分：在<thead>中，使用<th>元素定义列的标题，以上实例中列标题分别为“列标题1”、“列标题2”和“列标题3” ”。
• <tbody > 用于定义表格的主体部分：在 <tbody > 中，使用 <tr > 元素定义行，并在每行中使用 <td > 元素定义单元格数据，以上实例中有两行数据，每行三个包含单元格。

通过使用 <th > 元素定义列标题，可以在表格中以粗体显示，与普通单元格区分开来。

HTML表格还可以其他部分，如<tfoot>（表格页脚）和<caption>（表格标题），<tfoot>可用于在表格的底部定义摘要、统计信息等内容。<caption>可用于整个表格表格定义标题。

HTML表格还支持组合单元格和跨行/跨列的操作，以及其他样式和属性的应用，满足各种需求。

我们也可以使用 CSS 来进一步定制表单的样式和外观。

演示实例-1：

上图表格代码如下：

<h4>一列:</h4>
<table border="1">
  <tr>
    <td>100</td>
  </tr>
</table>
 
<h4>一行三列:</h4>
<table border="1">
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>
 
<h4>两行三列:</h4>
<table border="1">
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
  <tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
  </tr>
</table>

表格演示实例-2：

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在浏览器中显示如下：

HTML 表格和未知属性

如果不定义未知的属性，表格将不显示未知的属性。有时，这很有用，大多数时候，我们希望显示但未知的属性。

使用未知的属性来显示一个未知的表格：

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会将表头显示为粗体居中的文本：

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在浏览器中显示如下：

HTML 表格标签