表格嵌套网页案例_使用表格嵌套和样式表实现如附件3-2.jpg所示的旅游路线推荐页面,所需图片资源在附

作者：菜鸟追梦旅行 | 2024-02-13 13:41:01

踩

使用表格嵌套和样式表实现如附件3-2.jpg所示的旅游路线推荐页面,所需图片资源在附

样式

在这里插入图片描述
代码

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="author" content="huyiwei">
		<meta name="generator" content="HBuilder X">
		<title>
			表格嵌套
		</title>
		<style type="text/css">
			ul{
				list-style-type:none;
			}
			li{
				width:80px;
				background:#00ccff;
			}
			p{
				text-indent:2em;
				font-size:16px;
			}
		</style>
	</head>
	<body>
		<h4 align="center">
			表格嵌套
		</h4>
		<table width="660px" border="1" align="center" bordercolor="#3333ff">
			<tr>
				<td width="170px">
					&nbsp;
				</td>
				<td width="360px" rowspan="3">
					<p>
						地铁4号线横穿南京，从河西到仙林，起点龙江站。根据施工计划，龙江片区要掏一个深达20多米、
						长520米的地铁枢纽站。目前，车站已经完成70%的体量，剩余的30%，将是建设难度最大的部分。
						昨天，地铁施工方特意“打招呼”：为了安全，下月起将加大围挡范围，可能影响到部分商户经营及
						市民的出行，至少要3个月。据介绍，4号线计划明年底通车。
					</p>
				</td>
				<td width="120">
					新闻链接
				</td>
			</tr>
			<tr>
				<td>
					<table width="100%" border="1" bordercolor="#33ff99">
						<tr>
							<td>
								科技
							</td>
						</tr>
						<tr>
							<td>
								财经
							</td>
						</tr>
						<tr>
							<td>
							  探索
							</td>
						</tr>
					</table>
				</td>
				<td rowspan="2">
					<ul>
						<li>
							<a href="http://www.baidu.com">
								百度
							</a>
						</li>
						<li>
							<a href="http://www.163.com">
								网易
							</a>
						</li>
						<li>
							<a href="http://www.sina.com">
								新浪
							</a>
						</li>
						<li>
							<a href="http://www.sohu.com">
								搜弧
							</a>
						</li>
					</ul>
				</td>
			</tr>
			<tr>
				<td>
					&nbsp;
				</td>
			</tr>
		</table>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/80136