Beispiele für HTML-Tabellenlayouts erklärt-HTML-Tutorial-php.cn

Beispiele für HTML-Tabellenlayouts erklärt

高洛峰

Freigeben： 2017-02-22 11:31:10

Original

1942 Leute haben es durchsucht

Die Elemente im HTML-Dokument werden nacheinander angeordnet und einfach vor und nach den Elementen auf Blockebene eingefügt, was ein optimiertes Layout ergibt. Allerdings sind die Webseiten, die wir sehen, nach bestimmten Regeln angeordnet (normalerweise mehrspaltig), daher müssen wir bestimmte Methoden verwenden, um dieses Layout zu erreichen. Die übliche Lösung ist: Verwenden Sie Blockelemente

), um den Inhalt einer Webseite zu gestalten.

Layout mit Tabellen ist eine ältere Layoutlösung. Es wird nicht empfohlen, wir sollten immer Tabellen verwenden, um tabellarische Daten anzuzeigen.

HTML-Dokument

<!DOCTYPE html>   
<html lang="en">   
<head>   
    <meta charset="UTF-8">   
    <!-- 链接到外部样式表 -->   
    <link rel="stylesheet" href="css/mystyle.css">   
    <title>Island estaurant</title>   
</head>   
<body>   
    <table id="container">   
        <!-- 头部 -->   
        <tr>   
            <td id="header" colspan="2">   
                <h1>点菜系统</h1>   
            </td>   
        </tr>   
        <!-- 主体 -->   
        <tr>   
            <!-- 菜单 -->   
            <td id="menu">   
                <b>菜品</b><br>   
                <p id="dishes">   
                    小鸡炖蘑菇<br>   
                    家常豆腐<br>   
                    酸辣土豆丝<br>   
                </p>   
            </td>   
            <!-- 内容 -->   
            <td id="content">   
                小鸡炖蘑菇：<br>   
                幼鸡一只   
            </td>   
        </tr>   
        <!-- 尾部 -->   
        <tr>   
            <td id="footer" colspan="2">世俗孤岛的餐厅</td>   
        </tr>   
    </table>   
</body>   
</html>

Nach dem Login kopieren

CSS-Datei

/*整个点餐系统的界面*/  
#container   
{   
    width: 600px;   
    margin: 100px;   
    /*取消单元格边框之间的边距*/  
    border-spacing: 0;   
}   
/*点餐系统界面的头部*/  
#header  
{   
    background-color: red;   
    text-align: center;   
}   
h1   
{   
    margin-bottom: 0px;   
}   
/*点餐系统界面的菜单*/  
#menu  
{   
    background-color: #FFD700;   
    height: 200px;   
    width: 150px;   
}   
#dishes  
{   
    padding-top: 10px;   
    padding-left: 10px;   
    line-height: 20px;   
}   
/*点餐系统界面的菜品详情*/  
#content   
{   
    background-color: gray;   
    height: 200px;   
    width: 450px;   
}   
/*点餐系统界面的尾部*/  
#footer  
{   
    background-color: blue;   
    height: 25px;   
    text-align: center;   
}

Nach dem Login kopieren

Rendering:

Beispiele für HTML-Tabellenlayouts erklärt