Html tabelle Muster

Das Schöne an dieser Technik ist, dass Sie für Browser, die keine Bildlaufschatten unterstützen, die Tabelle weiterhin wie gewohnt scrollen können. Es bricht das Layout überhaupt nicht. Die Selektoren, die ich im Stylesheet verwende, einschließlich :not und :empty, werden absichtlich erweitert. Es ist durchaus möglich, dieselbe Tabellendarstellung mit einem traditionelleren Tarif zu erstellen, z. B. Klassen, aber mein Ziel ist es, den effizientesten CSS-Code zu verwenden. Ein besonderes Problem, das es zu vermeiden gilt, ist die Verdoppelung der Grenzen: Sie möchten nicht, dass eine Zellenwand in der Tabelle aufgrund eines Rahmens sowohl auf sie als auch auf einem benachbarten Element dicker erscheint als die anderen. Zu diesem Zweck: Es ist möglich, eine Tabelle in einer anderen zu verschachteln, solange Sie die gesamte Struktur, einschließlich der

Element, einschließen. Dies ist in der Regel nicht wirklich ratsam, da es das Markup verwirrender und weniger zugänglich für Screenreader-Benutzer macht, und in vielen Fällen können Sie genauso gut einfach zusätzliche Zellen/ Zeilen/Spalten in die vorhandene Tabelle einfügen. Manchmal ist es jedoch notwendig, zum Beispiel, wenn Sie Inhalte leicht aus anderen Quellen importieren möchten. Wenn wir dann den Pseudoklassenselektor :last-child verwenden, um das letzte

Element innerhalb des Abschnitts zu identifizieren, legen wir den unteren Rand auf 0 Pixel fest.

Dadurch wird verhindert, dass diese Tabelle in Konflikt mit der unteren Auffüllung steht, die zum

Element mit einem Klassenattributwert der Zeile gehört. Chen Hui Jing hat eine Tonne Designmuster für Tabellen in Angriff genommen, die nützlich sein könnten, wenn Tabellen erstellt werden, die für das Web leicht lesbar und reaktionsschnell sind: Nach dem

Element fügen wir zwei

Elemente für die beiden Referenten hinzu, die zu dieser Zeit präsentiert wurden. Direkt in jedem

Element fügen wir ein Element hinzu, das wieder zu der Stelle führt, an der sich dieser Lautsprecher auf der Speakers-Seite befindet. Denken Sie daran, dass wir den übergeordneten Elementen für jeden Lautsprecher ID-Attribute mit dem Namen jedes Sprechers hinzugefügt haben. Mit diesem id-Attributwert, dem der Dateiname speakers.html und ein Pfund/Hash-Zeichen vorangestellt sind, können wir direkt auf die Sprachbeschreibung und Biographie dieses Sprechers auf der Speakers-Seite verlinken. Bisher sieht unser Büchertisch ziemlich gut aus. Gehen wir noch einen Schritt weiter, indem wir einige Ecken runden und einen Teil des Textes etwas mehr stilisieren. Wie Sie aus dem obigen kurzen Beispiel ableiten können, soll die Beschriftung eine Beschreibung des Tabelleninhalts enthalten. Dies ist nützlich für alle Leser, die eine schnelle Vorstellung davon erhalten möchten, ob die Tabelle für sie nützlich ist, wenn sie die Seite scannen, aber vor allem für blinde Benutzer. Anstatt einen Screenreader den Inhalt vieler Zellen vorlesen zu lassen, nur um herauszufinden, worum es in der Tabelle geht, kann er sich auf eine Beschriftung verlassen und dann entscheiden, ob er die Tabelle genauer lesen möchte oder nicht. In den Anfängen des Webs war es üblich, Tabellen als Layoutgerät zu verwenden.

Vor dem Aufkommen moderner standardbasierter Browser war dies der einfachste Weg, um sicherzustellen, dass Seitenelemente auf dem Bildschirm richtig angeordnet waren. Hier verwendet unsere Büchertabelle den Pseudoklassenselektor :nth-child mit einem geraden Argument, um alle geraden Tabellenzeilen innerhalb der Tabelle auszuwählen und einen grauen Hintergrund anzuwenden. Folglich ist jede zweite Zeile innerhalb des Tabellenkörpers grau. Ich verwende den Bereich, um die Rollentabellenheaderzellen zusammen mit HTML5-Verknüpfungen zu bezeichnen – d. h. ob es sich um Header für Zeilen oder Spalten handelt.