大二初次使用HTML的table写一个个人主页

最新推荐文章于 2024-02-19 17:00:14 发布

Fishermen_sail

最新推荐文章于 2024-02-19 17:00:14 发布

阅读量236

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Fishermen_sail/article/details/115273742

版权

在这里插入图片描述

最麻烦的地方就是，在table里套table。这样写一定要指定table与td的宽度，否则最后呈现的表格框会依据其中的内容而改变自身大小。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="Shortcut Icon" href="Look.png" type="image/x-icon" />
    <title>个人主页</title>
</head>

<body
    style="background-image: url(Background1.jpg); background-repeat: no-repeat; background-size: 100%; background-attachment: fixed;">
    <table border="0" width="1200" align="center">
        <tr>
            <td height="40px" style="background-color: transparent;" weight="100">
                 <a href="#" style="text-decoration: none;">
                    <font color="black" size="4">关于我</font>
                </a> 
                 <a href="#" style="text-decoration: none;">
                    <font color="black" size="4">动态</font>
                </a> 
                 <a href="#" style="text-decoration: none;">
                    <font color="black" size="4">文章</font>
                </a> 
                 <a href="#" style="text-decoration: none;">
                    <font color="black" size="4">想法</font>
                </a> 
                <img src="Look.png" alt="无" width="30" height="30" align="right">
            </td>
        </tr>

        <tr>
            <td>
                &nbsp;
            </td>
        </tr>

        <tr>
            <td>
                <table width="1200">
                    <thead align="left">
                        <th>
                            <font size="6" face="微软雅黑">教育经历</font>
                        </th>
                    </thead>
                    <tbody>
                        <tr>
                            <td width="800" bgcolor="#efefef">
                                <p>小学：</p>
                                <p>初中：</p>
                                <p>高中：</p>
                                <p>大学：</p>
                            </td>
                            <td width="400">
                                <table>
                                    <tr>
                                        <td width="100">&nbsp;</td>
                                        <td width="300" bgcolor="whitesmoke" colspan="2">
                                            <a href="#" style="text-decoration: none;">
                                                <p>&lt;目录&gt;</p> 
                                            </a>
                                            <a href="#" style="text-decoration: none;">
                                                <p>&lt;教育经历&gt;</p> 
                                            </a>
                                            <a href="#" style="text-decoration: none;">
                                                <p>&lt;获奖经历&gt;</p> 
                                            </a>
                                            <a href="#" style="text-decoration: none;">
                                                <p>&lt;现状&gt;</p> 
                                            </a>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>

        <tr>
            <td>
                &nbsp;
            </td>
        </tr>

        <tr>
            <td>
                <table width="1200">
                    <thead align="left">
                        <th>
                            <font size="6" face="微软雅黑">获奖经历</font>
                        </th>
                    </thead>
                    <tbody>
                        <tr>
                            <td width="800" bgcolor="#efefef">
                                <p>小学：</p>
                                <p>初中：</p>
                                <p>高中：</p>
                                <p>大学：</p>
                            </td>
                            <td width="400">
                                &nbsp;
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            </td>
        </tr>

        <tr>
            <td>
                &nbsp;
            </td>
        </tr>

        <tr>
            <td>
                <table width="1200">
                    <thead align="left">
                        <th>
                            <font size="6" face="微软雅黑">现况</font>
                        </th>
                    </thead>
                    <tbody>
                        <tr>
                            <td width="800" bgcolor="#efefef">
                                <p>现居地：</p>
                                <p>职业：</p>
                                <p>年薪：</p>
                                <p>目标：</p>
                            </td>
                            <td width="400">
                                &nbsp;
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            </td>
        </tr>

        <tr>
            <td>
                &nbsp;
            </td>
        </tr>

        <tr style="background-color: #232323;">
            <td>
                <p align="center">
                    <font color="#888" size="4">Copyright &copy; 2020 MADE IN CHINA</font>
                </p>
            </td>
        </tr>
    </table>
</body>

</html>