Heim > Artikel > Web-Frontend > Warum sollten wir keine Tabellen für das HTML-Layout verwenden?

Warum sollten wir keine Tabellen für das HTML-Layout verwenden?

WBOYnach vorne: 2023-09-04 18:25:06583Durchsuche

In diesem Artikel besprechen wir das Tabellenlayout und seine Funktionen. Wir erfahren, warum das Tabellenlayout das am wenigsten verwendete Layout in HTML ist und warum es kein empfohlenes Layout beim Entwerfen von Websites ist.

Layout in HTML legt die grundlegende Organisation und den visuellen Stil einer Website fest. Das HTML-Layout einer Website dient als Leitfaden für die Platzierung von HTML-Elementen. Es ermöglicht Ihnen, eine Website mit einfachen HTML-Tags zu erstellen.

Tabellenlayout

Aufgrund seiner Komplexität ist das Tabellenlayout eines der am wenigsten empfohlenen Layouts in HTML. Wie der Name schon sagt, basiert es auf dem

-Element. Das

-Element bietet Funktionen zum Festlegen von Daten nach Zeilen und Spalten. Das

-Tag fungiert sowohl als Start- als auch als End-Tag und ist somit ein Container-Tag. Obwohl drei Meta-Tags erforderlich sind, um die Daten in einer Tabelle anzuordnen, können wir mehrere HTML-Elemente innerhalb eines einzelnen Elements verwenden.

Der erste fügt der Tabelle eine neue Zeile hinzu, indem er das Tag

verwendet, was „Tabellenzeile“ bedeutet. Das zweite ist das

-Tag, das den Tabellentitel darstellt und den Titel der Tabelle speichert. Das letzte ist	, bei dem es sich um Tabellendaten handelt, um die Informationen zu erhalten, die in der Tabelle gespeichert werden müssen. Beispiel Das folgende Beispiel erstellt eine Tabelle mit einer einzelnen Zeile. <!DOCTYPE html> <html> <style> table, th, td { border:1px solid black; } </style> <body> <table> <tr> <th>This tag defines the heading of the table</th> </tr> <tr> <td>This tag gets the information to be stores in the rows and columns </td> <p> HTML components can be used inside table tags, and tables can include number of table rows and table data.</p> </tr> </table> </body> </html> Beispiel Das folgende Beispiel erstellt eine Tabelle mit mehreren Zeilen - <!DOCTYPE html> <html> <style> table, th, td { border:1px solid black; } </style> <body> <table style width=40%> <tr> <th>Name</th> <th>Age</th> <th>Roll</th> </tr> <tr> <td>Rama</td> <td>17</td> <td>1001</td> </tr> <tr> <td>Radha</td> <td>18</td> <td>1002</td> </tr> </table> </body> </html> Warum wir keine Tabellen für das HTML-Layout verwenden sollten Hier sind einige Gründe, warum die Verwendung von Tabellen für das HTML-Layout nicht empfohlen wird - Wenn wir ein HTML-Dokument in einem Webbrowser öffnen, beginnen Suchmaschinen, das HTML-Dokument zu lesen. Sobald es den HTML-Code liest, beginnt es mit der Anzeige des Webinhalts. Für Suchmaschinen ist es jedoch schwierig, das Tabellenlayout darzustellen, da sie auf das schließende

-Tag, das den Tabellentitel darstellt und den Titel der Tabelle speichert. Das letzte ist

, bei dem es sich um Tabellendaten handelt, um die Informationen zu erhalten, die in der Tabelle gespeichert werden müssen.

Beispiel

Das folgende Beispiel erstellt eine Tabelle mit einer einzelnen Zeile.

<!DOCTYPE html>
<html>
   <style>
      table, th, td {
         border:1px solid black;
      }
   </style>
   <body>
      <table>
         <tr>
            <th>This tag defines the heading of the table</th>
         </tr>
         <tr>
            <td>This tag gets the information to be stores in the rows and columns </td>
            <p> HTML components can be used inside table tags, and tables can include number of table rows and table data.</p>
         </tr>
      </table>
   </body>
</html>

Beispiel

Das folgende Beispiel erstellt eine Tabelle mit mehreren Zeilen -

<!DOCTYPE html>
<html>
   <style>
      table, th, td {
         border:1px solid black;
      }
   </style>
   <body>
      <table style width=40%>
         <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Roll</th>
         </tr>
         <tr>
            <td>Rama</td>
            <td>17</td>
            <td>1001</td>
         </tr>
         <tr>
            <td>Radha</td>
            <td>18</td>
            <td>1002</td>
         </tr>
      </table>
   </body>
