Wie sollten HTML-Tabellen gestaltet sein?-HTML-Tutorial-php.cn

Wie sollten HTML-Tabellen gestaltet sein?

php中世界最好的语言

Freigeben： 2018-01-23 10:57:47

Original

2357 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie HTML-Tabellen gestalten und welche Vorsichtsmaßnahmen beim Layouten von HTML-Tabellen gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Die Elemente im HTML-Dokument werden nacheinander angeordnet. Wir fügen einfach Zeilenumbrüche vor und nach den Elementen auf Blockebene ein, 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 das Blockelement ), um den Inhalt einer Webseite zu gestalten.

Die Verwendung von Tabellen für das Layout 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>   
                <div id="dishes">   
                    小鸡炖蘑菇<br>   
                    家常豆腐<br>   
                    酸辣土豆丝<br>   
                </div>   
            </td>   
            <!-- 内容 -->   
            <td id="content">   
                小鸡炖蘑菇：<br>   
                幼鸡一只   
            </td>   
        </tr>   
        <!-- 尾部 -->   
        <tr>   
            <td id="footer" colspan="2">世俗孤岛的餐厅</td>   
        </tr>   
    </table>   
</body>   
</html>   
CSS 文件
/*整个点餐系统的界面*/  
#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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Wie man mobile Webseiteninhalte adaptiv macht

Wie man mit Inhaltsüberlauf in Tabellentabellen umgeht

Was sind die Unterschiede zwischen iframe und Frame in HTML

Das obige ist der detaillierte Inhalt vonWie sollten HTML-Tabellen gestaltet sein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!