HTML表格

一、HTML 表格介绍

HTML 表格由 <table> 标签来定义。

一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。

<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。

记忆方法：

• tr是table row的缩写 （表格中的一行）
• th是table header cell的缩写 （表格中的表头）
• td是table data cell的缩写 （表格中的一个单元格）

实例：下面是一个包含两行三列的表格。

快捷键：

在vscode中快速生成表格结构：table>tr*2>td*2（需要几行几列数字就换成相应的）

表格属性

• border：设置表格的边框
• width：设置表格的宽度
• height：设置表格的高度

实例：

二、HTML表格标签

HTML 表格常用的标签有 <table>、<tr>、<th>、<td> 标签。

更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 标签，我们只需要大概了解一下定义。

下面是 HTML 表格标签描述列表：

标签	描述
<table>	定义表格
<th>	定义表格的表头（表头单元格）
<tr>	定义表格的行
<td>	定义表格单元（标准单元格）
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

注意：

• <thead>、<tbody>、<tfoot>一般只用在表格结构复杂的时候，将表格分割成题头、正文以及脚注。
• 在使用了 <thead>、<tbody>、<tfoot>后，表格是“从头到脚”显示。也就是说，不论<thead>放在哪，都优先显示<thead>，再以此类推往下加载。

三、HTML 表格表头

HTML 表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本。

实例：下面是一个带有表头的表格。

四、HTML 合并单元格

HTML 合并单元格也称为表格的跨行跨列。

rowspan 属性定义单元格应该横跨的行数，如 rowspan=2，表示横跨两行。

colspan 属性定义单元格应该横跨的列数，如 colspan=4，表示横跨四列。

实例1：下面是一个横跨两行的表格单元格。

实例2：下面是一个横跨两列的表格单元格。