<div>布局和<table>布局

最新推荐文章于 2023-01-07 20:51:53 发布

原创最新推荐文章于 2023-01-07 20:51:53 发布 · 426 阅读

1 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

8 篇文章

订阅专栏

本文探讨了在HTML中使用<div>和<table>进行布局的差异。重点分析了<div>布局的灵活性和<table>布局的适用场景，帮助读者理解如何根据需求选择合适的布局方式。

<div>布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div布局</title>
    <link rel="stylesheet" type="text/css" href="buju.css">
</head>
<body>
<div id="container">
    <div id="heading">头部</div>
    <div id="menu">内容菜单</div>
    <div id="body">内容主体</div>
    <div id="foot">内容底部</div>
</div>

</body>
</html>

body{
    margin: 0px;
}
#container{
    width: 100%;
    height: 950px;
    background-color: darkcyan;
}
#heading{
    width: 100%;
    height: 10%;
    background-color: #d46bff;
}#menu{
    width: 30%;
    height: 80%;
    background-color: antiquewhite;
    float: left;
 }
 #body{
     width: 70%;
     height: 80%;
     background-color: aquamarine;
     float: right;
 }
 #foot{
     width: 100%;
     height: 10%;
     background-color: darkcyan;
     clear: both;
 }

body{
margin:0px;

}去除边框

<table>布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tatble布局</title>
</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height="950px" style="background-color: bisque ">
    <tr>
        <td colspan="3" width="100%" height="10%" style="background-color: brown">头部</td>
    </tr>
    <tr>
        <td width="20%" height="80%" style="background-color: aquamarine">左菜单</td>
        <td width="60%" height="80%" style="background-color: black">右菜单</td>
        <td width="20%" height="80%" style="background-color: black">菜单</td>

    </tr>
    <tr>
        <td width="100%" height="10%" colspan="3" style="background-color: darkorange">底部</td>
    </tr>
</table>
</body>
</html>