html table表格

### HTML `table` 标签用法及示例

#### 表格基本结构
HTML中的表格由 `<table>` 标签定义，用于创建数据展示的网格。表格内部通过一系列特定标签构建其组成部分：

- **<table>**: 定义整个表格容器。
- **<tr>**: 表示表格的一行 (Table Row)。
- **<td>**: 描述表格的一个单元格 (Table Data)，通常位于<tr>内。

为了更好地控制列宽和其他样式，还可以使用如下标签：
- **<th>**: 类似于<td>, 不过表示的是表头单元格(Table Header), 默认会加粗居中文本[^2]。
- **<thead>**, **<tbody>**, 和 **<tfoot>**: 这些标签分别用来分隔表格头部、主体以及脚部的内容，在大型复杂表格中特别有用[^3]。

#### 列设置与优化
除了上述基础组件外，还有两个专门针对列处理的重要标签：<col> 和 <colgroup>。它们允许开发者一次性设定多列共享的视觉特性而不必逐个调整每个单元格。具体来说，
- **<colgroup>** 可以包含多个<col>子元素，从而实现更灵活精细地管理不同区域内的列外观[^1]。

#### 实际应用案例
下面给出一段简单的HTML代码片段作为例子，展示了如何利用这些标签搭建一个具有三列表头和两行记录的小型表格:

<table border="1">
    <!-- 使用 colgroup 来指定各列宽度 -->
    <colgroup>
        <col style="width: 25%;">
        <col span="2" style="width: 37.5%;">
    </colgroup>

    <!-- thead 部分 -->
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email Address</th>
        </tr>
    </thead>

    <!-- tbody 部分 -->
    <tbody>
        <tr>
            <td>001</td>
            <td>John Doe</td>
            <td>johndoe@example.com</td>
        </tr>
        <tr>
            <td>002</td>
            <td>Jane Smith</td>
            <td>janesmith@sample.org</td>
        </tr>
    </tbody>
</table>

此段代码不仅实现了基本的数据呈现功能，还运用了额外的技术手段增强了用户体验——比如设置了合理的默认边框(`border`)属性以便清晰区分各个部分；并通过<colgroup><col/>...</colgroup>组合精确配置每列所占空间比例[^4]。