6 / 14

表格

在网页开发中，表格（Table）是一种用于结构化和展示数据的核心工具。通过表格，我们可以将大量信息按照行（row）与列（column）的方式有序排列，使数据的对比、归类和查阅变得高效且直观。无论是财务报表、课程安排，还是产品清单，表格都能帮助我们以专业的方式呈现复杂内容。

表格的基础架构

在HTML表格中，主要有四个基础标签，各自承担不同的功能：

标签名	作用描述
`<table>`	表格的整体容器
`<tr>`	表格中的一行
`<th>`	表头单元格，显示列标题
`<td>`	普通数据单元格，放具体内容

通过这四个标签的配合，可以将数据在网页上有序地展示。

|
<!DOCTYPE html>                    <!-- 声明HTML5文档类型 -->
<html>                             <!-- HTML文档根元素 -->
  <head>                          <!-- 文档头部 -->
    <meta charset="UTF-8">        <!-- 设置字符编码 -->
    <title>我们的表格示例</title>   <!-- 页面标题 -->
  </head>                         <!-- 头部结束 -->
  <body>                          <!-- 文档主体开始 -->
    <h1>探索表格的世界</h1>       <!-- 主标题 -->
 
    <!-- 基础表格示例 -->
    <table border="1">            <!-- 表格容器，开始定义表格 -->
      <tr>                        <!-- 第一行开始 -->
        <th>菜品名称</th>         <!-- 表头单元格：菜品名称 -->
        <th>烹饪时间</th>         <!-- 表头单元格：烹饪时间 -->
        <th>难度等级</th>         <!-- 表头单元格：难度等级 -->
      </tr>                       <!-- 第一行结束 -->
      <tr>                        <!-- 第二行开始 -->
        <td>番茄炒蛋</td>         <!-- 数据单元格：菜品 -->
        <td>15分钟</td>           <!-- 数据单元格：时间 -->
        <td>简单</td>             <!-- 数据单元格：难度 -->
      </tr>                       <!-- 第二行结束 -->
      <tr>                        <!-- 第三行开始 -->
        <td>红烧肉</td>           <!-- 数据单元格：菜品 -->
        <td>60分钟</td>           <!-- 数据单元格：时间 -->
        <td>中等</td>             <!-- 数据单元格：难度 -->
      </tr>                       <!-- 第三行结束 -->
    </table>                      <!-- 表格容器结束 -->
 
  </body>                         <!-- 文档主体结束 -->
</html>                           <!-- HTML文档结束 -->

在上述示例中，我们构建了一个基础的烹饪信息表格。<table>标签作为表格的整体容器，负责承载所有表格数据。<tr>标签用于定义表格中的每一行，确保数据有序排列。<th>标签专用于表头单元格，通常以加粗样式呈现，便于用户快速识别各列的含义。 <td>标签则用于存放具体的数据内容，是表格中最常用的数据单元格。通过这些标签的协作，能够实现结构清晰、信息明了的数据展示。

语义化表格

为了让我们的表格不仅仅好看，还要让浏览器和搜索引擎更好地理解数据，HTML提供了语义化的表格结构标签。这些标签就像给表格添加了清晰的标签，让每个人都能快速找到自己需要的信息。

|
<article>
  <h2>社区读书会活动安排</h2>
 
  <table border="1">              <!-- 表格开始 -->
    <thead>                       <!-- 表头区域开始 -->
      <tr>                        <!-- 表头行 -->
        <th>活动主题</th>         <!-- 活动主题列 -->
        <th>日期时间</th>         <!-- 时间列 -->
        <th

在这个例子里，<thead>标签包裹了表头部分，就像书的目录一样告诉我们每列包含什么信息。<tbody>标签包含了主要的数据，就像书的内容主体。而<tfoot>标签则提供了汇总信息，让我们一眼就能看到总体的统计数据。

单元格合并

有时候，我们的数据结构比较特殊，需要打破常规的格子排列。这时候，单元格合并就能派上用场了。它让我们能够跨越多个行或列，创建出更加灵活的布局。

|
<section>
  <h2>家庭健身计划表</h2>
 
  <table border="1">
    <thead>
      <tr>
        <th>时间段</th>
        <th colspan="3">本周健身安排</th>  <!-- 横跨三列 -->
      </tr>
      <

在这个健身计划表中，我们使用了colspan="3"让“本周健身安排”跨越三列的宽度，也用了rowspan="2"让“上午”跨越两行的高度。这样就创建出了一个既清晰又紧凑的表格布局。

表格的样式美化

其实，虽然HTML本身提供了一些属性，比如border、cellpadding、cellspacing等，可以简单地调整表格的外观，但这些方法比较有限。如果我们想让表格看起来更美观、更有层次感，甚至实现斑马纹、悬停高亮等效果，单靠HTML属性就远远不够了。现代网页开发中，我们通常会借助CSS来对表格进行细致的美化和布局调整。当然，我们现在不必太过深入，你可以在学完我们的HTML课程后在去学习CSS课程。

|
<style>
  /* 表格基础样式 */
  .data-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Arial', sans-serif;
    margin: 20px 0;
  }
 
  /* 表头样式 */
  .data-table th {
    background-color: #f8f9fa;
    color

在设计表格时，我们要尽量让内容简单明了，避免信息堆砌，同时合理使用像thead、tbody、tfoot这样的语义化标签，让结构更清晰。最重要的是，表格始终要以数据的清晰呈现为核心，这样才能真正发挥它的作用。

通过掌握表格的创建和优化技巧，我们现在可以用结构化的方式来展示各种数据了。无论是家庭预算、项目进度，还是产品对比，表格都能帮我们把复杂的信息变得清晰易懂。在下一部分，我们将继续探索表单元素的学习，让我们的网页变得更加互动和实用。

表格 | 自在学