table布局写出小样式

来源：互联网发布：淘宝美工的后台编辑：程序博客网时间：2024/06/05 17:10

效果：如下图

<img src="http://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>

1 0