HTML表格

HTML表格是一种用于在网页上显示数据的强大工具，它们可以用于展示各种类型的信息，如产品目录、价格列表、用户反馈等，HTML表格由<table>标签定义，每个表格行由<tr>标签定义，表格单元格由<td>标签定义。

创建一个简单的HTML表格

我们需要创建一个<table>标签，这个标签是所有其他表格元素的容器，我们可以在这个标签内部添加多个<tr>标签，每个<tr>标签代表一个表格行，在每个<tr>标签内部，我们可以添加多个<td>标签，每个<td>标签代表一个表格单元格。

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

<table>
  <tr>
    <td>苹果</td>
    <td>香蕉</td>
    <td>橙子</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

在这个示例中，我们创建了一个包含两行的表格，第一行有三个单元格，分别包含"苹果"、"香蕉"和"橙子"，第二行也有三个单元格，分别包含数字"1"、"2"和"3"。

添加表格标题和表头

我们可以使用<caption>标签为表格添加标题，使用<th>标签为表头单元格添加特殊样式，以下是一个包含标题和表头的HTML表格示例：

<table>
  <caption>水果价格表</caption>
  <tr>
    <th>水果</th>
    <th>价格</th>
  </tr>
  <tr>
    <td>苹果</td>
    <td>1元/个</td>
  </tr>
  <tr>
    <td>香蕉</td>
    <td>0.5元/个</td>
  </tr>
  <tr>
    <td>橙子</td>
    <td>1.5元/个</td>
  </tr>
</table>

在这个示例中，我们添加了一个标题"水果价格表"，并使用<th>标签为表头单元格添加了加粗样式，这样，用户可以更容易地理解表格的内容。

使用CSS美化HTML表格

虽然HTML表格的基本结构很简单，但我们可以使用CSS来美化它们，我们可以设置表格的边框、背景颜色、字体大小等，以下是一个使用CSS美化的HTML表格示例：

<style>
  table {
    border-collapse: collapse; /* 合并边框 */
    width: 100%; /* 设置宽度 */
    background-color: #f2f2f2; /* 设置背景颜色 */
    font-family: Arial, sans-serif; /* 设置字体 */
  }
  th, td {
    border: 1px solid #ddd; /* 设置边框 */
    padding: 8px; /* 设置内边距 */
    text-align: center; /* 设置文本对齐方式 */
  }
  th {
    background-color: #4CAF50; /* 设置表头背景颜色 */
    color: white; /* 设置表头文字颜色 */
  }
</style>
<table>
  <caption>水果价格表</caption>
  <tr>
    <th>水果</th>
    <th>价格</th>
  </tr>
  <tr>
    <td>苹果</td>
    <td>1元/个</td>
  </tr>
  <tr>
    <td>香蕉</td>
    <td>0.5元/个</td>
  </tr>
  <tr>
    <td>橙子</td>
    <td>1.5元/个</td>
  </tr>
</table>

在这个示例中，我们使用CSS设置了表格的边框、背景颜色、字体等样式，这样，我们的表格看起来更加美观和专业。