HTML-Auszeichnungssprache - Tabellen-Tag
|
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“ von 123WORDPRESS.COM zurückzukehren. Zurück: Auszeichnungssprache - Titel <br />Originalquelle Standardisierte Designlösungen – Auszeichnungssprachen und Stilhandbücher Lösungen für Webstandards Das Markup- und Style-Handbuch Teil 1: Machen Sie sich mit dem Markup vertraut Kapitel 2 Böser Tisch? Wussten Sie, dass die Verwendung von Tabellen zu einer Sünde geworden ist? Tatsächlich lautet der größte Mythos über das Schreiben von Webseiten nach Webstandards: „Verwenden Sie nie wieder Tabellen, niemals!“ Es klingt, als müssten Tabellen wie die Pest gemieden, in einem staubigen Schrank verstaut und als Relikt aus den frühen Tagen des Webs aufbewahrt werden. Woher kommt diese Abneigung? Vielleicht war sie zunächst harmlos oder hatte zumindest einen guten Grund. Viele Leute würden selbstbewusst die Vorteile anpreisen, die sich ergeben, wenn man die traditionelle Layoutmethode mit verschachtelten Tabellen und leeren GIF-Bildern aufgibt und stattdessen flexible, strukturierte CSS-Layoutmethoden verwendet. Wir könnten anfangen, alle Tabellen zu entfernen, oder sogar hartnäckig darauf bestehen, alle Tabellen zu entfernen – unabhängig vom Anlass. Später im Buch werden wir uns CSS-Layoutmethoden und alle damit verbundenen Vorteile ansehen. Aber jetzt wollen wir uns erst einmal ansehen, wie man Tabellen verwendet, wenn es angebracht ist – beim Markieren von Datenlisten. Wir werden uns ein paar einfache Möglichkeiten ansehen, wie wir unsere Datenlisten benutzerfreundlicher und schöner gestalten können. Alles dreht sich um Tabellen <br />Es gibt absolut keinen Grund, beim Markieren tabellarischer Daten keine Tabellen-Tags zu verwenden. Aber Moment, was sind tabellarische Daten? Hier sind einige Beispiele: Kalender Tabellenkalkulationen Diagramme Zeitleisten In diesen und vielen anderen Fällen sind sehr komplexe und strenge CSS-Effekte erforderlich, damit die Daten wie eine Tabelle aussehen. Wie Sie sich wahrscheinlich vorstellen können, würde die Verwendung cleverer CSS-Floats und die Positionierung aller Elemente zu inkompatiblen und widersprüchlichen Ergebnissen führen, ganz zu schweigen davon, dass es ohne CSS wahrscheinlich unmöglich wäre, jedes Datenelement genau zu lesen. Tatsächlich müssen wir keine Angst vor Tabellen haben – wir sollten sie für den Zweck verwenden, für den sie entwickelt wurden. Tabellen für alle <br />Einer der Gründe, warum Tabellen einen schlechten Ruf haben, ist, dass sie bei unsachgemäßer Verwendung Probleme mit der Benutzerfreundlichkeit haben können. Beispielsweise haben Bildschirmleseprogramme Probleme, den Inhalt richtig zu lesen, und Geräte mit kleinen Bildschirmen überladen das Layout häufig mit Tabellen. Es gibt jedoch einige einfache Möglichkeiten, die Benutzerfreundlichkeit von Tabellen, die Daten auflisten, zu verbessern und gleichzeitig flexible Strukturen zu erstellen, die später problemlos mit CSS formatiert werden können. Schauen wir uns das einfache Beispiel in Abbildung 3-1 an, das den Ligarekord für die American League Baseball darstellt:  Abbildung 3-1: Typisches Datentabellenbeispiel Dies sind für Red Sox-Fans möglicherweise sehr deprimierende statistische Daten, aber Abbildung 3-1 ist ein perfektes Beispiel für tabellarische Daten. Sie hat drei Tabellenüberschriften (Jahr, Gegner, Saisonrekord (Wl)), gefolgt von Daten für vier Jahre. Über der Tabelle steht der Tabellentitel, der den Inhalt der Tabelle beschreibt. Die Markierung dieser Datentabelle ist sehr einfach. Wir könnten dies mit Code wie diesem tun: <p align="center">Weltmeisterschaft der Boston Red Sox</p> <Tabelle> <tr> <td align="center"><b>Jahr</b></td> <td align="center"><b>Gegner</b></td> <td align="center"><b>Saisonrekord (WL)</b></td> </tr> <tr> <td>1918</td> <td>Chicago Cubs</td> <td>75-51</td> </tr> <tr> <td>1916</td> <td>Brooklyn Robins</td> <td>91-63</td> </tr> <tr> <td>1915</td> <td>Philadelphia Phillies</td> <td>101-50</td> </tr> <tr> <td>1912</td> <td>New York Giants</td> <td>105-47</td> </tr> </Tabelle> Das Ergebnis sollte Abbildung 3-1 sehr ähnlich sein, wir können jedoch auf dieser Grundlage einige Verbesserungen vornehmen. Erstens können wir das semantischere <caption>-Tag verwenden, um „Boston Red Sox World Series Championships“ zu speichern. Das <caption>-Tag muss direkt nach dem <table>-Starttag platziert werden und wird normalerweise verwendet, um den Titel der Tabelle oder die Beschreibung der Tabellendaten zu speichern. Dadurch wird es für Benutzer offenbar einfacher, das Thema der Tabelle zu erkennen, und es kann auch Personen helfen, die den Inhalt der Seite auf andere Weise kennen. Entfernen wir den einleitenden Absatz und fügen die richtige <caption> hinzu: <Tabelle> <caption>Weltmeisterschaft der Boston Red Sox</caption> <tr> <td align="center"><b>Jahr</b></td> <td align="center"><b>Gegner</b></td> <td align="center"><b>Saisonrekord (WL)</b></td> </tr> <tr> <td>1918</td> <td>Chicago Cubs</td> <td>75-51</td> </tr> <tr> <td>1916</td> <td>Brooklyn Robins</td> <td>91-63</td> </tr> <tr> <td>1915</td> <td>Philadelphia Phillies</td> <td>101-50</td> </tr> <tr> <td>1912</td> <td>New York Giants</td> <td>105-47</td> </tr> </Tabelle> Es ist wichtig, dass der Titel schnell das Thema des folgenden Materials vermittelt. Standardmäßig zentrieren die meisten visuellen Browser den Text im <caption>-Tag oben in der Tabelle. Natürlich können wir den Standardstil später mit CSS ändern – wir werden dies in den ausführlichen Tipps dieses Kapitels besprechen. Die Tatsache, dass der Titel jetzt in einem eindeutigen Tag steht, macht es uns leicht, ihn später zu ändern. Vorherige Seite 1 2 3 4 5 6 7 8 Nächste Seite Gesamten Artikel lesen |
<<: Online- und Offlineinstallation von Docker und allgemeine Befehlsvorgänge
>>: Wird die Tabelle durch ein Update in einer MySQL-Transaktion gesperrt?
Artikel empfehlen
So implementieren Sie den Vue-Mausrad-Scrolling-Umschalt-Routing-Effekt
Eine Root-Routing-Komponente (die Root-Routing-Ko...
Diskussion über die numerische Begrenzung des OL-Elements im HTML-Dokument
Im Allgemeinen ist es unwahrscheinlich, dass Sie ...
Ein ausführliches Tutorial zur Verwendung von Docker zum Erstellen einer vollständigen Entwicklungsumgebung
Einführung in DNMP DNMP (Docker + Nginx + MySQL +...
So installieren Sie OpenSuse auf Virtualbox
Die virtuelle Maschine wird auf dem Hostcomputer ...
Lösung für Indexfehler, die durch implizite MySQL-Typkonvertierung verursacht werden
Inhaltsverzeichnis Frage Reproduktion Implizite K...
Detaillierte Erläuterung des Implementierungsprozesses und der Verwendung des Linux-Papierkorbmechanismus
Vorwort: rm unter Linux-Systemen ist irreversibel...
Meta-Tags einfach erklärt
Der META-Tag, umgangssprachlich auch als Tag beze...
Praktische Möglichkeit zum Erstellen einer verteilten Selenium-Grid-Umgebung mit Docker
Vor Kurzem musste ich die Zoom-Videokonferenz tes...
Zusammenfassung zur Verwendung von HTML-Meta-Tags (empfohlen)
Meta-Tag-Funktion Der META-Tag ist ein Schlüsselt...
MySQL-Kill-Befehl – Verwendungshandbuch
KILL [VERBINDUNG | ABFRAGE] Prozesslisten-ID In M...
So verwenden Sie Axios, um Netzwerkanforderungen in React Native zu stellen
In der Front-End-Entwicklung gibt es viele Möglic...
20 Wegweiser auf dem Weg zum exzellenten UI (User Interface)-Designer
Einleitung: Der Interface-Designer Joshua Porter h...
Bringen Sie Ihnen bei, schnell ein Webclusterprojekt basierend auf Nginx zu erstellen
Inhaltsverzeichnis 1. Projektumgebung 2. Projektb...
HTML-Tabellen-Markup-Tutorial (43): VALIGN-Attribut der Tabellenüberschrift
In vertikaler Richtung können Sie die Ausrichtung...
So verleihen Sie einer Website ein höheres und ansprechenderes Aussehen
„Wie lässt man eine Website hochwertig aussehen? ...