Hallo, heute werden wir über Tabellen sprechen und
wie Sie sie verwenden können, um Ihre Daten auf Ihrer Website anzuzeigen.
Also, wie ich es gerne ausdrücken möchte,
ist, dass wir Tabellen wirklich als diese böse Art von Idee betrachtet haben.
Weil Leute aus dem Grund, warum sie es sollten, keine Tische benutzt haben.
Stattdessen benutzten sie Tabellen, um Dinge darzustellen und
sie schön auf dem Bildschirm auszulegen.
Dies begann zurück während der Zeit von HTML 2, vielleicht HTML 3.1.
Und die Leute sagten, ich möchte wirklich, dass meine Seite schön aussieht und
ich habe keine Mittel, es zu tun, also werde ich es zu einem riesigen Tisch machen und
irgendwie alles in verschiedenen Zeilen oder Spalten auslegen.
Dies wirft die ganze Idee der Trennung von Inhalt vom Layout vollständig aus.
Darüber hinaus macht es wirklich verwirrend für Leute, die
Hilfsgeräte verwenden könnten, weil sie sich fragen, ist das wirklich alles eine Reihe von Daten,
oder gibt es Inhalte, die einfach irgendwie in der regelmäßigen Weise formatiert werden sollten.
Also fangen wir an, über Tische zu reden.
Und was ich wirklich tun möchte, ist die Idee zu betonen, dass Sie nur
Tabellen verwenden sollten, wenn Sie irgendeine Art von Daten angezeigt werden.
Bevor Sie anfangen, eine einzige Sache zu programmieren,
müssen Sie Ihr Layout skizzieren, wie Ihre Tabelle aussehen sollte.
Ich habe meinen Schülern das immer wieder erzählt, und sie sagen ja, ja, und
dann fangen sie an zu programmieren.
Und dann sagen sie ja, ja, und dann fangen sie an zu programmieren.
Und nach etwa dem vierten oder fünften Mal erkennen sie,
oh, es ist viel einfacher, sauberen Code beim ersten Mal zu schreiben, als defekten Code zu reparieren.
Und dann beginnen sie und sie denken, wie viele Zeilen und
Spalten brauche ich eigentlich, um alle meine Daten darzustellen?
Und dann gehst du einen Schritt weiter und sagst, gibt es Zeilen oder
Spalten, in denen ich tatsächlich mehrere Zellen umfassen muss, oder
wie wir die kleinen Boxen in der Tabelle nennen?
Denn wenn ja, wird es viel einfacher, wenn ich das herausgefunden habe,
wo ich spezielle Attribute brauchen werde, um das zu erreichen.
Denn eines der wichtigsten Dinge, die Sie wissen müssen, wenn Sie Tabellen machen, ist, dass
der Browser erwartet, dass es in jeder einzelnen Zeile die gleiche Anzahl von Zellen gibt.
Wenn du das nicht tust, wird es sehr chaotisch aussehen.
Sobald Sie sich entschieden haben, wie Ihre Tabelle aussehen soll,
ist es an der Zeit, über die Tags nachzudenken.
Sie beginnen mit dem Tabellen-Tag und es ist im Grunde nur ein Containerelement,
das alle anderen Attribute und alle anderen Tags darin enthalten wird.
Du wirst die Tabellenzeile haben und dann hier für td habe ich Spalten, aber
was ich wirklich denke, wäre am besten, dies als Tabellenzellen zu betrachten, nicht wirklich
Spalten, weil du über jede einzelne Box redest.
Also in der Tabelle, werden Sie eine oder mehrere Tabellenzeilen haben.
Und dann haben Sie in jeder Tabellenzeile ein oder mehrere TD-Elemente, also
die Spalten oder die Zellen.
Also hier ist der Code zum Erstellen einer sehr einfachen Tabelle.
Obwohl es sehr verwirrt aussieht und als gäbe es eine Menge Dinge, die hier los sind. Das
meiste davon ist nur Informationen für den Browser.
Wenn wir uns die eigentliche Seite anschauen, die generiert wird, werden Sie sehen, dass es sehr
sauber und einfach ist.
Also habe ich meinen Code für
meine Tabelle auf der Außenseite und dann ist jede meiner Codezeilen hier eine Zeile.
Ich habe meinen tr Start und mein tr Ende.
Und dann habe ich in jeder Zeile drei Elemente, eins, zwei,
drei, die sich innerhalb des td-Tags befinden.
Und ich werde dir jetzt sagen, dass es, als ich diesen Code anfangs schrieb
, gut aussah, aber ich habe es irgendwie durcheinander gebracht, weil ich vergessen hatte, mein End-Tag einzugeben.
Stellen Sie also sicher, dass Sie sehr sauber und prägnant sind, wenn Sie diese programmieren.
Und wenn Sie es richtig machen, wird dies eine einfache Tabelle erstellen,
wie gesagt, mit neun Elementen darin.
Eins, zwei, drei, vier, fünf, sechs, sieben, acht, neun.
Dies ist so einfach, wie Sie bekommen können, soweit die Tabelle reicht.
Nun möchten Sie in einigen Fällen vielleicht, was wir Tabellenüberschriften nennen, zu Ihrem Code hinzufügen.
Tabellenüberschriften sind die Idee, dass
Sie oben in jeder Spalte oder sogar oben oder am Anfang jeder Zeile eine Art Text haben, der fett ist, der darauf hinweist, dass
dies keine Daten sind. Dies ist eigentlich der Name der Daten, die wir betrachten.
Nun ist es in Ordnung, ich meine, es ist nicht in Ordnung, aber was einige Leute tun würden, ist, dass sie
einfach diese normalen TD-Elemente machen und sie vielleicht mutig machen würden.
Also die Leute, die es ansehen, können sagen, oh hey, schau mal.
Das ist mutig, daher muss es wichtiger sein.
Aber das wollen wir wirklich vermeiden.
Anstatt eine TD mit einer Art Fettschrift
zu verwenden, möchten wir ein semantisches Tag TH verwenden, das für Tabellenüberschrift steht.
Also hier sind diese drei Codezeilen genau die gleichen wie zuvor, aber
ich habe eine neue Zeile hinzugefügt, in der anstelle von td ich th habe.
Also habe ich Zeile eins, Zeile zwei, Zeile drei usw.
Und was Sie hier sehen können, ist, dass das, was wir bekommen, diese nette kleine
Tabellenüberschrift an der Spitze jedes einzelnen ist, das heißt, dass beide visuell den Benutzer wissen lassen, dass dies
Überschriften sind, sondern auch semantisch die gleichen Informationen vermittelt.
Also eines der Dinge, die ich bereits erwähnt habe, wenn Sie Ihren Tisch entwerfen,
ist, dass Sie entscheiden wollen, ob Sie mehrere Zellen überspannen werden.
Es könnte der Fall sein, dass der Tisch, den Sie machen wollen, kein
perfektes Tic Tac Toe Gitter ist, oder perfekt neun mal neun.
So können Sie mehrere Zeilen oder
mehrere Spalten mit den Rowspan- und Spaltenspan-Attributen kombinieren.
In Ihrem Element würden Sie rowspan gleich zwei einfügen, wenn Sie
zwei Zeilen umfassen möchten, oder Spaltenspanne gleich fünf, wenn Sie fünf Spalten umfassen möchten. In
Ordnung, also lass mich voran gehen und dir ein Beispiel mit etwas Code zeigen und
wieder merke ich, dass, wenn du das auf einem winzigen kleinen Bildschirm siehst, das
wirklich wie eine Menge Informationen zu verdauen scheint.
Aber es geht nicht wirklich so viel vor sich.
Ich habe eine einfache Tabelle, in der ich meine Tabellenüberschriften mit dem Namen des Kindes und
dann dem Namen des Elternteils habe.
Und dann gehe ich weiter und beginne, ein Kind anzulegen, und
mit jedem Kind schließe ich ihre Eltern ein.
Also hier habe ich Rowspan gleich zwei für Catherine,
was bedeutet, dass meine Catherine Zelle zwei Zeilen aufnimmt.
Dasselbe mit der Edward-Zelle.
Maggie, ich habe völlig allein gelassen.
Also lassen Sie uns einfach gehen und schauen Sie sich das Endergebnis an, und ich denke, das ist wirklich, wenn
wir rückwärts verketten, es wird Ihnen helfen zu verstehen, was dieser Code tut.
Also wieder, ich habe den Namen des Kindes und den Namen des Elternteils, und
hier sind die beiden Zellen, in denen ich die Zeilenspanne gemacht habe.
Und Sie können sehen, es hat tatsächlich mehrere Reihen gedauert, denn in diesem Fall
hatten Catherine und Edward beide zwei Eltern, mit denen wir es zusammenstellen wollten.
Wieder, kein hartes Konzept, aber es ist der Fall, dass, wenn Sie nicht
darüber nachgedacht haben, und wir zu Ihrem Code zurückgingen und gerade angefangen haben, rowspan und
columnspan einzuwerfen, es nur sehr chaotisch und schwieriger zu debuggen.
Eines der Dinge, die Sie vielleicht bemerkt haben,
ganz oben auf der Tabelle habe ich ein Grenzattribut eingeschlossen.
Der Grund, warum ich das getan habe, ist, weil ich denke, dass es viel
einfacher ist, diesen Zeilenbereich hier zu sehen, weil ich die Linien um jede Zelle herum habe.
Sie können also das border-Attribut verwenden, um
Zeilen zwischen jeder Ihrer Zellen zu setzen.
Und es ist sehr üblich, das zu tun.
Aber wieder, in Ihrem HTML, versuche ich, Styling zu vermeiden.
Es ist etwas, das wir später hinzufügen können, wenn Sie sich entscheiden, mehr über CSS zu erfahren.
Aber es ist ein Attribut, das so häufig verwendet wird, dass ich
es dort hineinlegen wollte, damit du sehen kannst, was los war.
Lassen Sie uns als nächstes über Untertitel sprechen.
Also, wie verknüpfen wir Text mit einer bestimmten Tabelle?
Was die Leute früher getan haben, ist, dass sie eine Art Überschrift, h2 oder h3, und
sie würden es direkt über oder direkt unter dem Tisch setzen.
Also visuell, wenn Sie es sich ansehen, könnten Sie irgendwie herausfinden, oh,
das geht mit dem Tisch.
Aber wieder möchte ich dich wirklich dazu bringen, semantische Tags zu verwenden.
Anstatt dies zu tun, können Sie voran gehen und
das Beschriftung-Tag innerhalb der Tabelle verwenden und
es wird jedem helfen, zu wissen, dass oh diese Beschriftung mit dieser spezifischen Tabelle passt.
Also, lassen Sie uns voran gehen und überprüfen.
Nummer eins, Tabellen sollten nur für tabellarische Daten verwendet werden.
Verwenden Sie es nicht für das Layout.
Zwei, zeichnen Sie Ihren Tisch, bevor Sie Ihren Tisch codieren.
Es wird dir am Ende so viel Kummer ersparen, das verspreche ich dir.
Schließlich, und das ist die dritte und wichtigste Sache, die ich hoffe, dass Sie mit verlassen,
ist, dass Sie nach nicht geschlossenen Tags suchen müssen.
Eines der Dinge, die an Browsern großartig sind, wenn Sie
lokal entwickeln, Sie geben Ihren Code ein und Sie testen und betrachten ihn, ist, dass
Ihr Browser normalerweise herausfinden kann, was Sie tun wollten, auch wenn Sie es versaut haben.
In Ordnung.
Und Tabellen sind ein gutes Beispiel, wo Sie vergessen können, einige Tags zu schließen,
aber Ihr Browser weiß irgendwie, was Sie tun wollten.
Aber später, wenn Sie sich entscheiden, eine Tabelle zu erstellen, und Sie werden sie hochladen, und
Sie müssen wirklich sicherstellen, dass die Daten dort gültig und gut dargestellt sind.
Eines der schlimmsten Dinge, die Sie tun können, ist, Ihre Tags nicht geschlossen zu lassen.
Stellen Sie also sicher, dass Sie Ihren Code validieren,
wann immer Sie eine Tabelle schreiben oder wirklich, wenn Sie einen Code schreiben.
Und Sie werden wirklich in der Lage sein, sicher zu sein, dass Sie den besten Code schreiben, den Sie können.