HTML表格制作全攻略

HTML 表格由<table>标签定义，包含行（<tr>）、表头单元格（<th>）和普通单元格（<td>）。

<table> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>行1列1</td> <td>行1列2</td> </tr> <tr> <td>行2列1</td> <td>行2列2</td> </tr> </table>

表格常用属性

• 边框：通过border属性设置边框粗细（已过时，建议用 CSS）。
• 合并单元格：
  • colspan：横向合并列。
  • rowspan：纵向合并行。

    <table border="1"> <tr> <th colspan="2">合并的表头</th> </tr> <tr> <td rowspan="2">合并的行</td> <td>行1列2</td> </tr> <tr> <td>行2列2</td> </tr> </table>

HTML 表格模板结构

在 HTML 中，表格通常由<table>标签定义，包含三个主要部分：<thead>、<tbody>和<tfoot>。以下是标准的表格模板结构：

• <thead>的作用

• <thead>用于定义表格的标题行，通常包含<th>标签表示列标题。浏览器会将<thead>内容单独处理，适合打印或分页时重复显示标题。

• <tbody>的作用

• <tbody>包含表格的主体数据，由多个<tr>（行）和<td>（单元格）组成。一个表格可以有多个<tbody>，用于逻辑分组数据。

• <tfoot>的作用

• <tfoot>定义表格的页脚，通常用于汇总或统计信息。尽管在代码中可放在<tbody>前，但浏览器会始终将其渲染在表格底部。

<table> <thead> <tr> <th>标题1</th> <th>标题2</th> </tr> </thead> <tbody> <tr> <td>数据1</td> <td>数据2</td> </tr> </tbody> <tfoot> <tr> <td>汇总1</td> <td>汇总2</td> </tr> </tfoot> </table>