（一）HTML表单/表单——表格

最新推荐文章于 2023-06-13 09:44:45 发布

野猫WildCat

最新推荐文章于 2023-06-13 09:44:45 发布

阅读量243

点赞数

本文链接：https://blog.csdn.net/k123ook/article/details/106104749

版权

表格标签

表格标签
table	表格
thead	表格头
tbody	表格主体
th	表格定义表头
tr	表格行
td	表格定义表格单元

表格样式重置

table{border-collapse: collapse;} 表格单元间隙合并
th,td{padding: 0} 重置单元格默认填充

单元格合并

colspan 属性规定单元格可横跨的列数。
rowspan 属性规定单元格可横跨的行数。

表格实例-天气指数

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
	<style>
		table{border-collapse: collapse;}
		th,td{padding: 0;text-align: center;}
		th{background-color: #dce3f8}
		tr{height: 40px;font-size:18px/40px;}
		img{width: 49px;height: 36px;}
	
	
	</style>
</head>

<body>
	<table align="center" border="1px" bordercolor="#bcc8e3">
		<tr>
			<th colspan="2" width="220">日期</th>
			<th colspan="2" width="225">天气现象</th>
			<th width="125">气温</th>
			<th width="125">风向</th>
			<th width="125">风力</th>
		</tr>
		<tr>
			<td rowspan="2" bgcolor="#f4f7fb">22日星期五</td>
			<td bgcolor="#f4f7fb">白天</td>
			<td><img src="../1-图片/晴朗.png"></td>		
			<td>晴间多云</td>		
			<td><font color="#e6591a">高温7°C</font></td>
			<td>无持续风向</td>
			<td>微风</td>
		</tr>
		<tr>
			<td bgcolor="#f4f7fb">夜间</td>
			<td><img src="../1-图片/夜晚.png"></td>
			<td>晴</td>
			<td>低温-4°C</td>
			<td>无持续风向</td>
			<td>微风</td>
		</tr>
	
	</table>
</body>
</html>

下面是代码中所用的图片：
在这里插入图片描述

最后的显示结果如图所示：