垦荒学园
  • 中文

      • HTML 表格

      HTML 表格用于以行和列的网格形式来展示数据。表格在展示结构化数据（如财务报告、学生成绩单、产品对比等）时非常有用。

      表格的基本结构

      一个基本的 HTML 表格由以下几个核心标签构成：

      • <table>: 定义整个表格的容器。
      • <tr> (Table Row): 定义表格中的一行。
      • <td> (Table Data): 定义一个单元格。单元格是放置数据的地方。

      示例:

      <table>
  <tr>
    <td>单元格 1.1</td>
    <td>单元格 1.2</td>
  </tr>
  <tr>
    <td>单元格 2.1</td>
    <td>单元格 2.2</td>
  </tr>
</table>

      默认情况下，表格没有边框。你需要使用 CSS 来添加边框和其他样式。

      table, th, td {
  border: 1px solid black;
  border-collapse: collapse; /* 合并边框 */
}
th, td {
  padding: 8px; /* 添加内边距 */
}

      表格标题 <th>

      <th> (Table Header) 标签用于定义表头单元格。它和 <td> 的用法类似，但其内容在语义上是这一列或这一行的标题。

      浏览器通常会以粗体和居中的样式来显示 <th> 的内容。

      <table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

      跨行与跨列

      有时候，一个单元格需要占据多行或多列的空间。这可以通过 rowspan 和 colspan 属性来实现。

      • colspan (Column Span): 让一个单元格横跨指定的列数。
      • rowspan (Row Span): 让一个单元格纵跨指定的行数。

      示例:

      <table>
  <tr>
    <th>姓名</th>
    <th colspan="2">联系方式</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>电话</td>
    <td>12345</td>
  </tr>
  <tr>
    <td rowspan="2">李四</td>
    <td>电话</td>
    <td>67890</td>
  </tr>
  <tr>
    <td>邮箱</td>
    <td>lisi@example.com</td>
  </tr>
</table>

      更具语义的表格结构

      为了让表格的结构更清晰，特别是对于复杂的表格，HTML 提供了 <thead>、<tbody> 和 <tfoot> 三个标签来分别定义表格的头部、主体和脚部。

      • <thead>: 用于包裹表头行 (<tr> 包含 <th>)。
      • <tbody>: 用于包裹表格的主体数据行。
      • <tfoot>: 用于包裹表格的脚注或总结行。

      这三个标签对于浏览器和辅助技术（如屏幕阅读器）更好地理解表格结构非常有帮助。一个表格中，<thead> 和 <tfoot> 只能各有一个，但 <tbody> 可以有多个。

      <table>
  <thead>
    <tr>
      <th>产品</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>苹果</td>
      <td>$1</td>
    </tr>
    <tr>
      <td>香蕉</td>
      <td>$0.5</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总计</td>
      <td>$1.5</td>
    </tr>
  </tfoot>
</table>