如何使用table布局静态网页

Posted newcityboy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用table布局静态网页相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hope旅游网</title>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" align="center">
<!--第一行-->
<tr>
<td>
<img src="image/top_banner.jpg" alt="" width="100%">
</td>
</tr>

<!--第二行-->
<tr>
<td>
<table width="100%" align="center">
<tr>
<td>
<img src="image/logo.jpg" alt="logo">
</td>
<td>
<img src="image/search.png" alt="查询">
</td>
<td>
<img src="image/hotel_tel.png" alt="联系方式">
</td>
</tr>
</table>
</td>
</tr>

<!--第三行-->
<tr>
<td>
<table width="100%" align="center" >
<tr bgcolor="orange" align="center" height="35">
<td >
<a href="https://www.baidu.com">
首页
</a>
</td>
<td>
门票
</td>
<td>
酒店
</td>
<td>
香港车票
</td>
<td>
出境游
</td>
<td>
国内游
</td>
<td>
港澳游
</td>
<td>
抱团定制
</td>
<td>
全球自由行
</td>
<td>
收藏排行榜
</td>
</tr>
</table>
</td>
</tr>

<!--第四行-->
<tr>
<td>
<img src="image/banner_1.jpg" alt="轮播图" width="100%">
</td>
</tr>

<!--第五行-->
<tr>
<td>
<img src="image/icon_5.jpg" alt="" align="left">
黑马精选
<hr color="orange">
</td>
</tr>

<!--第六行-->
<tr>
<td>
<table width="95%" align="center">
<tr>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;899</font>
</td>
</tr>
</table>
</td>
</tr>

<!--第七行-->
<tr>
<td>
<img src="image/icon_6.jpg" alt="" align="left">
国内游
<hr color="orange">
</td>
</tr>

<!--第八行-->
<tr>
<td>
<table width="95%" align="center">
<tr>
<td rowspan="2">
<img src="image/guonei_1.jpg" alt="">
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;899</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;699</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;699</font>
</td>
</tr>
</table>
</td>
</tr>

<!--第九行-->
<tr>
<td>
<img src="image/icon_7.jpg" alt="" >
境外游
<hr color="orange">
</td>
</tr>

<!--第十行-->
<tr>
<td>
<table width="95%" align="center">
<tr>
<td rowspan="2">
<img src="image/jiangwai_1.jpg" alt="">
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;1099</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;1099</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;1099</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;1099</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;1099</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天4夜自由行
</p>
<font color="red">&yen;1099</font>
</td>
</tr>
</table>
</td>
</tr>

<!--第十一行-->
<tr>
<td>
<img src="image/footer_service.png" alt="" width="100%">
</td>
</tr>


<!--第十二行-->
<tr >
<td align="center" bgcolor="orange" height="10px">
<font color="gray" size="2" >
江苏衡谱检测有限公司 版权所有Copyright 2006-2019
&copy; All Rights Reserved 苏ICP备16007882
</font>
</td>
</tr>


</table>
</body>
</html>

以上是关于如何使用table布局静态网页的主要内容,如果未能解决你的问题,请参考以下文章

如何从 DOM 中获取水平尺寸?

如何响应 React 中自动调整大小的 DOM 元素的宽度?

如何利用EasyUI框架控制页面布局

前端布局的几种方式

网页表格布局缺点

DIV+CSS布局和TABLE布局的优缺点