Standardisierte Designlösungen – Markup Language and Style Handbook Web Standards Solutions Das Markup and Style Handbook Teil 1: Machen Sie sich mit Markup vertraut, beginnend mit der Markup-Syntax Kapitel2 Böse Form? Wussten Sie, wann die Verwendung von Tabellen zu einer Sünde geworden ist? Tatsächlich lautet der größte Mythos über das Schreiben von Webseiten, die auf Webstandards basieren: „Verwenden Sie nie wieder Tabellen!“ Die Pest muss versiegelt und in staubige Schränke geworfen und als Antiquitäten aus den Anfängen des Internets aufbewahrt werden. Woher kommt dieser Ekel, zumindest am Anfang? Grund: Viele Menschen werden zuversichtlich die Vorteile des Verzichts auf das traditionelle Layout verschachtelter Tabellen und ausfüllender GIF-Bilder und den Wechsel zum flexiblen und strukturierten CSS-Layout anpreisen alle Tabellen, und beginnen sogar hartnäckig darauf zu bestehen, alle Tabellen auszuschließen – unabhängig vom Anlass Wir werden die CSS-Layout-Methode und alle Vorteile, die sich daraus ergeben, später in diesem Buch sehen. Aber zunächst einmal Schauen Sie sich an, wie Sie Tabellen im richtigen Kontext verwenden – also beim Markieren von Datenlisten. Wir werden uns ein paar einfache Möglichkeiten ansehen, um unsere Datenlisten einfacher zu verwenden und schöner zu machen it Tabelle
Es gibt absolut keinen Grund, das Tabellen-Tag beim Beschriften von Listendaten nicht zu verwenden. Aber Moment, was sind Listendaten?
Kalender
Kalkulationstabelle
Diagramm
Zeitplan Für diese Beispiele 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, was Sie erhalten, wenn Sie clevere CSS-Floats verwenden und alle Elemente positionieren Inkompatible und widersprüchliche Ergebnisse, ganz zu schweigen davon, dass das genaue Lesen aller Informationen ohne CSS zu einer unmöglichen Aufgabe werden kann. Tatsächlich müssen wir keine Angst vor Tabellen haben – wir sollten sie für den Zweck verwenden, für den sie entwickelt wurden . Formulare für alle
Einer der Gründe, warum Formulare verunglimpft werden, ist, dass sie bei unsachgemäßer Verwendung Mängel in der Benutzerfreundlichkeit aufweisen. Beispielsweise haben Screenreader Probleme beim korrekten Lesen des Inhalts und ein kleiner Bildschirm Geräte werden oft durch Tabellen, die für das Layout verwendet werden, gestört, aber wir haben einige einfache Möglichkeiten, die Benutzerfreundlichkeit von Listendatentabellen zu erhöhen. Erstellen Sie gleichzeitig eine flexible Struktur für zukünftiges Styling mit CSS. Schauen wir uns Abbildung 3 an - Ein einfaches Beispiel aus 1, das ist der Ligarekord der American League:
Abbildung 3-1: Typisches Beispiel einer Datentabelle Vielleicht ist das für Red Sox-Fans sehr deprimierend. Statistische Daten, Aber Abbildung 3-1 ist ein perfektes Beispiel für Listendaten. Sie enthält drei Tabellenüberschriften (Jahr, Gegner, Saisonrekord (w-l)), gefolgt von Daten für vier Jahre. Über der Tabelle befindet sich der Tabellentitel und die Beschreibung Tabelle.Die Art und Weise, diese Datentabelle zu markieren, ist sehr intuitiv. Wir können die Arbeit mit Code wie diesem abschließen:
Boston Red Sox World Series Championships< ;/ p>
Jahr
< td align ="center">Gegner
Saisonrekord (W-L)< ;/ td>
1918
Chicago Cubs
1916
Brooklyn Robins
< ;td>91-63
1915
Philadelphia Phillies
101-50
1912
Giants
105-47
Die auf diese Weise angezeigten Ergebnisse sollten die sein Das gleiche wie das Bild 3-1 ist sehr ähnlich, aber wir können auf dieser Basis einige Verbesserungen hinzufügen. Erstens können wir ein semantischeres
-Tag verwenden, um „Boston Red Sox World Series Championships“ zu speichern. caption> Das ;-Tag muss unmittelbar nach dem
-Tag folgen, das normalerweise zum Speichern des Tabellentitels oder der Beschreibung der Tabellendaten verwendet wird. Es scheint, dass es für Benutzer einfacher ist, es zu sehen das Thema der Tabelle, und es kann auch jemandem helfen, der den Inhalt der Seite auf andere Weise kennt. Lassen Sie uns den ersten Absatz herausnehmen und die richtige hinzufügen:
标签也能帮助非可视化浏览器这部分我们稍后进行深入讨论. 示例表格中的表头是最上面的那一行: Jahr, Gegner und Saisonrekord (W-L). >
Boston Red Sox World Series Championships
Jahr
< th id="opponent">Opponent
Saisonrekord (W-L)
< ;tr> ;
1918
Chicago Cubs
75-51
;/tr>
1915
Philadelphia Phillies
101-50
1912
New York Giants
105- 47
Wir wählen einen kurzen und aussagekräftigen Namen für jede Header-ID und geben dann allen Daten entsprechende Header-Attribute hinzu die Zelle, damit der Inhalt mit der richtigen Header-ID übereinstimmt:
Boston Red Sox World Series Championships
Jahr
Gegner
Saisonrekord (W-L)
< >1918
Chicago Cubs
75-51 < ;/tr>
1916
Brooklyn Robins< ;/td>
91-63
1915
Philadelphia Phillies
101-50
1912
New York Giants
105-47
Nachdem die Entsprechung zwischen der Tabellenüberschrift und dem Inhalt hergestellt wurde, wird der Bildschirmleser It Es ist möglich, jede Zeile der Tabelle auf diese Weise auszulesen: „Jahr: 1918, Gegner: Chicago Cubs, Saisonrekord (W-L): 75-51“, verglichen mit dem Auslesen des Inhalts jeder Zelle von links nach rechts, Dies macht viel mehr Sinn. Jedem
eine eindeutige ID zu geben, hat weitere Vorteile. Wir können diese Identifikationsbasis verwenden, um spezielle CSS-Regeln festzulegen, die in der Erweiterung der Technik am Ende besprochen werden Kapitel. Diese Methode.
#p#
Verwenden Sie das abbr-Attribut Im vorherigen Beispiel haben Sie möglicherweise das Gefühl, dass der „Season Record (W-L)“ in der Kopfzeile zu lang ist, um ihn sprachlich auszusprechen Synthesizer Solange wir das Attribut abbr hinzufügen, können wir den Ausspracheinhalt kürzen und gleichzeitig den Originaltext in der
-Zelle für den visuellen Browser beibehalten.
Jahr
Gegner
Saisonrekord (W-L)< ;/th>
1918
Chicago Cubs
1916
Brooklyn Robins
91-63
1915
Philadelphia Phillies
101-50
1912
< ;td> New York Giants
105-47
Wir haben abbr="Record" hinzugefügt >Hier möchte ich auch drei tabellenbezogene Tags erwähnen, die nicht nur eine genauere Semantik für die Tabellenstruktur bieten, sondern auch zusätzliche Tags für css, sodass Sie beim Formatieren von Tabellenzeilen nicht < verwenden müssen. Es gibt so viele Klassen im Tag-Design. Zitieren einer W3C-Beschreibung dieser Tags in der HTML4.01-Spezifikation (http://www .php.cn/): Zitat: Tabellenzeilen können mithilfe der Tags thead, tfoot und tbody in Tabellenköpfe, Tabellenfüße und eine unbegrenzte Anzahl von Tabellenkörpern unterteilt werden. Mit dieser Klassifizierungsmethode kann der Browser die Funktion zum unabhängigen Scrollen des Tabellenkörpers unterstützen. Beim Drucken langer Tabellen können die Kopf- und Fußzeilen auch auf jeder Seite wiederholt werden, die Tabellendaten enthält.
Daher ist dies möglich Erleichtert auch das Lesen von Tabelleninhalten für Browserbenutzer, insbesondere lange Tabellen. muss vor
Zuerst den Inhalt und markieren Sie die Tabelle auf diese Weise der Tabellenzeilenklassifizierung. Sie sieht so aus:
...table Kopfzeileninhalt...
...Tabellenfußzeileninhalt...
...Tabellendatenzeile...
...Tabellendatenzeile ...
...Tabellendatenzeile...
< ;/table>
Sie werden feststellen, dass die Kopf- und Fußzeilendaten von -Tags umgeben und vor den Tabellendatenzeilen platziert sind. Wie ich bereits sagte, liefern diese Tags nicht nur mehr Informationen für die Tabellensemantik und kann auch Stilanker für CSS bereitstellen, sodass Sie CSS-Regeln für diese spezifischen Inhalte festlegen können, ohne so viele Klassen für jeden
entwerfen zu müssen. Zum Beispiel, wenn wir nur Daten geben möchten Block (markiert mit
) legt eine andere Hintergrundfarbe als andere Blöcke fest. Dann müssen wir nur noch dieses CSS-Stück schreiben, um das Ziel zu erreichen: tbody { background-color: grey ; } Wenn kein tbody-Tag vorhanden ist, müssen wir jedem
-Tag ein Klassenattribut hinzufügen, dem wir später einen grauen Hintergrund hinzufügen möchten CSS-Einstellungen Die Arbeit Das Festlegen von Stilen wird sehr einfach. Das ist ein gutes Beispiel.
#p#
Sind Tabellen böse? Ich denke, wenn wir Tabellen-Tags entsprechend ihrem ursprünglichen Zweck verwenden, lautet die Antwort definitiv „Nein!“. Missbrauch von Tabellen wird zu Recht verurteilt zum Erstellen komplexer, verschachtelter Layouts, aber Tabellen geben Datenblöcken die gute Struktur, die sie benötigen. Wir können nicht das ganze Buch damit verbringen, alles zu beschreiben, was zum Erstellen der perfekten Tabelle erforderlich ist Sie beginnen zu wissen, wie Sie einfache Tabellen erstellen, die einfach und benutzerfreundlich sind und leicht mit CSS geändert werden können. Apropos Stile: Lassen Sie uns das vorherige Beispiel mit ein paar verschiedenen CSS-Techniken modifizieren. Erweiterung von Fähigkeiten Wie im vorherigen Kapitel verwenden wir flexibles semantisch strukturiertes Markup als Basis und fügen dann mithilfe von CSS einige Stile hinzu Werfen wir zunächst einen Blick auf die einfache Grenze Mit dieser Technik erstellen wir im Beispiel einen einzeiligen Rahmen und fügen dann dem Tabellentitel und der Kopfzeile einen eindeutigen Stil hinzu. Erstellen Sie einen Rahmen. Haben Sie bereits einen 3D-Effekt für das Standardattribut des Rahmens Haben Sie genug davon? Im Allgemeinen hat das Hinzufügen von border="1" zum Tabellen-Tag einen ähnlichen Effekt wie in Abbildung 3-1. Natürlich können Sie die Methode auch hier ändern Um CSS zu verwenden, fügen wir zunächst einen Ein-Pixel-Rahmen an beiden Seiten (rechts und unten) jeder
Nur das Hinzufügen von Rändern auf beiden Seiten dient dazu, Ränder mit der gleichen Breite überall zu erstellen und dabei das Beste daraus zu machen Der Schlüssel liegt darin, dass der Browser sie korrekt anzeigen kann. Wenn ich einen Rand auf allen Seiten hinzufüge, wird es bei der Anordnung der Zellen zu einer Überlappung kommen Um den kindlichen Effekt zu erzielen, verwenden Sie nur eine Randregel. Sie werden feststellen, dass in der gesamten Tabelle in Abbildung 3-2 nur der obere und linke Rand fehlt. Um den Rand zu vervollständigen, fügen wir Stile hinzu zum
Abbildung 3-2: für th Tabellenbeispiel mit und td plus Seitenlinien auf beiden Seiten
Abbildung 3-3 Tabellenbeispiel nach dem Ausfüllen der Seitenlinien
#p#
Entfernen Sie die Lücke Jetzt haben wir eine vollständige Tabelle, aber was ist mit dem Abstand zwischen den Rändern, da die meisten Browser leider einen kleinen äußeren Patch festlegen standardmäßig werden diese lästigen Lücken sichtbar gemacht. Was wir tun können, ist das Attribut „border-collapse“ zum Tabellenelement hinzuzufügen, um diese Lücken zu entfernen und den gewünschten Stil zu erhalten. Tabelle { border-top: 1px solid #999; border-left: 1px solid #999; border-collapse: Collapse; }th, td { border-right: 1px solid #999; border-bottom: 1px solid #999; } Nachdem wir das Attribut „collapse“ zu „border-collapse“ hinzugefügt haben, können wir sehen, dass der genaue einzeilige Rahmenstil erreicht wurde, wie folgt: dargestellt in Abbildung 3-4
Abbildung 3-4: Tabellenbeispiel nach Verwendung des border-collapse-Attributs
Unterstützt die Version von IE für Mac nicht
Außer Internet Explorer für Mac unterstützen andere Browser die Abkürzung von CSS wie folgt: table { border-collapse: Collapse; } th, td { border: 1px solid # 999; } Welche Methode Sie verwenden, liegt natürlich bei Ihnen. Es gibt immer noch einige Leute, die immer noch den IE für Mac verwenden, und die Verwendung dieser alternativen Methode führt dazu, dass sie einige Duplikate von Kanten sehen. Wenn Sie sich nicht für diese Sache interessieren, verwenden wir sie Streng genommen ist dies nur ein Anzeigeproblem, und die Tabellenfunktionalität wird überhaupt nicht beeinträchtigt. Da ich den Mac-Fanatiker nicht ignorieren kann (das sollte jedem Webdesigner gefallen). In zukünftigen Beispielen werde ich weiterhin die Version verwenden, die im IE für Mac korrekt angezeigt werden kann. Erweitern Sie den Platz. Jetzt haben wir einen perfekten Tisch in unseren Händen. Er sieht etwas eng aus Allerdings... Fügen wir ein wenig Inlining zu den vorliegenden th, td-Regeln hinzu, um ihnen Luft zum Atmen zu geben (Abbildung 3-5) table { border-top: 1px solid #999; border-left: 1px solid #999; border-collapse: Collapse; } th, td { padding: 10px; border-right : 1px solid #999; border-bottom: 1px solid #999; } Abbildung 3-5: Tabellenbeispiel mit 10 Pixel innerem Patch Wussten Sie schon? Wenn Sie einen einzelnen Wert zum Festlegen des inneren Patches verwenden (z. B. 10 Pixel im vorherigen Beispiel), müssen Sie allen vier Seiten des Elements denselben Einstellungswert hinzufügen. Sie können auch der Reihenfolge im Uhrzeigersinn folgen (oben, rechts, unten, links). Geben Sie die Einstellungen für jede Seite separat an. Wenn Sie den inneren Patch auf 10 Pixel, 5 Pixel, 2 Pixel und 10 Pixel festlegen, wird oben ein innerer Patch mit 10 Pixeln, rechts ein innerer Patch mit 5 Pixeln und unten ein innerer Patch mit 2 Pixeln hinzugefügt. Fügen Sie auf der linken Seite einen 10 Pixel großen inneren Patch hinzu. Eine weitere Abkürzung: Wenn die Einstellungswerte für oben und unten gleich sind und auch die Einstellungswerte für links und rechts gleich sind , Sie müssen sie jeweils nur einmal festlegen. Wenn Sie „Wenn Polsterung: 10px 5px“ festlegen, werden 10px innere Patches zum oberen und unteren Teil hinzugefügt und 5px innere Patches werden zur linken und rechten Seite hinzugefügt > Abbildung 3-6: Legen Sie die inneren Patches im Uhrzeigersinn und die Reihenfolge der äußeren Grenzen fest
#p#
Anpassen des Anzeigeeffekts der ZählerkopfzeileWir können der Zählerkopfzeile ganz einfach eine Hintergrundfarbe hinzufügen und verschiedene Schriftarten auswählen, um die Zählerkopfzeile deutlicher zu machen, weil wir Das
-Tag wird verwendet, anstatt den Inhalt direkt in der Zeile festzulegen, sodass wir den Stil für den Header-Inhalt direkt festlegen können, ohne weitere Tags hinzuzufügen. Wir fügen auch unterhalb des Titels hinzu Außerdem verwenden wir verschiedene Schriftarten und Farben (natürlich rot), um den Titelinhalt hervorzuheben (Abbildung 3-7)
Ein Hintergrundbild zum Tabellenkopf hinzufügenGerade haben wir dem
-Element einen grauen Hintergrund hinzugefügt, aber wir können tatsächlich noch einen Schritt weiter gehen und ein gekacheltes Hintergrundbild verwenden Erstellen Sie schöne Effekte im Raster, zum Beispiel können wir detaillierte graue Streifen verwenden, um viele Fensterstile in Mac OS zu simulieren (andere Zeichenwerkzeuge, mit denen Sie vertraut sind). Erstellen Sie ein kleines Bild. In diesem Beispiel erstellen wir einen Wechseleffekt aus 2 Pixeln Grau und 2 Pixeln Weiß, sodass das Bild nur 4 Pixel hoch sein muss. Es spielt keine Rolle, ob die Breite unterschiedlich ist, da dadurch der gewünschte Streifeneffekt erzielt wird Um Bandbreite zu sparen, machen wir es nur 1 Pixel breit (Abbildung 3-8)
Abbildung 3-8: 1X4 Pixel Streifenbild (vergrößert) CSS Folgen Sie dem Code im Beispiel gerade. Das Einzige, was wir ändern müssen, ist, die Hintergrundfarbe auf den Pfad des kleinen Bildes zu ändern, das wir gerade erstellt haben, sofern nicht anders angegeben. Andernfalls wird das Hintergrundbild entsprechend den Standardeinstellungen geändert automatisch in jede Richtung kacheln.
Abbildung 3-9 ist die Tabelle nach der Anwendung dieses Stils. Es ist auch sehr praktisch, mit anderen zu experimentieren Sie können versuchen, den besten Effekt für Kopfzeilen oder Informationen zu erzielen. Figure 3-9 : Exemple d'utilisation d'un arrière-plan en mosaïque dans l'en-tête
#p#
Spécifier les icônes pour les identifiants Vous vous souvenez du début de ce chapitre lorsque nous avons ajouté un identifiant unique à chaque
ces L'identifiant correspond à l'attribut headers dans la liste de données pour aider les utilisateurs de navigateurs non visuels à comprendre le contenu du tableau. Nous pouvons maintenant utiliser la fonction de cet identifiant à un autre endroit, c'est-à-dire spécifier une valeur différente pour chacun.
Icône. Le chemin de l'icône sera entièrement enregistré dans le fichier CSS, vous permettant de le remplacer facilement lors de la reconstruction et de la mise à jour du site sans avoir à modifier la partie étiquette. Icône J'utilise Photoshop et j'ai créé trois icônes uniques, qui sont utilisées sur chaque en-tête de tableau dans l'exemple : Année, Adversaire et Record de saison (W-L). La figure 3-10 montre ces trois icônes : . image 3-10 Il n'est pas difficile d'ajouter du CSS aux trois icônes d'en-tête CSS produites par hotoshop, car nous avons formulé un identifiant unique pour chaque
, afin que nous puissions Utilisez directement l'attribut background pour spécifier l'icône correcte. tableau { border-top : 1px solid #999; border-left : 1px solid #999; } caption { famille de polices : Arial, sans-serif; couleur : #993333; padding-bottom : 6px; } th, td { padding : 10px ; border-right : 1px solid #999; border-bottom : 1px solid #999; } th { famille de polices : Verdana, sans-serif; } #année { padding-left : 26px; background : #ccc url(icon_year.gif) no-repeat 10px 50%; } #adversaire { padding- gauche : 26px; arrière-plan : #ccc url(icon_opp.gif) no-repeat 10px 50%; } #record { padding-left : 26px; arrière-plan : #ccc url( icon_rec.gif) no-repeat 10px 50%; } Vous devriez remarquer que nous utilisons une abréviation pour définir le style d'arrière-plan. Nous retirons la règle background:#ccc de la définition du th. , et placez-le à côté du nom de l'icône de chaque en-tête. Cela fera "asseoir" notre icône sur le fond gris que nous avons spécifié. Nous laissons également suffisamment d'espace pour l'icône sur le côté gauche du contenu de chaque en-tête afin que le texte ne soit pas effacé. couvrez-le. Montez, la figure 3-11 est l'effet que nous voulons : Figure 3-11 : L'effet de la formulation d'une icône unique pour chaque
avantages évidents, Cependant, si nous définissons uniquement l'image avec l'attribut background et ne définissons pas la couleur d'arrière-plan, nous devons d'abord annuler la couleur d'arrière-plan précédemment définie avec background dans
.
Combiner les règles et simplifier le contenuUne autre façon d'écrire qui peut réaliser la même fonction est de supprimer les règles qui apparaissent de manière répétée dans chaque en-tête de tableau (dans ce cas, l'image d'arrière-plan, le patch interne et la position) et de les écrire dans < ;th> et définissez-les une fois (car leurs paramètres sont effectivement les mêmes dans chaque
), puis ne conservez leurs différentes valeurs de paramètre (c'est-à-dire le chemin de l'image) au cours de la #année, #adversaire , #record definition
tableau { border-top : 1px solid #999; border-left : 1px solid #999; } caption { font- famille : Arial, sans-serif ; couleur : #993333 ; padding-bottom : 6px ; } th, td { padding : 10px ; border-right : 1px solid #999; border-bottom: 1px solid #999; } th { famille de polices : Verdana, sans-serif; padding-left : 26px; couleur d'arrière-plan : #ccc ; répétition d'arrière-plan : non-répétition ; position d'arrière-plan : 10px 50 % ; } #année { image d'arrière-plan : url (icon_year .gif); } #adversaire { background-image: url(icon_opp.gif); } #record { background: url(icon_rec.gif); > N'est-ce pas un peu plus concis ? En intégrant les mêmes règles, on peut gagner du temps et de l'énergie en définissant et modifiant à plusieurs reprises à chaque fois. Dans cet exemple, il semble qu'il n'y en ait que six. , une demi-douzaine, mais pour les feuilles de style plus grandes, les économies sont considérables.
RésuméDans ce chapitre, nous avons non seulement découvert que les tables ne sont pas mauvaises, mais aussi après avoir compris les tables en profondeur, nous avons constaté qu'ils sont très adaptés pour étiqueter des exemples de données de tableau, et qu'ils sont toujours faciles à utiliser Nous avons également constaté qu'en ajoutant certains styles, nous pouvons contrôler le mode d'affichage des données de liste, les rendant très attrayantes . Ne vous souciez plus de l'utilisation des tableaux. .
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Die Art und Weise, diese Datentabelle zu markieren, ist sehr intuitiv. Wir können die Arbeit mit Code wie diesem abschließen:
}
Abbildung 3-6: Legen Sie die inneren Patches im Uhrzeigersinn und die Reihenfolge der äußeren Grenzen fest 
Abbildung 3-7: Gestalteter Titel und 
Folgen Sie dem Code im Beispiel gerade. Das Einzige, was wir ändern müssen, ist, die Hintergrundfarbe auf den Pfad des kleinen Bildes zu ändern, das wir gerade erstellt haben, sofern nicht anders angegeben. Andernfalls wird das Hintergrundbild entsprechend den Standardeinstellungen geändert automatisch in jede Richtung kacheln. 
