HTML-Tags dl, dt, dd zum Erstellen einer Tabelle vs. Tabellenerstellungstabelle

HTML-Tags dl, dt, dd zum Erstellen einer Tabelle vs. Tabellenerstellungstabelle
Dadurch werden nicht nur die Kosten für die Entwicklung und Wartung der Website gesenkt, sondern der Code erhält auch mehr Semantik. Dies bedeutet jedoch nicht, dass Tabellen verschwunden sind. Viele Menschen verwenden sie immer noch, da sie für die Datenpräsentation auf Webseiten erforderlich sind, beispielsweise für Listen mit persönlichen Daten. Tatsächlich sparen Sie durch die Verwendung der HTML-Tags dl, dt und dd mehr Code und sorgen dafür, dass der Code semantisch konsistenter mit dem Inhalt ist. Natürlich haben Tabellen ihren Nutzen, und zwar für Datentabellen mit großen Datenmengen, aber für kleine Datenlisten und Formulare sind überhaupt keine Tabellen erforderlich!

dl列表和table表格哪個更適合數據列表

Wenn Sie zum Erstellen von Datenlisten immer noch herkömmliche Tabellen verwenden, lesen Sie weiter, um zu erfahren, wie die Verwendung der HTML-Tags dl, dt und dd Ihre Arbeit erleichtern kann ...

Tabellendatenliste

Der Datenlistencode der herkömmlichen Tabelle lautet wie folgt. Wir müssen für jede Zeile ein tr-Tag hinzufügen und dann ein td-Tag für den Titel und die Daten. Da die Tags alle td sind, müssen wir, wenn wir Stile hinzufügen möchten, jedem td auch ein Klassenattribut hinzufügen.


Code kopieren
Der Code lautet wie folgt:

<Tabelle>
<tbody>
<tr>
<td class="title">Name:</td>
<td class="text">Böe Li</td>
</tr>
<tr>
<td class="title">Alter:</td>
<td class="text">23</td>
</tr>
<tr>
<td class="title">Geschlecht:</td>
<td class="text">Männlich</td>
</tr>
<tr>
<td class="title">Geburtstag:</td>
<td class="text">26. Mai 1986</td>
</tr>
</tbody>
</Tabelle>

Unten sehen Sie den entsprechenden CSS- Code. Wir fügen den zuvor im HTML deklarierten Klassen Stile hinzu.


Code kopieren
Der Code lautet wie folgt:

/*TABELLELISTENDATEN*/
Tisch {
Rand unten: 50px;
}
Tabelle tr .title {
Hintergrund: #5f9be3;
Farbe: #fff;
Schriftstärke: fett;
Polsterung: 5px;
Breite: 100px;
}
Tabelle tr .text {
Polsterung links: 10px;
}

Wie aus dem obigen Code ersichtlich ist, müssen Sie bei Verwendung des Tabellen-Tags einige entsprechende Klassenattribute zur TD-Zelle hinzufügen, wenn Sie CSS zum Ändern oder Modifizieren des Inhalts verwenden möchten. Dadurch erhöht sich Ihr Arbeitsaufwand unsichtbar und der Code wird etwas umfangreicher. Was bedeutet mehr Code? Dies bedeutet, dass Website-Verkehr verschwendet wird, die Wahrscheinlichkeit von Fehlern steigt und die anschließende Wartung schwieriger ist.

dl, dt, dd Datenliste

Sehen wir uns nun Datenlisten mit den HTML-Tags dl, dt und dd an. Zuerst verwenden wir das Tag dl (Definitionsliste), um die gesamte Datenstruktur zu speichern, und dann verwenden wir die Tags dt (benutzerdefinierter Titel) und dd (benutzerdefinierte Beschreibung), um den Titel und den Inhalt in den Daten zu speichern.


Code kopieren
Der Code lautet wie folgt:

<dl>
<dt>Name: </dt>
<dd>Böe Li</dd>
<dt>Alter: </dt>
<dd>23</dd>
<dt>Geschlecht: </dt>
<dd>Männlich</dd>
<dt>Geburtstag:</dt>
<dd>26. Mai 1986</dd>
</dl>

Im CSS-Code müssen wir nur dt und dd nach links schweben lassen.
/*DL, DT, DD TAGS-LISTENDATEN*/


Code kopieren
Der Code lautet wie folgt:

dl {
Rand unten: 50px;
}
dl dt {
Hintergrund: #5f9be3;
Farbe: #fff;
schweben: links;
Schriftstärke: fett;
Rand rechts: 10px;
Polsterung: 5px;
Breite: 100px;
}
dl dd {
Rand: 2px 0;
Polsterung: 5px 0;
}

Anhand der Beispiele von dl, dt und dd sollte deutlich erkennbar sein, dass ihre Codes einfacher, flüssiger und semantischer sind.

Wenn Sie vor diesem Hintergrund weiterhin auf der Verwendung von Tabellen-Tags zum Ausfüllen von Webformularen oder anderen Webseiten-Layouts bestehen, ist es jetzt an der Zeit, Ihren Code zu ändern. Erleichtern Sie sich die Arbeit!

<<:  MySQL nutzt geschickt Summe, Groß- und Kleinschreibung und Wann, um statistische Abfragen zu optimieren

>>:  Jedes Mal, wenn Docker einen Container startet, werden die IP und die Hosts mit den angegebenen Operationen

Artikel empfehlen

So reparieren Sie beschädigte MySQL-Datenbankdateien schnell mit den Tools myisamchk und mysqlcheck

Da der Festplattenspeicher der Server-Datenbank v...

Das Vue-Projekt implementiert eine Fortschrittsbalkenfunktion für den Dateidownload

Im täglichen Geschäftsleben gibt es zwei gängige ...

Funktionsweise von SQL-SELECT-Datenbankabfragen

Obwohl wir keine professionellen DBAs sind, könne...

Beispiel für die Konfiguration der Timeout-Einstellung für MySQL-Datenbanken

Inhaltsverzeichnis Vorwort 1. JDBC-Timeout-Einste...

Detaillierte Erläuterung der allgemeinen Schritte zur SQL-Anweisungsoptimierung

Vorwort In diesem Artikel erfahren Sie hauptsächl...

Detailliertes grafisches Tutorial zum Aktivieren des sicheren Remotezugriffs mit Docker

1. Bearbeiten Sie die Datei docker.service vi /us...

CSS zur Erzielung einer kompatiblen Textausrichtung in verschiedenen Browsern

Beim Front-End-Layout des Formulars müssen wir hä...

MySQL startet langsames SQL und analysiert die Ursachen

Schritt 1. Aktivieren Sie die langsame MySQL-Abfr...

Über die MariaDB-Datenbank unter Linux

Inhaltsverzeichnis Über die MariaDB-Datenbank unt...

Einfache Anwendungsbeispiele für benutzerdefinierte MySQL-Funktionen

Dieser Artikel veranschaulicht anhand von Beispie...

Analyse der Implementierungsmethoden für MySQL-Datensicherung und -Wiederherstellung

Dieser Artikel beschreibt anhand von Beispielen, ...

Erstellen Sie mit Node.JS ein Echtzeit-Warnsystem für Unwetter

Inhaltsverzeichnis Vorwort: Schritt 1: Finden Sie...

Vue realisiert die Palastgitterrotationslotterie

Vue implementiert die Palastgitterrotationslotter...

Beispiel für die Konfiguration von nginx zur Implementierung von SSL

Umgebungsbeschreibung Serversystem: Ubuntu 18.04 ...

Unbekannte Verwendung von Object.entries in JavaScript

Inhaltsverzeichnis Vorwort 1. Verwenden Sie for.....