一、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:下面是一个横跨两列的表格单元格。