HTML -Markup -Sprache - Tabellen -Tags

Klicken Sie hier, um zur Spalte Wulin.com HTML Tutorial zurückzukehren.

Oben: Markup -Sprache - Titel

Originalquelle

Wissen Sie? Ich weiß nicht, wann es anfing, und die Verwendung von Tischen wurde zu einer sündigen Handlung? In der Tat besteht der größte Mythos, Webseiten zu schreiben, die auf Webstandards basieren, die Verwendung von Tabellen nicht mehr, niemals! Es klingt wie eine Pest, es muss vermieden und in ein staubiger Kabinett versiegelt und geworfen werden, und es wird als Antiquitäten angesehen, das aus den frühen Tagen der Internetentwicklungszeit übergeben wird.

Woher kommt ein solcher Ekel? Vielleicht war es am Anfang sehr einfach, zumindest mit gutem Grund. Viele Menschen wären zuversichtlich, die Vorteile der Aufgabe des traditionellen Layouts von Tischnestern und leeren GIF -Bildern zu fördern und stattdessen ein flexibles strukturiertes CSS -Layout zu verwenden. Wir können anfangen, alle Tische auf abnehmende Weise zu entfernen und sogar hartnäckig darauf zu bestehen, alle Tische zu vertreiben - keine Angelegenheit der Anlass.

Später im Buch werden wir die Methode des CSS -Layouts und alle Vorteile dazu sehen. Schauen wir uns nun an, wie Sie Tabellen in der richtigen Situation verwenden können - das heißt, wenn Sie Datenlisten markieren. Wir werden uns einige einfache Möglichkeiten ansehen, um unsere Datenlisten einfacher und schöner zu machen.

Wenn Sie Listendaten markieren, gibt es absolut keinen Grund, keine Tabellen -Tags zu verwenden. Aber warte, was sind Listendaten? Hier sind einige Beispiele: Kalender -Tabellenkalkulationstabellenroute

Für diese und viele andere Fälle müssen sehr komplexe und strenge CSS -Effekte verwendet werden, damit die Daten wie eine Tabelle aussehen. Vielleicht können Sie sich vorstellen, dass die Verwendung von cleveren CSS -Schwimmern zur Lokalisierung aller Projekte zu inkompatiblen und widersprüchlichen Ergebnissen führt, ganz zu schweigen davon, dass nach dem Entfernen von CSS wahrscheinlich das Lesen jeder Daten wahrscheinlich zu einer unmöglichen Aufgabe wird. Tatsächlich müssen wir keine Angst vor Tischen haben - wir sollten sie mit ihren ursprünglichen Designzielen verwenden.

Einer der Gründe, warum Tabellen kritisiert werden, ist, dass es Usability -Defekte geben wird, wenn Sie nicht sorgfältig verwendet werden. Zum Beispiel: Das Lesen von Bildschirmlesen ist schwer korrekt zu lesen, während kleine Bildschirmgeräte häufig durch Tabellen gestört werden, die zum Layout verwendet werden. Wir haben jedoch einige einfache Möglichkeiten, um die Verwendbarkeit von Listen -Datentabellen zu erhöhen. Gleichzeitig stellen wir eine flexible Struktur fest, um die Einstellung von Stilen mit CSS in Zukunft zu erleichtern.

Schauen wir uns das einfache Beispiel in Abbildung 3-1 an, nämlich der Liga-Rekord der American Baseball League:

Abbildung 3-1: Beispiel für ein typisches Beispiel zur Datenrepräsentation

Vielleicht sind dies eine sehr deprimierende statistische Daten für Red Sox-Lüfter, aber die Abbildung 3-1 ist ein perfektes Beispiel für die Listendaten. Es verfügt über drei Tabellenkopfer (Jahr, Gegner, Saisonrekord (WL)), gefolgt von vierjährigen Daten. Auf der Tabelle befindet sich der Titel der Tabelle, die den Inhalt der Tabelle erläutert.

Die Möglichkeit, diese Datentabelle zu markieren, ist sehr intuitiv, und wir können dies mit einem solchen Code tun:

<P Align = Center> Boston Red Sox World Series Championships </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>

</table>

Die auf diese Weise gezeigten Ergebnisse sollten Abbildung 3-1 sehr ähnlich sein, aber wir können dieser Grundlage einige Verbesserungen hinzufügen.

Erstens können wir ein semantischeres <Caption> -Tag verwenden, um die Boston Red Sox World Series -Meisterschaften zu speichern. Das <Caption> -Tag muss unmittelbar nach dem <table> -Stag -Tag befolgt werden, mit dem normalerweise den Titel der Tabelle oder die Beschreibung der Tabelleninformationen gespeichert werden.

Es scheint, dass es den Benutzern einfacher macht, das Thema der Tabelle zu sehen, und es kann auch Menschen helfen, die den Inhalt des Webs auf andere Weise kennen.

Entfernen wir den Anfangsabsatz und fügen Sie die richtige <Caption> hinzu:

<tabelle>

<Caption> Boston Red Sox World Series Championships </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>

</table>

Wichtig ist, dass der Titel das Thema der folgenden Informationen schnell vermitteln muss. Gemäß den Standardeinstellungen zentrieren die meisten visuellen Browser den Text im <Caption> -Tag oben in der Tabelle. Natürlich können wir CSS verwenden, um den Stil der Standardeinstellungen später zu ändern. Dieses Problem wird in der Erweiterung der Spitzen dieses Kapitels erörtert. Tatsächlich befindet sich der Titel jetzt in einem einzigartigen Tag, wodurch unsere nachfolgende Änderung einfacher und einfacher funktioniert.

Vorherige Seite1 2 3 4 5 6 7 8 Nächste Seite Lesen Sie den vollständigen Text