您的位置:首页 > 其它

表格常使用记录二

2017-01-25 15:55 162 查看
补充前面学习的内容。

在网页中编写<table>表格之后,通过我们的浏览器浏览网页源代码时,会发现我们的<table>中多了<tbody>标签,这是浏览器自动添加的标签,但这也说明我们的表格标签没有写完整。但是在企业开发中不会用到表格的完整格式,所以这部分可以当做了解不用掌握。

一个表格的完整格式包括:表头信息<thead>、主要内容<tbody>、表尾信息<tfoot>。

这三个标签中都含有<tr>行标签,一般我们在<thead>表头的行内使用<th>标签。

<tbody>和<tfoot>的行里使用<td>标签。

最后还有就是关于单元格合并的问题,在HTML中,表格的单元格并不存在合并单元格的问题,但是可以通过让单元格同时占用多个空间来实现同样的效果。

在行里面,我们想要实现几个单元格合并的效果,可以通过在需要的<td>中添加colspan属性,colspan属性的属性值代表着该单元格要占用多少个单元格的空间,如果此时规定表格是三行三列的,而我们将第一个单元格的colspan属性的属性值设置为 2 ,那么这个时候这个单元格将会占用两个单元格的位置,我们需要手动删除第一行中多余出来的单元格,这样才不会使表格变形。

在列里面,我们想要实现几个单元格的合并效果,我们需要为<td>添加rowspan标签,rowspan属性的属性值代表着该单元格要占用多少行级单元格的位置。所以我们在设置这个值得时候得清楚知道我们表格的行和列的变化情况,因为这个属性将会让对应列的所有行都向下移动,当我们设置rowspan的属性值为 2 时,我们需要在其他的行中删除多余出来的单元格,才能使表格不变形。

所以我们的表格应该包括以下的结构

<table>

<caption></caption>

<thead><tr><th></th></tr></thead>

<tbody><tr><td></td></tr></tbody>

<tfoot><tr><td></td></tr></tfoot>

</table>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息