表格
1、创建表格
(1)table标签用于定义一个表格标签
(2)tr标签用于定义表格中的行,必须嵌套在表格标签中
(3)td用于定义表格中的单元格,必须嵌套在tr标签中。
(4)字母td指表格数据(table data),即数据单元中的内容,表格最合适的地方就是用来存储数据的。
<body>
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
</table>
</body>
2、表格属性
属性名 | 含义 | 常用属性值 |
---|---|---|
border | 设置表格的边框 | 像素值 |
cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值(默认为2像素) |
cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值(默认为1像素) |
width | 设置表格的宽度 | 像素值 |
height | 设置表格的高度 | 像素值 |
align | 设置表格在网页中的水平对齐方式 | left、center、right |
3、表头单元格标签th
作用:一般表头单元格位于表格的第一行或第一列,并且文本加粗居中
语法:用th标签代替td标签
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
4、表格标题标签
定义和语法
<table>
<caption>表格标题</caption>
</table>
5、合并单元格
跨行合并:rowspan=“合并单元格的个数”
跨列合并:colspan=“合并单元格的个数”
<td colspan="2">
合并单元格顺序:先上后下 先左后右
合并单元格三部曲:
1、先确定是跨行还是跨列
2、根据先上后下 先左后右 的原则找到目标单元格,然后写上合并方式和合并数量
3、删除多余的单元格
6、表格划分
表格可以划分为三部分:表格头部,表格主体,表格脚注
标签 | 含义 |
---|---|
<thead></thead> | 用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有<tr> 标签 |
<tbody></tbody> | 用于定义表格的主体。放数据本体 |
<tfoot></foot> | 放表格的脚注之类。 |
以上标签必须放在table标签中 |