Heim > Artikel > Web-Frontend > Beispiele für HTML-Tabellenlayouts erklärt
Beispiele für HTML-Tabellenlayouts erklärt
- 高洛峰Original
- 2017-02-22 11:31:101916Durchsuche
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>
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;
}
Rendering:
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.
Weitere Beispiele für HTML-Tabellenlayouts und verwandte Artikel finden Sie auf der chinesischen PHP-Website!