从0开始学前端第四课：HTML表格内容元素-CSDN博客

本文链接：https://blog.csdn.net/weixin_44738632/article/details/135817812

第四课：HTML表格内容元素

学习目标

在本课中，我们将专注于以下内容：

理解HTML表格的基本概念和作用。
学习创建表格的标签<table>、<tr>、<th>、<td>。
掌握使用表头<thead>、表身<tbody>以及表脚<tfoot>。
理解并使用<col>和<colgroup>标签以及它们的属性。
学习表格的合并单元格技巧，使用rowspan和colspan属性。

学习内容

1. HTML表格基本概念
HTML表格用于在网页上展示数据。表格由行（Rows）和列（Columns）构成，便于阅读和理解。

2. 创建表格的标签

<table>: 定义表格的开始和结束。
<tr>: 宨ble Row，表格的一行。
<th>: Table Header，表格的标题单元格，文本默认加粗且居中。
<td>: Table Data，表格的标准单元格，用于放置数据。

代码示例:

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

预计输出效果:
一个有两列（姓名和年龄）和两行数据（张三、30 和李四、28）的表格。

3. 使用表头、表身、表脚

<thead>: 定义表格的头部区域，通常包含标题行。
<tbody>: 定义表格的主体部分，包含所有的数据行。
<tfoot>: 定义表格的尾部区域，通常用来总结表格的信息。

4. <col>和<colgroup>标签

<col>: 允许你对表格中的一列或多列设置共同的属性。
<colgroup>: 用于对表格中的一组列进行分组，并设置共同的属性。

代码示例:

<table>
  <colgroup>
    <col style="background-color: #ffff99;">
    <col style="background-color: #99ff99;">
  </colgroup>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>30</td>
  </tr>
</table>

预计输出效果:
一个表格，第一列的背景色为黄色，第二列的背景色为绿色。

5. 合并单元格

rowspan: 使一个单元格横跨多行。
colspan: 使一个单元格横跨多列。

代码示例:

<table>
  <tr>
    <th rowspan="2">姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>30</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
  </tr>
</table>

预计输出效果:
一个表格，其中“姓名”这一标题单元格横跨两行。

课后练习

创建一个三列四行的表格，分别表示商品的名称、价格和数量。
使用<thead>、<tbody>和<tfoot>，在表格底部添加一行显示所有商品的总数量。
设置第一列的宽度为200px，并设置表头单元格的背景颜色。

课后练习解析

使用<table>、<tr>、<th>、<td>创建基础表格结构。
分别在<thead>中定义标题行，在<tbody>中定义商品数据，在<tfoot>中计算总数量。
利用<colgroup>和<col>设置第一列的宽度，使用内联样式为表头单元格设置背景色。

示例代码:

<table>
  <colgroup>
    <col style="width: 200px;">
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th style="background-color: #e0e0e0;">商品名称</th>
      <th>价格</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>苹果</td>
      <td>5</td>
      <td>10</td>
    </tr>
    <tr>
      <td>香蕉</td>
      <td>3</td>
      <td>20</td>
    </tr>
    <tr>
      <td>橙子</td>
      <td>4</td>
      <td>15</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2" style="text-align: right;">总数量</td>
      <td>45</td>
    </tr>
  </tfoot>
</table>