HTML表格标签
1.表格的主要作用
显示展示数据,表格不是用来布局页面的,而使用来展示数据的。
2.表格的主要语法
<table>
<tr>
<td>单元格的文字</td>
...
<tr>
<table>
(1)<table>用来定义表格标签。
(2)<tr>标签用于定义表格中的行,必须嵌套在<table>标签中。
(3)<td>用于定义表格中的单元格,必须嵌套在<tr>中。
(4)字母td指的是表格数据(table data),即数据单元格中的内容。
3.表头单元格标签
一般的表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容 加粗 居中 显示
<th>标签表示HTML表格的表头部分(table head的缩写)
<table>
<tr>
<th>姓名<th>
...
</tr>
</table>
4.表格属性
表格标签这部分实行我们实际不常用,后面通过CSS来设置
目的有两个:
1.记住这些英语单词,后面的CSS会使用。
2.直观的感受表格的外观形态。
属性名 属性值 描述
align left center 规定表格相对周围元素的对齐方式
border 1或者"" 边框
celloandding 像素值 规定单元边沿与其内容之间的空白,默认1像素。
cellspacing 像素值 规定单元格之间的空白,默认2像素。
width 像素值或百分比 规定表格宽度
5.表格的结构标签
使用场景:因为表格可能很长,为了更好地表示表格的语义,可以将表格分割成表格头部和表格主体两大部分。
<thead>标签表格的头部区域,<tbody>标签 表格的主体区域 这样可以更好地风情表格结构
6.合并单元格
特殊情况下,可以把多个单元格合并为一个单元格
(1)合并单元格的方式
跨行合并:rowspan=“合并单元格的个数”
跨列合并:colspan=“合并单元格的个数”
(2)目标单元格
跨行:最上侧单元格为目标单元格 写合并代码。
跨列: 最左侧的单元格为目标的单元格,写合并代码。
(3)合并单元格的步骤。
合并单元格三步曲:
1.先确定是跨行还是跨列合并
2.找到目标单元格 写上合并方式。比如<td colspan = "2"> </td>.
3.删除多余单元格