</html>

Warum wir keine Tabellen für das HTML-Layout verwenden sollten

Hier sind einige Gründe, warum die Verwendung von Tabellen für das HTML-Layout nicht empfohlen wird -

Wenn wir ein HTML-Dokument in einem Webbrowser öffnen, beginnen Suchmaschinen, das HTML-Dokument zu lesen. Sobald es den HTML-Code liest, beginnt es mit der Anzeige des Webinhalts. Für Suchmaschinen ist es jedoch schwierig, das Tabellenlayout darzustellen, da sie auf das schließende

-Tag warten müssen, sodass das Rendern einer Webseite mit Tabellenlayout mehr Zeit in Anspruch nimmt.

Tabellenlayout behindert SEO. Wenn wir Tabellen-HTML erstellen, müssen wir zunächst alle notwendigen Elemente der Tabelle wie Tabellenzeilen, Tabellenkopf und Tabellendaten definieren. Wenn wir der Tabelle ein anderes HTML-Element hinzufügen möchten, wird es gemäß dem Rendervorgang als letztes gerendert. Nehmen wir also an, wenn wir eine Navigationsleiste hinzufügen möchten, wird diese am Ende der Tabelle angezeigt. Dadurch wirkt der Inhalt der Webseite unübersichtlich.

Wenn Sie HTML4.01 verwenden, können Sie das Tabellenlayout nicht verwenden, da es Ihnen nur die Verwendung einfacher Tabellen zur Anzeige tabellarischer Informationen ermöglicht. Deshalb verwenden wir hauptsächlich HTML5 statt HTML4.

Sie können in einem Tabellenlayout keine verschachtelten Tabellen verwenden, da dies die Pflege der Tabelle komplexer macht. Wenn Sie verschachtelte Tabellen erstellen und nach ein paar Tagen einige Änderungen an den Daten vornehmen müssen, müssen Sie die gesamten Daten durchgehen, was ein zeitaufwändiger und komplexer Prozess ist.

Ein weiterer Grund, keine Tabellen für das HTML-Layout zu verwenden, ist die Flexibilität. Wenn Sie eine Tabelle erstellen, müssen Sie ihr eine bestimmte Breite zuweisen. Dann dauert das Laden der Tabelle auf Bildschirmen mit unterschiedlichen Breiten länger. In diesem Fall sieht Ihre Tabelle auf einem Laptop-Bildschirm gut aus, aber wenn Sie sie auf ein anderes Gerät wie ein Telefon oder einen Monitor laden, wird sie nicht auf die entsprechende Bildschirmgröße des Geräts skaliert.

Die Seitengröße spielt eine wichtige Rolle bei der Wahl des Website-Layouts, denn je kleiner die Seitengröße, desto weniger Zeit benötigt der Browser zum Rendern der Seite. Im Falle des Tabellenlayouts müssen wir drei Meta-Tags definieren, ohne diese Tags zeigt die Tabelle die Daten nicht korrekt an. Wir können auch weitere HTML-Elemente hinzufügen, diese drei Elemente müssen jedoch vorhanden sein, was insgesamt die Größe der Seite erhöht.

Fazit

In diesem Artikel haben wir das Tabellenlayout und seine Eigenschaften besprochen. Wir haben kurz eine Reihe von Punkten zum Tabellenlayout besprochen, die zusammengenommen ausreichen, um zu veranschaulichen, warum das Tabellenlayout nicht das empfohlene HTML-Layout für die Gestaltung einer Website ist. Während wir all diese Punkte besprachen, verglichen wir das Tabellenlayout mit dem Div-Layout.

Div-Layout ist das am häufigsten verwendete HTML-Layout und wird aufgrund seiner Eigenschaften dringend empfohlen. Versuchen Sie, alle oben genannten Punkte im Hinterkopf zu behalten, wenn Sie ein HTML-Layout für Ihre Website auswählen. Als Empfehlung empfehlen wir die Verwendung des Div-Layouts, wenn es den Anforderungen Ihrer Website entspricht.

Das obige ist der detaillierte Inhalt vonWarum sollten wir keine Tabellen für das HTML-Layout verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 html 搜索引擎

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Entwerfen Sie Twitter-Widgets mit der neuesten Twitter-APINächster Artikel：Entwerfen Sie Twitter-Widgets mit der neuesten Twitter-API

In Verbindung stehende Artikel

Mehr sehen