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!
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 ... TabellendatenlisteDer 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 DatenlisteSehen 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! |
Artikel empfehlen
Geschickte Nutzung von WebKit-Box-Reflect zur Erzielung verschiedener dynamischer Effekte (Zusammenfassung)
In einem Artikel vor langer Zeit habe ich über di...
So installieren und konfigurieren Sie einen FTP-Server in CentOS8.0
Nach der Veröffentlichung von CentOS8.0-1905 habe...
Konvertierung einer vertikalen MySQL-Tabelle in eine horizontale Tabelle und Tutorial zur Optimierung
1. Vertikaler Tisch und horizontaler Tisch Vertik...
Implementierung eines verschachtelten Sprungs der Vue-Routing-Ansicht Router-Ansicht
Inhaltsverzeichnis 1. Ändern Sie die app.vue-Seit...
Sieben verschiedene Farbschemata für das Website-Design-Erlebnis
Die Farbabstimmung beim Erstellen einer Website i...
Kombinieren von XML- und CSS-Stilen
student.xml <?xml version="1.0" enco...
Perfekte Lösung für das Problem, dass Navicat nach der Installation von MySQL im Docker keine Verbindung herstellen kann
1. Docker zieht das Image Docker Pull MySQL (stan...
Beispiel für die Konvertierung eines Zeitstempels in ein Datum in MySQL
Vorwort Ich bin bei der Arbeit auf folgende Situa...
CSS zum Erzielen von Text auf dem Hintergrundbild
Wirkung: <div Klasse="imgs"> <...
Detaillierte Erklärung der .bash_profile-Datei im Linux-System
Inhaltsverzeichnis 1. Umgebungsvariable $PATH: 2....
Implementierung der Master-Slave-Replikation im Docker Compose-Deployment
Inhaltsverzeichnis Konfigurationsanalyse Dienstle...
Detaillierte Erklärung verschiedener Bildformate wie JPG, GIF und PNG
Jeder weiß, dass Bilder auf Webseiten im Allgemein...
Warum gibt es das in JS?
Inhaltsverzeichnis 1. Nachfrage 2. Lösung 3. Die ...
Beispiel einer Nginx-Standortübereinstimmungsregel
1. Grammatik Standort [=|~|~*|^~|@] /uri/ { ... }...
Der Unterschied zwischen method=post/get in Form
Das Formular bietet zwei Möglichkeiten zur Datenüb...