网站首页信息展示（table布局）

最新推荐文章于 2019-06-12 23:46:38 发布
最新推荐文章于 2019-06-12 23:46:38 发布
阅读量1.1k 收藏 4
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41700466/article/details/83279112
版权

网站首页信息展示（table布局）

需求：

通过表格布局将首页信息展示

技术分析：

表格

表格标签：*

<table></table>

​ 常用的子标签 :行

<tr></tr>

​ 常用的子标签 :列

​ :表头单元格 默认居中加粗

​ 注意：一行必须只有一个单元格或者一列

​ table的常用属性：

​ border：边框 像素值

​ width：

​ align：表格对齐方式

​ tr 的常用属性:
align:内容对齐
td 的常用属性:
align:内容对齐
colspan:跨列合并 值:合并的列数
rowspan:跨行合并

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
			<table border="1" width="40%" height="200px" align="center" bgcolor="aqua">
				<!--
                	作者：ygd
                	时间：2018-09-16
                	描述：创建一个四行三列的表格
                -->
				<tr align="center">
					<td>11</td>
					<td>12</td>
					<td>13</td>
				</tr>
				<tr>
					<td>15</td>
					<td>16</td>
					<td>17</td>
				</tr>
				<tr>
					<td>18</td>
					<td>19</td>
					<td>20</td>
				</tr>
				<tr>
					<td>21</td>
					<td align="center" bgcolor="red">22</td>
					<td>23</td>
				</tr>
			</table>
			
			<table border="1" width="30%" height="150px" align="center" bgcolor="chartreuse">
				<tr align="center">
					<th>11</th>
					<th>12</th>
					<th>13</th>
				</tr>
				<tr>
					<td>15</td>
					<td colspan="2" align="center" >16 & 17</td>
					
				</tr>
				<tr>
					<td rowspan="2" align="center">18 & 21</td>
					<td>19</td>
					<td>20</td>
				</tr>
				<tr>
					
					<td>22</td>
					<td>23</td>
				</tr>
			</table>
			
	</body>
</html>

步骤分析:

  1. ​常见一个8行1列的表格

  2. 在第1行 放logo

    ​ 嵌套一个1行3列的表格

  3. 第2行 放菜单

  4. 第3行 放图片

  5. 第4行 热门商品

    ​ 嵌套一个2行7列的表格

  6. 第5行 放广告图片

  7. 第6行 最新商品

    ​ 嵌套一个2行7列的表格

  8. 第7行 放一个图片

  9. 第8行 两个段落

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<table border="1" width="100%" height="100px">
			<!--八行一列-->
			<!--
				logo一行三列表格
			-->
			<tr>
				<td>
					<table width="100%">
						<td>
							<img src="../img/商城.jpg"/>
						</td>
						<td align="center">
							<img src="../img/header.jpg"
						</td>
						<td align="right">
							<a href="#">登录  </a>&nbsp;&nbsp;&nbsp;
							<a href="#">注册  </a>&nbsp;&nbsp;&nbsp;
							<a href="#">购物车  </a>&nbsp;&nbsp;&nbsp;
							
						</td>
						
					</table>
				</td>
			</tr>
			
			<!--菜单-->
			<tr>
				<td bgcolor="black" height="40px">
					&nbsp;&nbsp;<a href="#"><font color="white">首页</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;<a href="#"><font color="white">手机数码</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;<a href="#"><font color="white">电脑办公</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;<a href="#"><font color="white">其他商品</font></a>&nbsp;&nbsp;
					
					
				</td>
			</tr>
			
			<!--轮播图-->
			<tr>
				<td>
					<img src="../img/1.jpg"/ width="100%">
				</td>
			</tr>
			
			<!--
				热门商品
				嵌套两行七列表格
			-->
			<tr>
				<td>
					<font size="6" face="微软雅黑">热门商品</font>&nbsp;&nbsp;&nbsp;&nbsp;
					<img src="../img/title2.jpg" />
					<table width="100%">
						<tr >
							<td rowspan="2" >
								<img src="../img/big01.jpg" />
							</td>
							<td colspan="3">
								<img src="../img/middle01.jpg"/>
							</td>
							<td>
								<img src="../img/small08.jpg" />
								<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
								<p align="center"><font color="red">200￥</font> </p>
							</td>
							<td>
								<img src="../img/small08.jpg" />
								<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
								<p align="center"><font color="red">200￥</font> </p>
							</td>
							<td>
								<img src="../img/small08.jpg" />
								<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
								<p align="center"><font color="red">200￥</font> </p>
							</td>
							
						</tr>
						<tr>
							<td>
								<img src="../img/small08.jpg" />
								<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
								<p align="center"><font color="red">200￥</font> </p>
							</td>
							<td>
								<img src="../img/small08.jpg" />
								<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
								<p align="center"><font color="red">200￥</font> </p>
							</td>
							<td>
								<img src="../img/small08.jpg" />
								<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
								<p align="center"><font color="red">200￥</font> </p>
							</td>
							<td>
								<img src="../img/small08.jpg" />
								<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
								<p align="center"><font color="red">200￥</font> </p>
							</td>
							<td>
								<img src="../img/small08.jpg" />
								<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
								<p align="center"><font color="red">200￥</font> </p>
							</td>
							<td>
								<img src="../img/small08.jpg" />
								<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
								<p align="center"><font color="red">200￥</font> </p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			
			<!--广告-->
			<tr>
				<td>
					<img src ="../img/ad.jpg" width="100%"/>
				</td>
			</tr>
			
			<!--最新商品-->
			<tr>
				<td>
					<font size="6" face="微软雅黑">最新商品</font>&nbsp;&nbsp;&nbsp;&nbsp;
					<img src="../img/title2.jpg" "/>
					<table width="100%">
						<tr>
							<td rowspan="2">
								<img src="../img/big01.jpg"  />
							</td>
							<td colspan="3">
								<img src="../img/middle01.jpg"/>
							</td>
							<td>
								<img src="../img/small08.jpg" />
								<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
								<p align="center"><font color="red">200￥</font> </p>
							</td>
							<td>
								<img src="../img/small08.jpg" />
								<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
								<p align="center"><font color="red">200￥</font> </p>
							</td>
							<td>
								<img src="../img/small08.jpg" />
								<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
								<p align="center"><font color="red">200￥</font> </p>
							</td>
							
						</tr>
						<tr>
							<td>
								<img src="../img/small08.jpg" />
								<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
								<p align="center"><font color="red">200￥</font> </p>
							</td>
							<td>
								<img src="../img/small08.jpg" />
								<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
								<p align="center"><font color="red">200￥</font> </p>
							</td>
							<td>
								<img src="../img/small08.jpg" />
								<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
								<p align="center"><font color="red">200￥</font> </p>
							</td>
							<td>
								<img src="../img/small08.jpg" />
								<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
								<p align="center"><font color="red">200￥</font> </p>
							</td>
							<td>
								<img src="../img/small08.jpg" />
								<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
								<p align="center"><font color="red">200￥</font> </p>
							</td>
							<td>
								<img src="../img/small08.jpg" />
								<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
								<p align="center"><font color="red">200￥</font> </p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			
			<!--一张图片-->
			<tr width="100%">
				<td >
					<img src ="../img/footer.jpg" width="100%"/>
				</td>
			</tr>
			
			<!--版权root
				两个段落
			-->
			<tr>
				<td>
					<p align="center">
						<a href="#">关于我们</a>
						<a href="#">联系我们</a>
						<a href="#">招贤纳士</a>
						<a href="#">法律声明</a>
						<a href="#">友情链接</a>
						<a href="#">支付方式</a>
						<a href="#">配送方式</a>
						<a href="#">服务声明</a>
						<a href="#">广告声明</a>
					</p>
					<p align="center">
						Copyright &copy 2017-2018 幸运商城 版权所有
					</p>
				</td>
			</tr>
			
			
		</table>
	</body>
</html>

