表格主要是用于显示、展示数据的。
表格的基本语法:
<table> <!-- 定义表格的标签 -->
<tr>
<td>单元格内的内容</td>
...
</tr>
...
</table>
1.tr 标签 是用于定义表格的行,必须嵌套在table标签中
2.td 标签 是用于定义表格中的单元格, 必须嵌套在 tr 标签中
表头单元格标签 th
一般位于表格的第一行或者第一列,有加粗、居中显示效果。
<table>
<tr>
<th>表头单元格的内容</th>
<td>单元格内的内容</td>
...
</tr>
...
</table>
表格结构标签 thead、tbody
thead 标签 表格的头部区域、tbody 标签 表格的主体区域,使得表格结构更加清晰。
<table>
<thead><tr></tr></thead> <!-- 表头 -->
<tbody>
<tr><td></td><td></td><td></td></tr> <!-- 主体第一行 -->
<tr><td></td><td></td><td></td></tr> <!-- 主体第二行 -->
<tr><td></td><td></td><td></td></tr> <!-- 主体第三行 -->
</tbody>
</table>
(1)table 标签属性
属性 | 描述 |
---|---|
border | 设置表格的边框(默认border="0"为无边框〉 |
cellspacing | 设置单元格与单元格边框之间的空白间距 |
cellpadding | 设置单元格内容与单元格边框之间的空白间距 |
width | 设置表格的宽度 |
height | 设置表格的宽度 |
align | 设置表格在网页中的水平对齐方式 |
bgcolor | 设置表格的背景颜色 |
background | 设置表格的背景图像 |
(2)tr 标签属性
属性 | 描述 |
---|---|
height | 设置行高度 |
align | 设置一行内容的水平对齐方式 |
valign | 设置一行内容的垂直对齐方式 |
bgcolor | 设置行的背景颜色 |
background | 设置行的背景图像 |
(3)td 标签属性
属性 | 描述 |
---|---|
width | 设置单元格的宽度 |
height | 设置单元格的高度 |
align | 设置单元格内容的水平对齐方式 |
valign | 设置单元格内容的垂直对齐方式 |
bgcolor | 设置单元格的背景颜色 |
background | 设置单元格的背景图像 |
colspan | 设置单元格横跨的列数(用于合并水平方向的单元格) |
rowspan | 设置单元格紧跨的行数(用于合并紧直方向的单元格) |
(4)单元格的合并
跨行合并:rowspan=“合并单元格的个数”
跨列合并:colspan=“合并单元格的个数”
合并三步骤:
① 先确定是跨行还是跨列合并;
② 找到目标单元格,写上合并方式 = 合并单元格的数量;
③ 删除目标单元格后/下边需要合并的多余的单元格