table标签经典案例，综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】
table标签经典案例，综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】
刘金玉编程
发布于 2020-12-07 12:03:10
发布于 2020-12-07 12:03:10
html表格的使用价值：
html表格的掌握对于很多页面的排版都非常重要，尤其做数据的排版用得非常多，因为比较简便，数据的加载速度也非常快。
html网页表格通常也用于各种表单数据提交类型的页面，可以实现更好的页面展示效果。
本文最终效果说明：
说明：其中数字1、3、4单元格实现合并两行。 数字11实现合并两列。
这个表格练习，充分考量了一个开发人员对表格类型标签的掌握程度，可在此基础上实现更为复杂的表格。
我们对于表格中行合并与列合并的操作都是用在td或者th这样的列单元格标签上的。
当前一格有行合并效果是，后一格默认单元格占据一行。
界面效果：
源代码分享：
<html>
<head>
<title>网页表格练习</title>
<style>
table{
border:1px solid black;/*表格边线*/
border-collapse:collapse; /*折叠*/
}
table tr td{
border:1px solid black;
padding:0 10px; /*单元格上下空开10px*/
text-align:center; /*文字居中*/
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td>10</td>
</tr>
<tr>
<td rowspan="2">4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>7</td>
<td colspan="2">11</td>
</tr>
</table>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-12-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读