HTML-Auszeichnungssprache - Tabellen-Tag

Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“ von 123WORDPRESS.COM zurückzukehren.
Zurück: Auszeichnungssprache - Titel 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 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 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:
Weltmeisterschaft der Boston Red Sox
<Tabelle>
<tr>
<td align="center">Jahr</td>
<td align="center">Gegner</td>
<td align="center">Saisonrekord (WL)</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">Jahr</td>
<td align="center">Gegner</td>
<td align="center">Saisonrekord (WL)</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?

So konfigurieren Sie https für Nginx in Docker

HTML-Auszeichnungssprache - Tabellen-Tag

So konfigurieren Sie https für Nginx in Docker

Centos7 implementiert Beispielcode zum Wiederherstellen von Daten basierend auf MySQL-Protokollen

CSS3-Zeitleistenanimation

So installieren Sie vncserver in Ubuntu 20.04

Einführung in das MySql-Cache-Abfrageprinzip sowie in die Cache-Überwachung und Indexüberwachung

Methode zum Schreiben von bedingten Kommentaren und Beispielcode

js zur Realisierung einer einfachen Warenkorbfunktion

Nginx-Installation und Umgebungskonfiguration unter Windows (Ausführen von Nginx als Dienst)

Acht Möglichkeiten zur Implementierung von Kommunikation in Vue

Wenn Sie Dateien in Centos7 sichern, fügen Sie der Sicherungsdatei das Sicherungsdatum hinzu

Artikel empfehlen

Installationsschritte von MySQL unter Linux

MySQL-Installation mehrerer Instanzen - Boot- und Autostart-Dienstkonfigurationsprozess

MySQL-Performance-Optimierung: So nutzen Sie Indizes effizient und richtig

Zusammenfassung der Ubuntu-Sicherungsmethoden (vier Typen)

Implementierungsideen für die Synchronisierung von Docker-Registry-Images

Drei Eigenschaften von Javascript-Objekten

Vue integriert Tencent TIM Instant Messaging

Wenn Sie Dateien in Centos7 sichern, fügen Sie der Sicherungsdatei das Sicherungsdatum hinzu

MySQL Community Server 5.7.19 Installationshandbuch (detailliert)

Was ist DNS-Prefetch? Frontend-Optimierung: DNS-Vorauflösung verbessert die Seitengeschwindigkeit

MySQL-Implementierung für pessimistisches und optimistisches Sperren

jQuery klickt auf den Liebeseffekt

So implementieren Sie das parallele Herunterladen großer Dateien in JavaScript

Eine kurze Analyse kontrollierter und unkontrollierter Komponenten in React

Zusammenfassung der Wissenspunkte zur SQL-Abfrageoptimierung für MySQL-Big Data im zweistelligen Millionenbereich