Verwenden Sie Standard-DL-, DT- und DD-Tags, um Tabellenlisten zu verwerfen

Heutzutage beginnen immer mehr Front-End-Entwickler, das ursprüngliche Tabellenlayout durch xHTML+CSS zu ersetzen und so das Gesamtlayout der Webseite zu vervollständigen. Dadurch werden nicht nur die Kosten für Entwicklung und Wartung der Website gesenkt, sondern der Code wird auch semantischer. 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 ...
Tabellendatenliste Der Datenlistencode der herkömmlichen Tabelle ist 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>

Nachfolgend der entsprechende 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-Datenlisten Sehen wir uns nun Datenlisten mit den HTML-Tags dl, dt, 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.

Code kopieren

Der Code lautet wie folgt:

/*DL, DT, DD TAGS-LISTENDATEN*/
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 Online-DDL-Tool Gh-Ost-Prinzipanalyse

>>: Lösung für das Problem, dass der Hostname des Hosts im Docker-Container nicht abgerufen werden kann

CSS3 realisiert das Papierflugzeug aus der Kindheit

Verwenden Sie Standard-DL-, DT- und DD-Tags, um Tabellenlisten zu verwerfen

CSS3 realisiert das Papierflugzeug aus der Kindheit

Docker5 - Vollfunktionaler Hafenlager-Bauprozess

Beispielcode zur Realisierung des Ladeeffekts der B-Station mit CSS+SVG

Detaillierte Erläuterung der kostenlosen AWS-Serveranwendung und des Tutorials zur Einrichtung eines Netzwerkproxys

Verwenden Sie Javascript, um eine dynamische QQ-Registrierungsseite zu erstellen

Detaillierte Erläuterung der Deep Copy und Shallow Copy im JS-Variablenspeicher

Warum sollte die Anzahl der Zeilen in einer einzelnen MySQL-Tabelle 5 Millionen nicht überschreiten?

Detaillierte Beispiele für Docker-Compose-Netzwerke

So setzen Sie das Root-Passwort von Mysql in Windows zurück, wenn Sie es vergessen haben

Detaillierte Erläuterung des Prozesses zum Abfragen von Benutzerberechtigungen mithilfe von MySQL-Anweisungen

Artikel empfehlen

Drei Möglichkeiten zur Implementierung virtueller Hosts unter Linux7

Perfekte Lösung für das Problem des Verbindungsfehlers nach der MySQL-Client-Autorisierung

InnoDB-Typ MySql stellt Tabellenstruktur und Daten wieder her

Ausführliche Erläuterung der InnoDB-Sperren in der MySQL-Technologie

So installieren Sie MySQL unter Linux (Yum und Quellcode-Kompilierung)

Tutorial-Analyse zur Installation und Nutzung des Linux-Leistungsüberwachungstools nmon

Lösung für die durch das FOUC-Problem auf Webseiten verursachte Verwirrung auf Webseiten

Ausführliche Erläuterung der Kenntnisse zu MySql-Tabellen, Datenbanken, Sharding und Partitionierung

So optimieren Sie MySQL-Gruppen nach Anweisungen

Beispielanalyse zur Optimierung von MySQL-Unterabfragen und verschachtelten Abfragen

Implementierung von Single-Div-Zeichentechniken in CSS

Von CSS 3D zur räumlichen Koordinatenachse mit Quellcode

So implementieren Sie das N-Grid-Layout in CSS

Analyse der Fallstricke beim Rundungsvorgang der ROUND-Funktion in MySQL

MySQL-Anmelde- und Beendigungsbefehlsformat