Heim > Web-Frontend > HTML-Tutorial > Einfache Anwendung einer HTML-Tabelle

Einfache Anwendung einer HTML-Tabelle

迷茫
Freigeben: 2017-01-17 10:41:14
Original
1598 Leute haben es durchsucht

Im vorherigen Weblayout haben wir Tabellen für das Layout verwendet, aber mit der Zeit und der Weiterentwicklung der Sprache werden wir immer weniger Tabellenlayouts verwenden. Jetzt verwenden die meisten Websites das div+ CSS-Layout, was Suchmaschinen nicht sehr benutzerfreundlich macht Beim Crawlen von Website-Inhalten kann das Div+CSS-Layout von Suchmaschinen besser gecrawlt werden. Lassen Sie uns also heute über das Tabellenlayout sprechen.

Zuerst müssen wir wissen, wie die Beschriftungen der Tabelle lauten.

, ,
,

Lassen Sie uns unten ein Beispiel schreiben und diese Tags dann auf das Beispiel anwenden

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1">
<tr>
<th>ID</th>
<th>名称</th>
<th>价格</th>
<th>库存</th>
<th>上线时间</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>相机</td>
<td>1499</td>
<td>999</td>
<td>2015.6.8</td>
<td>修改 删除</td>
</tr>
</table>
</body>
</html>
Nach dem Login kopieren

Das Rendering ist wie folgt:

Einfache Anwendung einer HTML-Tabelle

Dieser Effekt sieht nicht sehr gut aus. Verbessern wir die Tabelle weiter

Stellen Sie eine feste Breite ein und height und der Rand, der Rand ist eine durchgezogene Linie

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{
width: 500px;
height:100px;
text-align: center;
}
td{
width:90px;
}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th>ID</th>
<th>名称</th>
<th>价格</th>
<th>库存</th>
<th>上线时间</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>相机</td>
<td>1499</td>
<td>999</td>
<td>2015.6.8</td>
<td>修改 删除</td>
</tr>
</table>
</body>
</html>
Nach dem Login kopieren

In diesem Fall sieht die Tabelle viel besser aus. Natürlich haben wir auch Attribute darin,

colspan rowspan. Wenn Sie einen persönlichen Lebenslauf erstellen, verwenden wir diese beiden Attribute, um Zeilen und Zellen zusammenzuführen. Beispiele hierfür finden Sie im grundlegenden Einführungskurs von PHP auf der chinesischen Website wissen, wie es geht, können sich darauf beziehen!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage