HTML 表格

HTML 表格是用来在网页上展示数据的常用元素。表格由行和列组成，其中行被定义为 <tr> 元素，列被定义为 <td> 元素。

基本的 HTML 表格

以下是一个基本的 HTML 表格的例子：

<table>
  <tr>
    <td>行1，列1</td>
    <td>行1，列2</td>
  </tr>
  <tr>
    <td>行2，列1</td>
    <td>行2，列2</td>
  </tr>
</table>

这个例子创建了一个包含两行两列的表格，其中每个单元格都包含一些文本。

表格标题

为了更好地描述表格中的内容，还可以使用 <caption> 元素添加一个表格标题：

<table>
  <caption>2019年度销售额</caption>
  <tr>
    <td>产品名称</td>
    <td>销售额</td>
  </tr>
  <tr>
    <td>产品1</td>
    <td>$1000</td>
  </tr>
  <tr>
    <td>产品2</td>
    <td>$2000</td>
  </tr>
</table>

表头

表头通常用于描述表格中每列的内容。在 HTML 中，表头可以使用 <th> 元素表示。

以下是一个带有表头的例子：

<table>
  <caption>2019年度销售额</caption>
  <tr>
    <th>产品名称</th>
    <th>销售额</th>
  </tr>
  <tr>
    <td>产品1</td>
    <td>$1000</td>
  </tr>
  <tr>
    <td>产品2</td>
    <td>$2000</td>
  </tr>
</table>

合并单元格

如果需要在表格中合并单元格，可以使用以下属性：

• colspan - 合并列
• rowspan - 合并行

以下是一个合并单元格的例子：

<table>
  <tr>
    <td>行1，列1</td>
    <td>行1，列2</td>
  </tr>
  <tr>
    <td colspan="2">合并行2和列1</td>
  </tr>
</table>

样式调整

可以使用 CSS 来调整表格的样式，例如设置表格的宽度、字体大小、表格边框等。

以下是一个简单的 CSS 样式表示例：

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 8px;
}

th {
  background-color: #ddd;
  font-weight: bold;
}

总结

在 HTML 中创建表格非常简单，只需使用 <table>、<tr> 和 <td> 元素即可。可以使用表格标题、表头和合并单元格来更好地描述表格中的内容。还可以使用 CSS 来调整表格的样式。