HTML学习——简单表格嵌套实例

TABLE嵌套


<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>花房姑娘</title>
		<style>
			a {
				text-decoration: none;
			}
			
			table tr:first-child th:first-child {
				border-top-left-radius: 12px;
			}
			
			table tr:first-child th:last-child {
				border-top-right-radius: 12px;
			}
			
			table tr:last-child td:first-child {
				border-bottom-left-radius: 12px;
			}
			
			table tr:last-child td:last-child {
				border-bottom-right-radius: 12px;
			}
			
			.ad {
				box-shadow: 2px 10px 10px #9bc1ca;
			}
			
			.bd {
				border-radius: 5px;
			}
			
			.cd {
				font-size: 18px;
				font-family: "微软雅黑";
			}
			
			.dd {
				font-size: 10px;
				font-family: "微软雅黑";
				font-weight: bold;
			}
			
			.ed {
				font-family: "agency fb";
				font-size: 15px;
				background-color: #9bc1ca;
			}
			
			.fd {
				background-color: #9bc1ca;
				font-family: "微软雅黑";
				color: white;
				font-size: 12px;
			}
		</style>
	</head>

	<body>
		<table align="center" width="80%" border="0" cellpadding="0" cellspacing="0px">
			<tr>
				<th align="center" colspan="6"><img src="img/ti.jpg" width="100%" height="100%" class="bd"></th>
			</tr>
			<tr class="cd" bgcolor="f8dcd8">
				<td align="center">
					<a href="index.html">首页</a>
				</td>
				<td align="center">
					<a href="gongsijianjie.html">公司简介</a>
				</td>
				<td align="center">
					<a href="chanpin.html">产品展示</a>
				</td>
				<td align="center">
					<a href="hezuo.html">合作伙伴</a>
				</td>
				<td align="center">
					<a href="dingdan.html">在线订单</a>
				</td>
				<td align="center">
					<a href="#mj">联系我们</a>
				</td>
			</tr>
			<tr>
				<td width="20%" valign="top">
					<table class="ad" width="100%" border="0" cellpadding="0" cellspacing="2" bordercolor="ffffff">
						<tr>
							<th align="center" bgcolor="f8dcd8">
								<h3 align="center">鲜花分类</h3>
							</th>
						</tr>
						<tr>
							<td align="left" bgcolor="f8dcd8">
								<a href="huashu.html">&nbsp;&nbsp;花束<br/><br/><br/></a>
							</td>
						</tr>
						<tr>
							<td align="left" bgcolor="f8dcd8">
								<a href="huahe.html">&nbsp;&nbsp;花盒<br/><br/><br/></a>
							</td>
						</tr>
						<tr>
							<td align="left" bgcolor="f8dcd8">
								<a href="pinghua.html">&nbsp;&nbsp;瓶花<br/><br/><br/></a>
							</td>
						</tr>
						<tr>
							<td align="left" bgcolor="f8dcd8">
								<a href="jingpin.html">&nbsp;&nbsp;精品鲜花<br/><br/><br/></a>
							</td>
						</tr>
						<tr>
							<td align="left" bgcolor="f8dcd8">
								<a href="guolan.html">&nbsp;&nbsp;果篮<br/><br/><br/></a>
							</td>
						</tr>
						<tr>
							<td align="left" bgcolor="f8dcd8">
								<a href="zhuomian.html">&nbsp;&nbsp;桌面花篮<br/><br/><br/></a>
							</td>
						</tr>
						<tr>
							<td align="left" bgcolor="f8dcd8">
								<a href="kaiye.html">&nbsp;&nbsp;开业花篮<br/><br/><br/></a>
							</td>
						</tr>
					</table>
				</td>
				<td colspan="5" width="80%">
					<table align="center" border="0" cellpadding="0" cellspacing="5" bgcolor="#ffffff">

						<tr>
							<th align="left" colspan="2"><img src="img/1.jpg" width="70%" /></th>
							<th align="right" colspan="2"><img src="img/2.jpg" width="15%" /></th>
						</tr>
						<tr class="dd">
							<td bgcolor="f8dcd8" align="right" colspan="4">1/25【首页】&nbsp;&nbsp;【上一页】&nbsp;&nbsp;【上一页】&nbsp;&nbsp;【尾页】</td>
						</tr>
						<tr class="ed">
							<td width="10%" align="center"> <img src="img/9012338.jpg_220x240.jpg" width="100%" />鲜花/灿烂的笑容</td>
							<td width="10%" align="center"> <img src="img/9012344.jpg_220x240.jpg" width="100%" />鲜花/盛放的热情</td>
							<td width="10%" align="center"> <img src="img/9012361.jpg_220x240.jpg" width="100%" />鲜花/浅浅的温柔</td>
							<td width="10%" align="center"> <img src="img/9020014.jpg_220x240.jpg" width="100%" />鲜花/不褪色的爱</td>
						</tr>

						<tr class="ed">
							<td width="10%" align="center"> <img src="img/9012175.jpg_220x240.jpg" width="100%" />鲜花/月光女神</td>
							<td width="10%" align="center"> <img src="img/9012201.jpg_220x240.jpg" width="100%" />鲜花/馨情无限</td>
							<td width="10%" align="center"> <img src="img/9012233.jpg_220x240.jpg" width="100%" />鲜花/夏日倾情</td>
							<td width="10%" align="center"> <img src="img/9012234.jpg_220x240.jpg" width="100%" />鲜花/水瓶座守护花</td>
						</tr>
						<tr class="ed">
							<td width="10%" align="center"> <img src="img/9012136.jpg_220x240.jpg" width="100%" />鲜花/等你来</td>
							<td width="10%" align="center"> <img src="img/9012252.jpg_220x240.jpg" width="100%" />鲜花/请原谅我</td>
							<td width="10%" align="center"> <img src="img/9012278.jpg_220x240.jpg" width="100%" />鲜花/春韵--嫣然</td>
							<td width="10%" align="center"> <img src="img/9012150.jpg_220x240.jpg" width="100%" />鲜花/嫁给我吧</td>
						</tr>
						<tr class="ed">
							<td width="10%" align="center"> <img src="img/9050016.jpg_220x240.jpg" width="100%" />鲜花/清新--白雪</td>
							<td width="10%" align="center"> <img src="img/9012011.jpg_220x240.jpg" width="100%" />鲜花/阳光海岸</td>
							<td width="10%" align="center"> <img src="img/9012105.jpg_220x240.jpg" width="100%" />鲜花/青春之歌</td>
							<td width="10%" align="center"> <img src="img/9012123.jpg_220x240.jpg" width="100%" />鲜花/梦里花开</td>
						</tr>
						<tr class="dd">
							<td bgcolor="f8dcd8" width="100%" colspan="4" align="right">1/25【首页】&nbsp;&nbsp;【上一页】&nbsp;&nbsp;【上一页】&nbsp;&nbsp;【尾页】</td>
						</tr>
					</table>
				</td>
			</tr>

		</table>
		<p align="center" class="fd">
			<br /><br /><br /><br /><br /><br /><br /> 版权所有 © 2016 HuaFang.上海市花房姑娘全国连锁有限公司<br/> <br /><br /> 中国花卉协会会员 中国电子商务协会会员 ICP经营许可证:粤B2-20050755 |<img src="img/dd.PNG" width="15px" height="15px" /> 粤ICP备09171662号 粤公网安备44030502000373号 Copyright © 2005-2019<br/> <br /><br /> 花房姑娘 www.huafang.com 上海花房姑娘全国连锁有限公司 中国鲜花网领先品牌,鲜花速递专家!<br />
			<a name="mj"></a>
			联系我们:<br/> 内容合作QQ群:200246203 <br/> 微信搜索:花房姑娘公众号
			<br/> 电子邮箱:2628210285@qq.com
			<br /><br /><br /><br /><br /><br /><br /><br />
		</p>

	</body>

</html>

运行效果图:

  • 1
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值