Inhaltsverzeichnis
In der Vergangenheit wurden HTML-Tabellen verwendet, um das Layout der Sites zu steuern, um die Proportionen des Inhalts beizubehalten, Abschnitte zu erstellen, die Informationen aufzuteilen usw. Derzeit ist dies eine schlechte Praxis, in der Tat mit den neuen Spezifikationen des Artikels Tisch In HTML5 wurden alle Anstrengungen unternommen, um dies für seinen eigentlichen Zweck zu nutzen, nämlich Daten in 2-dimensionalen Arrays anzuzeigen.Tischelement
Das Element Tisch ist der große Behälter und kann sich in jedem Element befinden, das fließend ist, wie z div. Innenelement Tisch Wir werden die Elemente haben: beschriftung, colgroup, thead, tbody, tfoot, tr, th Ja td, die erforderlich sind, um unserem Tisch die Verfassung zu geben, zusätzlich hat der neue Standard die folgenden Attribute innerhalb von . obsolet gemacht Tisch und dürfen ausschließlich von CSS verwendet werden: Zusammenfassung, Ausrichtung, Breite, bgcolor, Zellenauffüllung, Zellenabstand, Rahmen, Regeln. Die CSS-Konvention für dieses Element sieht wie folgt aus:
Tabelle {Anzeige: Tabelle; Grenzkollaps: getrennt; Randabstand: 2px; Randfarbe: grau; } Tr-Element
Wie wir wissen, bestehen Tabellen aus zwei Grundelementen, Zeilen und Spalten, wobei die Zeilen jeden Informationsdatensatz darstellen und die Spalten die Struktur und Art der Informationen. Sehen wir uns das Element an, das zum Erstellen der Zeilen verwendet wird tr. Dies kann ein untergeordnetes Element der folgenden Elemente sein: tisch, thead, tfoot, tbodyWie wir sehen, kann es ein direktes Kind einer Tabelle oder ein Kind der Elemente sein, die Kinder der Tabelle sind und ihre Struktur definieren. Muss 1 oder mehrere Artikel enthalten td oder NS gegebenenfalls wurden einige seiner veralteten Attribute auch in den neuen HTML5-Standard aufgenommen, dies sind: align, char, charoff, valign, bgcolor. Die ausschließlich von CSS bearbeitet werden müssen, hat CSS als Konvention folgenden Aufbau:
tr {display: Tabellenzeile; vertikal ausrichten: erben; Rahmenfarbe: erben;} Td-Element
Dieses Element definiert die Spalten innerhalb unserer Zeilen in der Tabelle, was es uns ermöglicht, die Informationen innerhalb eines Datensatzes zu trennen und so nach unseren Bedürfnissen zu klassifizieren, es ist ein Kind des Elements tr, die gültigen Attribute, die es haben kann, sind: colspan, rowspan, headers und die veralteten Attribute, die jetzt im CSS behandelt werden müssen, sind: abbr, axis, ausrichten, width, char, charoff, valign, bgcolor, height, nowrap, scope. Die CSS-Konvention für dieses Element lautet wie folgt:
td {Anzeige: Tabellenzelle; vertikal ausrichten: erben; }Unser erster Tisch
Lassen Sie uns das, was wir bisher gesehen haben, in die Praxis umsetzen, wir wissen bereits, dass wir für unsere Tabelle Zeilen und Spalten innerhalb unseres Containers oder übergeordneten Elements benötigen. Sehen wir uns an, wie wir es auf HTML-Code übertragen:
Beispiel
| Äpfel | Grün | Mittel |
| Orangen | Orange | Groß |
Dieser Code gibt uns die Struktur einer Tabelle mit 2 Zeilen mit 3 Spalten, wie wir sehen, ist es einfacher Text, der uns zu diesem Ergebnis führt:
