Elementtabelle
Das table- Element ist der große Container und kann sich in jedem Element befinden, das flow ist, z. B. div . Innerhalb des Tabellenelements haben wir die Elemente: caption, colgroup, thead, tbody, tfoot, tr, th und td , die erforderlich sind, um die Konstitution unserer Tabelle zu bestimmen. Zusätzlich hat der neue Standard die folgenden Attribute überholt der Tabelle und müssen ausschließlich von CSS verwendet werden: Summary, Align, Width, BGColor, CellPadding, CellSpacing, Frame, Rules . Die CSS-Konvention für dieses Element lautet:
Tabelle {Anzeige: Tabelle; Grenzzusammenbruch: getrennt; Randabstand: 2px; Rahmenfarbe: grau; }
Element tr
Wie wir wissen, bestehen die Tabellen aus zwei Grundelementen, Zeilen und Spalten, wobei die Zeilen jeden Informationsdatensatz und die Spalten die Struktur und den Typ der Information darstellen. Sehen wir uns das Element an, das zum Erstellen der Zeilen verwendet wird. Dieses Element ist das tr . Dies kann ein Kind der folgenden Elemente sein: table, thead, tfoot, tbody , wie wir sehen, kann es der direkte Sohn eines Tisches oder der Sohn der Elemente sein, die Kinder des Tisches sind und dessen Struktur definieren. Es muss ein oder mehrere Elemente enthalten, je nach Bedarf. Im neuen HTML5-Standard hat es auch einige seiner veralteten Attribute platziert. Dies sind: align, char, charoff, valign, bgcolor. Die ausschließlich von CSS bearbeitet werden müssen, besagt, dass CSS die folgende Struktur als Konvention hat:
tr {display: table-row; Vertikal ausrichten: erben; border-color: inherit;}
Element td
Dieses Element definiert die Spalten in unseren Zeilen in der Tabelle, wodurch wir die Informationen innerhalb eines Datensatzes trennen und somit nach unseren Bedürfnissen klassifizieren können. Es ist der Sohn des Elements tr. Die gültigen Attribute, die es besitzen kann, sind: colspan, rowspan, Header und die veralteten Attribute, die jetzt im CSS behandelt werden müssen, sind: abbr, axis, align, width, char, charoff, valign, bgcolor, height, nowrap, scope . Die CSS-Konvention für dieses Element lautet wie folgt:
td {display: table-cell; Vertikal ausrichten: erben; }
Unser erster Tisch
Lassen Sie uns in die Praxis umsetzen, was wir bisher gesehen haben. 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 den folgenden HTML-Code verwenden:
<! DOCTYPE HTML> <html> <head> <title> Beispiel </ title> </ head> <body> <table> <tr> <td> Äpfel </ td> <td> Grün </ td> <td> Mittel </ td> </ tr> <tr> <td> Orangen </ td> <td> Orange </ td> <td> Groß </ td> </ tr> </ table> </ body> </ html>
Dieser Code gibt uns die Struktur einer 2-zeiligen Tabelle mit 3 Spalten, da es sich um einfachen Text handelt, der uns zu folgendem Ergebnis führt:
Wie wir sehen konnten, ist es im Moment ziemlich einfach, eine Tabelle in HTML5 zu erstellen. Es handelt sich nur um Text. Ohne Format werden wir im nächsten Teil des Tutorials sehen, wie man eine Tabelle mit CSS-Inhalten ein bisschen fortgeschrittener macht.