附：[html转义](file:///E:/Java%E8%A7%A3%E5%8E%8B/%E5%B0%B1%E4%B8%9A%E7%8F%AD+Hadoop%E5%A4%A7%E6%95%B0%E6%8D%AE/%E3%80%90%E9%98%B6%E6%AE%B501%E3%80%91Javaweb/day01-html/resource/api/html%E8%BD%AC%E4%B9%89ll.html)

网站首页信息展示效果1（table布局）

网站首页信息展示效果2（table布局）

qq_41700466
关注
专栏目录
网站首页信息展示
09-22
网站首页信息展示,1. ​常见一个8行1列的表格 2. 在第1行 放logo ​ 嵌套一个1行3列的表格 3. 第2行 放菜单 4. 第3行 放图片 5. 第4行 热门商品 ​ 嵌套一个2行7列的表格 6. 第5行 放广告图片 7. 第6行 最新商品 ​ 嵌套一个2行7列的表格 8. 第7行 放一个图片 9. 第8行 两个段落
用户信息显示布局
CSDN1332531529的博客
03-22 195
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UserList.ascx.cs" Inherits="secured_member_UserControl_UserList" %><style type="text/css"> .left { width: 150px...
案例四：网站首页显示页面
小强博客
01-15 459
知识点笔记—表格标签 案例四：网站首页显示页面 1.表格标签 &amp;amp;lt;table border=&amp;quot;&amp;quot; width=&amp;quot;&amp;quot; height=&amp;quot;&amp;quot; align=&amp;quot;&amp;quot; bgcolor=&amp;quot;&amp;quot; cellpadding=&
table表格布局网页
07-24
博客引用的table布局小例子，没有办法设置为0积分，请见谅
CSS 使用table布局网页是不明智
12-11
在网页设计领域，CSS（层叠样式表）已经成为主流的布局工具，而使用Table布局则逐渐被淘汰。"CSS 使用Table布局网页是不明智"这一观点主要基于以下几点： 首先，Table最初的设计目的是为了展示数据，而非布局。...
DIV与Table布局在大型网站的可用性比较
09-27
标题中的“DIV与Table布局在大型网站的可用性比较”主要探讨了两种网页布局方式在构建大型网站时的适用性和优劣势。描述中强调了HTML的DIV和TABLE元素各有其特定用途，Web标准推荐正确使用标签，即DIV用于布局，...
纯css table 样式布局制作人口统计table表格样式代码
11-08
这个纯CSS的表格样式布局适用于人口统计信息的展示，通过自定义颜色、字体和布局，你可以根据需要进一步调整样式，使其与网站的整体设计风格保持一致。 在压缩包文件"texiao7347_1560680988"中，可能包含了示例代码...
table网页布局网站
09-08
企业网站可能包括产品目录、服务介绍、联系方式等内容，合理使用Table布局可以清晰地展示信息，提高用户体验。 总结，Table布局在网页设计中扮演了重要角色，尤其适合数据展示。然而，随着技术的发展，CSS布局方案...
一个table布局的简单网页
10-24
table布局 简单网页 table布局 水果fruitpage
简约信息展示网页模板
01-20
简约信息展示网页模板
企业信息展示响应式网页模板
01-20
企业信息展示响应式网页模板
信息展示动态企业网页模板
01-20
信息展示动态企业网页模板
HTML中使背景图片自适应浏览器大小
dilourang7883的博客
07-26 154
由于<body>标签的图片不能够拉伸， 解决办法： 1、图片不够大，又background属性不能拉伸图片； 2、只能用个div，把其z-index值设为负，并使这个div大小为整个body大小，在div里用<img> 3、body的background属性去掉，要不然会被遮住 1 <!DOCTYPE html> 2 &...
网页信息展示
qq_41700466的博客
09-16 799
网站信息展示 [ ] #### 需求—在页面展示一些文字信息，需要排版 [ ] #### 技术分析—html:超文本标签语言 htlm 作 用：展示 超文本：超越了一般文本，描述文本的字体、颜色、图片 标 签：标记 html书写规则： ​ 文件的后缀名 .html(建议...
table页面布局
张泽光的专栏
07-10 1205
  在网站开发中，常用的开发模式是美工使用PhotoShop等软件设计效果图，然后程序员根据效果图设计页面和后台程序。这时一个很突出的问题就是怎样将效果图转化为实际的页面，怎样才能快速的将效果图切块，然后布局！比较简单的一种解决方案是：将整个页面作为一个table,页面头部、导航条、页面内容、版权等板块都看成一行一列进行布局！页面整体布局好以后，然后对各部分进行细节布局，如果板块内容只有一块，直接写代码就可以；如果板块内容又分为左右等混合小版块，这时可页面头部
用table进行网页的布局
beststudent_的博客
06-12 4153
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>table首页布局</title> </head> <body> <table width="100%"> <tr> &lt...
网页布局——table布局
weixin_30802171的博客
06-06 1731
table 的特性决定了它非常适合用来做布局，并且表格中的内容可以自动居中，这是之前用的特别多的一种布局方式 而且也加入了display：table;dispaly:table-cell来支持 teble 布局。 但是它也有自身的局限性，比如 table 比其它 html 标记占更多的字节（造成下载时间延迟,占用服务器更多流量资源），table 会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面...
table布局
automation13的博客
05-01 734
tr:nth-child(2n+1)nth-child伪元素能处理奇偶元素等情况 <colgroup>标签该HTML标签可批量按列设置表格样式，比如下面截图设置表格中列的宽度 colspan rowspan <td>标签中的这两个属性用于指定单元格跨过多少...
HTML表格布局：构建首页信息展示
"该资源主要讨论了如何使用HTML表格来设计和展示网站首页信息，包括了logo、菜单、图片、热门商品、广告图片、最新商品等元素的布局，并提供了相关HTML代码示例。" 在设计一个网站的首页时，信息展示是至关重要的。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值