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

Detaillierte Erläuterung des Prozesses zum Verpacken der Python-Umgebung durch Docker

Die Schritte zum Verpacken einer Python-Umgebung ...

Verwenden Sie CSS-Variablen, um coole und erstaunliche Schwebeeffekte zu erzielen

Kürzlich habe ich auf der Grover-Website eine lus...

Beispielanalyse von MySQL-Start- und Verbindungsmethoden

Inhaltsverzeichnis So starten Sie mysqld Methode ...

HTML-Tutorial: Horizontales Liniensegment in HTML

<br />Dieses Tag kann eine horizontale Linie...

Zusammenfassung der vier Möglichkeiten zum Durchlaufen eines Arrays in JS

Dieser Artikel vergleicht und fasst vier Möglichk...

Die Rolle und Methoden der Informationskommunikation im visuellen Design von Websites (Bild und Text)

Das zeitgenössische visuelle Webdesign hat drei vö...

Verwendung der MySQL SHOW STATUS-Anweisung

Um die Leistung von MySQL anzupassen und den Dien...

Vue implementiert die Tabellenpaging-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.11 (Win10)

In diesem Artikel werden die Installations- und K...

Detaillierte Erklärung, warum die langsame Abfrageprotokollzeit von MySQL 5.7 8 Stunden hinter der Systemzeit liegt

Beim Überprüfen der langsamen Abfrage stellte ich...

Allgemeine Probleme mit der Regelpriorität beim Nginx-Standort

Inhaltsverzeichnis 1. Standort / Matching 2. Stan...

So lösen Sie das Problem „Nginx 503-Dienst vorübergehend nicht verfügbar“

In letzter Zeit tritt nach dem Aktualisieren der ...

Zusammenfassung einiger gängiger Protokolle in MySQL

Vorwort: Im MySQL-System gibt es viele verschiede...

Docker verwendet den Prune-Befehl, um das Nicht-Image zu bereinigen

Inhaltsverzeichnis Die Entstehung und Verwirrung ...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 unter Windows 10

In diesem Artikel erkläre ich ausführlich, wie ma...