表格的主要作用
- 表格主要用来展示数据的,因为它可以让数据显示得非常规整,可读性非常好。
表格的基本语法
<table></table>:用于定义表格的标签;
<tr></tr>:用于定义表格的行,必须嵌套在<table></table>标签中;
<td></td>:用于定义表格中的单元格,必须嵌套<tr></tr>标签中。
表头单元格标签
<th>
作用:用于表示HTML表格的表头部分,突出重要性;
注意:一般表头单元格位于表格的第一行或第一列,并且单元格里面的文本内容通常是加粗居中显示的。
表格相关属性
属性名 | 属性值 | 说明 |
align | Left、center、right | 规定表格相对周围元素的对齐方式 |
border | 1或"" | 规定表格单元是否拥有边框,默认为"",表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认1像素 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素 |
width | 像素值或百分比 | 规定表格的宽度 |
- 实际上,表格标签这部分的属性我们并不常用,后面主要是通过CSS来设置。
表格结构标签
- 为了更好的表示表格的语义,我们有必要学习表格的结构标签
<thead></thead>:用于定义表格的头部,并且内部必须拥有<tr>标签。一般是位于第一行
<tbody></tbody>:用于定义表格的主体,主要用于放数据本体。
注意:以上标签都是放在<table></table>标签中。
合并单元格
- 合并单元格的方式:
- 跨行合并:rowspan=“合并单元格的个数”;
- 跨列合并:colspan=“合并单元格的个数”
- 目标单元格
- 跨行:最上侧的单元格为目标单元格;
- 跨列:最左侧的单元格为目标单元格
- 合并单元格的步骤:
(1)先确定是跨行合并还是跨列合并;
(2)找到目标单元格,写上合并方式;
(3)删除多余的单元格