版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/53991140
模仿hao123首页，一些组件还不会做，用图片代替比如：输入框、按钮、动画、链接………….
只是试试简单的表格布局。
table下的边框设置：
frame：
控制外侧边框
void： 不显示表格最外面的4条边线
above： 显示4条边线的上面一条
below： 显示下面的一条线
lhs： 显示左边线
rhs： 显示右边线
hsides： 显示上下边线
vsides： 只显示左右边线
box： 显示所有边线
border： 显示所有边
rules：
控制内侧边框
rows： 只显示横线
cols： 只显示竖线
all： 全部显示
groups： 表示列组合水平部分
none： 不显示任何线
1.当<td>内没有内容时，默认不显示边框,如果想显示空单元格的边框可以在单元格中刚添加一个空格。
2.font中包括其他内部标签时，内部标签中的文字格式不会改变。
3.布局时可以通过标签的潜逃来实现复杂布局。
4.当不设置表格width时，表格的宽度只是确保能包含所有信息。
5.表格的宽度可以使用百分比来设定。
6.当一个属性出现两次时，只有第一次的有效。
测试frame：
测试rules：
超简版的hao123效果如下：
源代码如下：(代码较长..)
<html>
<head>
<title>网页标题</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta http-equiv="content-type" content="type/html;charset=htf-8"/>
</head>
<body>
<table width='100%' border='0' cellpadding='0'>
<tr>
<!--第一列-->
<td width='60%'>
<!--嵌套表格-->
<table>
<tr>
<td width='35%' align='right'><img src='https://gss1.bdstatic.com/5eN1dDebRNRTm2_p8IuM_a/res/img/richanglogo168_24.png' height='50'/></td>
<td><font color='pink' size='2'>设为首页 合肥晴 12 ~ 2℃ 1月02日 周一 十二月初五 星座运势</font></td>
</tr>
</table>
</td>
<!--第二列-->
<td align='middle'><font color='pink' size='2'>登录 网盘 邮箱 浏览器 换肤 首钢能否终结连败 </font></td>
</tr>
</table>
<hr/>
<!--搜索框一行-->
<table>
<tr>
<td width='25%' align='right'><img src='素材/百度标志2.png' width='130' height='70'></td>
<td width='50%'>
<!--嵌套表格-->
<table>
<tr height='60% '>
<td><img src='素材/百度搜索框.png'></td>
</tr>
<tr valign='bottom'>
<td><font size='2'>杀毒软件 网络安全 软件学习 c语言编程 怎么学习c语言 百度清理大师 电信公司宽带安装</font></td>
</tr>
</table>
</td>
<td align='middle'><font size='2'>收购玉米被判刑</font></td>
</tr>
</table>
<table align='center' width='100%' bgcolor='pink' cellsoacing='1'>
<tr bgcolor='white'>
<td bgcolor='green'>首页</td>
<td>电视剧</td>
<td>最新电影</td>
<td>新闻头条</td>
<td>八卦娱乐</td>
<td>军事热点</td>
<td>热门游戏</td>
<td>小游戏</td>
<td>今日特价</td>
<td>特价旅游</td>
</tr>
</table>
<table width='100%' align='center' cellspacing='1'>
<tr>
<td>权威推荐</td>
<td>人民网</td>
<td>新华网</td>
<td>央视网</td>
<td>国际在线</td>
<td>中国日报网</td>
<td>中国网</td>
<td>中国经济网</td>
<td>光明网</td>
<td>央广网</td>
</tr>
</table>
<table border='1' width='100%' cellspacing='0' bordercolor='green'>
<tr>
<!--1-->
<td width='23%'>
<table width='100%' align='middle' cellpadding='2'>
<tr>
<td>电视剧|综艺</td>
<td>游戏|小游戏</td>
</tr>
<tr>
<td>电影|直播</td>
<td>动画|漫画</td>
</tr>
<tr>
<td>新闻|军事</td>
<td>旅游|音乐</td>
</tr>
<tr>
<td>彩票|竞猜</td>
<td>搞笑|小说</td>
</tr>
</table>
<ul align='left'>
<li>不知道亏大了!今起这些东西统统免费</li>
<li>中国10亿造的这座桥让网友炸开了锅 </li>
<li>中国10亿造的这座桥让网友炸开了锅 </li>
<li>航班穿越了!2017年起飞2016年到达 </li>
<li>中国10亿造的这座桥让网友炸开了锅 </li>
<li>外媒这条快讯把特朗普和台湾都撩了 </li>
</ul>
<br/>
<ul align='left'>
<li>不知道亏大了!今起这些东西统统免费</li>
<li>中国10亿造的这座桥让网友炸开了锅 </li>
<li>中国10亿造的这座桥让网友炸开了锅 </li>
<li>航班穿越了!2017年起飞2016年到达 </li>
<li>中国10亿造的这座桥让网友炸开了锅 </li>
<li>外媒这条快讯把特朗普和台湾都撩了 </li>
</ul>
<br/>
<ul align='left'>
<li>不知道亏大了!今起这些东西统统免费</li>
<li>中国10亿造的这座桥让网友炸开了锅 </li>
<li>中国10亿造的这座桥让网友炸开了锅 </li>
<li>航班穿越了!2017年起飞2016年到达 </li>
<li>中国10亿造的这座桥让网友炸开了锅 </li>
<li>外媒这条快讯把特朗普和台湾都撩了 </li>
</ul>
</td>
<!--2-->
<td width='1%' '></td>
<td valign='top'>
<!--3-->
<!--3.1-->
<table width='100%' align='top' cellpadding='2' cellspacing='0' border='1' bordercolor='green' rules='none'>
<colgroup span='6' valign='top' bgcolor='pink'></colgroup>
<tr valign='top'>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
<tr>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
<tr>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
<tr>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
<tr>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
<tr>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
</table>
<!--表格之间的内容-->
<table align='center' width='80%'>
<tr>
<td>聚划算</td>
<td>京东机票</td>
<td>春运抢票</td>
<td>9块9包邮</td>
<td>2017新传奇</td>
<td>蓝月传奇</td>
<td>创业商机网</td>
<td>高清剑客男</td>
</tr>
</table>
<!---->
<!--3.2-->
<table width='100%' align='top' cellpadding='2' cellspacing='0' border='1' bordercolor='green' rules='none'>
<tr>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
<tr>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
<tr>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
<tr>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
<tr>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
<tr>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
</table>
<!--表格之间的内容-->
<table align='center' width='80%'>
<tr>
<td>聚划算</td>
<td>京东机票</td>
<td>春运抢票</td>
<td>9块9包邮</td>
<td>2017新传奇</td>
<td>蓝月传奇</td>
<td>创业商机网</td>
<td>高清剑客男</td>
</tr>
</table>
<!---->
<!--3.3-->
<table width='100%' align='top' cellpadding='2' cellspacing='0' border='1' bordercolor='green' rules='none'>
<tr valign='top'>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
<tr>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
<tr>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
<tr>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
<tr>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
<tr>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
</table>
<!--表格之间的内容-->
<table align='center' width='80%'>
<tr>
<td>聚划算</td>
<td>京东机票</td>
<td>春运抢票</td>
<td>9块9包邮</td>
<td>2017新传奇</td>
<td>蓝月传奇</td>
<td>创业商机网</td>
<td>高清剑客男</td>
</tr>
</table>
<!---->
<!--3.4-->
<table width='100%' align='top' cellpadding='2' cellspacing='0' border='1' bordercolor='green' rules='none'>
<tr valign='top'>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
<tr>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
<tr>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
<tr>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
<tr>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
<tr>
<td>百度 • 贴吧</td>
<td>新浪 • 微博</td>
<td>搜狐 • 热点</td>
<td>腾 讯</td>
<td>网 易</td>
<td>优 酷 网</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
