table布局写出小样式
Posted 你的指尖-有改变世界的力量
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了table布局写出小样式相关的知识，希望对你有一定的参考价值。
效果：如下图
<img src="https://img-blog.csdn.net/20161010211520884?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table表格布局</title>
</head>
<body>
<center>
<table width="1000" height="150" bgcolor="#FFFECE">
<tr>
<td><img src="img/name.jpg" alt=""></td>
<td align="right">从不羡慕别人的优秀，因为相信自己也可以优秀。 闲下来时看看书，书本里的故事，总有你学到的人生。
<br> <font color="red">---By:项羽</font>
</td>
<td><img src="img/logo.jpg" alt="" width="80px" height="80px"></td>
</tr>
</table>
<table width="1000" height="55" background="img/banner.jpg">
<tr>
<td align="center"><a href="#"><font color="#fff" size="">博客首页</font></a></td>
<td align="center"><a href="#"><font color="#fff">心情日记</font></a></td>
<td align="center"><a href="#"><font color="#fff">关于项羽</font></a></td>
<td align="center"><a href="#"><font color="#fff">学海无涯</font></a></td>
<td align="center"><a href="#"><font color="#fff">个人日记</font></a></td>
<td align="center"><a href="#"><font color="#fff">留言板</font></a></td>
</tr>
</table>
<table width="1000" height="300">
<tr>
<td width="472" height="295"">
<img src="img/top_1.jpg" width="472" height="295" alt="">
</td>
<td>
<table>
<tr><td><img src="img/top_2.jpg" alt=""></td></tr>
<tr><td><img src="img/top_3.jpg" alt=""></td></tr>
<tr><td><img src="img/top_2.jpg" alt=""></td></tr>
<tr><td><img src="img/top_3.jpg" alt=""></td></tr>
<tr><td><img src="img/top_2.jpg" alt=""></td></tr>
</table>
</td>
<td>
<table width="400" height="295" background="img/top_4.jpg">
<tr>
<td>
<!--<img src="img/top_4.jpg" alt="">-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="1000">
<tr>
<td >
<img src="img/grbk.jpg" alt="">
</td>
</tr>
</table>
<table width="1000" height="200">
<tr>
<td valign="top">
<table border="1" bordercolor="red" >
<tr>
<td><img src="img/bk1.jpg" alt="" width="200" height="150"></td>
</tr>
<tr>
<td align="center"><a href="#">个人博客照片</a></td>
</tr>
<tr>
<td align="left"><font size="3">本博客模板由 关于我、碎言碎语、个人日记、相册展示、学无止境、</font></td>
</tr>
</table>
</td>
<td valign="top">
<table border="1" bordercolor="red" >
<tr>
<td><img src="img/bk2.jpg" alt="" width="200" height="150"></td>
</tr>
<tr>
<td align="center"><a href="#">个人博客照片</a></td>
</tr>
<tr>
<td align="left"><font size="3">本博客模板由 关于我、碎言碎语、个人日记、相册展示、学无止境、</font></td>
</tr>
</table>
</td>
<td valign="top">
<table border="1" bordercolor="red" >
<tr>
<td><img src="img/bk1.jpg" alt="" width="200" height="150"></td>
</tr>
<tr>
<td align="center"><a href="#">个人博客照片</a></td>
</tr>
<tr>
<td align="left"><font size="3">本博客模板由 关于我、碎言碎语、个人日记、相册展示、学无止境、</font></td>
</tr>
</table>
</td>
<td valign="top">
<table border="1" bordercolor="red" >
<tr>
<td><img src="img/bk1.jpg" alt="" width="200" height="150"></td>
</tr>
<tr>
<td align="center"><a href="#">个人博客照片</a></td>
</tr>
<tr>
<td align="left"><font size="3">本博客模板由 关于我、碎言碎语、个人日记、相册展示、学无止境、</font></td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr>
<td>
<table>
<tr>
<td valign="top"><img src="img/seo.jpg" alt=""></td>
</tr>
<tr>
<td>
<ul>
<li>个人博客《草根寻梦》—手机版模板</li>
<li>个人博客《草根寻梦》—手机版模板</li>
<li>个人博客《草根寻梦》—手机版模板</li>
<li>个人博客《草根寻梦》—手机版模板</li>
<li>个人博客《草根寻梦》—手机版模板</li>
<li>个人博客《草根寻梦》—手机版模板</li>
<li>个人博客《草根寻梦》—手机版模板</li>
</ul>
</td>
</tr>
</table>
</td>
<td >
<table>
<tr>
<td valign="top"><img src="img/web.jpg" alt=""></td>
</tr>
<tr>
<ol>
<li>个人博客《草根寻梦》—手机版模板</li>
<li>个人博客《草根寻梦》—手机版模板</li>
<li>个人博客《草根寻梦》—手机版模板</li>
<li>个人博客《草根寻梦》—手机版模板</li>
<li>个人博客《草根寻梦》—手机版模板</li>
<li>个人博客《草根寻梦》—手机版模板</li>
<li>个人博客《草根寻梦》—手机版模板</li>
</ol>
</tr>
</table>
</td>
<td>
<img src="img/pl.jpg" alt="">
</td>
</tr>
</table>
<table bgcolor="aqua" width="1000" height="50">
<tr>
<td align="center">项羽的个人博客 湘ICP备14011335号-2</td>
</tr>
</table>
</center>
</body>
</html>以上是关于table布局写出小样式的主要内容，如果未能解决你的问题，请参考以下文章
页面布局 假设高度已知，写出三栏布局，左右栏定宽，中间自适应。
如何在一个html页面中嵌入多个iframe并实现table样式布局？