Überblick« zusätzlich einen Lösungsansatz vor, der durch reine CSS-Selektorensyntax versucht, das Problem im Internet Explorer zu umgehen. Dieser Lösungsansatz ist jedoch immer nur auf konkrete Inhalte anwendbar: http://www.peterkroener.de/html5-was-geht-heute-schon-was-geht-nicht-der-grosse-ueberblick/ Eine dritte Lösung wird in dem Artikel ebenfalls vorgestellt und soll hier in etwas anderer Form ebenfalls erläutert werden. Notieren Sie ein unbekanntes Element als unmittelbares Kindelement eines anderen, bekannten Elements. Beispiele:
oder
Text Text
. Das äußere, bekannte Element bekommt dabei eine Klasse zugewiesen. Der Klassenname ist frei wählbar. Sinnvollerweise bietet sich der Name des inneren, unbekannten Elements an. Solche Elemente können Sie nun in einem separaten Stylesheet, das nur der Internet Explorer interpretiert, mit CSS formatieren. Ein solches Stylesheet können Sie mit Hilfe eines Conditional Comments (lesen Sie mehr dazu im Abschnitt 2.1.3 Kommentare in HTML ) einbinden. So erzielen Sie letztlich die gleichen Formate wie in anderen Browsern, mit dem Unterschied, dass im Internet Explorer in Wirklichkeit nicht das nav -Element formatiert ist, sondern das umschließende div -Element. Dieser Ansatz hat aber einen Nachteil: Er ist nur für das Formatieren mit CSS einsetzbar. Scripts können auf diese Elemente nur eingeschränkt zugreifen. Denn der Internet Explorer rendert die umbekannten Elemente noch immer fehlerhaft in der DOM-Struktur.
5 Tabellen • Wie Sie in HTML Tabellen definieren und strukturieren • Wie Sie tabellarische Daten für eine nicht-optische Ausgabe semantisch optimieren können • Was es mit den früheren Tabellenlayouts auf sich hat 5.1 Aufbau von Tabellen Tabellen bestehen aus Zeilen und Spalten, aus denen sich die Zellen der Tabelle ergeben. Dazu kommen logische Bereiche wie Tabellenkopf, Tabellenkörper und Tabellenfuß sowie Zellen, die Zeilen- oder Spaltenüberschriften darstellen. Diese Grundeigenschaften einer Tabelle lassen sich mit HTML abbilden. 5.1.1 Einfache Tabelle Eine einfache Tabelle besteht aus einer oder mehreren Zeilen mit je einer oder mehreren Spalten. Die dabei entstehenden Tabellenzellen können Kopfzellen oder Datenzellen sein. Beispiel
Städte im Vergleich
Hier werden die Städte Berlin, Hamburg und München verglichen.
Berlin
Hamburg
München
Miljöh
Kiez
Bierdampf
Buletten
Frikadellen
Fleischpflanzerl
Weitere Vergleichsmerkmale gibt es sicher auch noch.
Bild 5.1: Nackte Tabellen in HTML bewirken eine tabellarische Anordnung, jedoch noch keine Feinformatierung. Erläuterung Eine Tabelle wird durch
…
markiert ( table = Tabelle).
leitet eine neue Tabellenzeile ein (tr = table row = Tabellenzeile). Im Anschluss daran werden die Zellen (Spalten) der betreffenden Reihe definiert. Am Ende einer Tabellenzeile wird ein abschließendes
notiert. Kopfzellen werden durch
…
markiert und Datenzellen durch
…
(th = table header = Tabellenkopf, td = table data = Tabellendaten). Die folgende Abbildung verdeutlicht den Zusammenhang der Elemente. Bild 5.2: HTML-Auszeichnung einer Tabelle In einer Datenzelle ( td ) ist sogenannter Flow-Content erlaubt, also Text und die meisten anderen HTML-Elemente. Auch eine vollständige weitere Tabelle können Sie innerhalb einer Zelle notieren. Bei Kopfzellen ( th ) sind dagegen nur Text und Elemente erlaubt, die keine neue Zeile im Textfluss erzeugen (sogenannter Phrasing Content). Weitere Hinweise Auch bei Tabellen folgt HTML dem Grundsatz, von sich aus nur ganz wenig Formatierung zur Verfügung zu stellen. Tabellen werden in Browsern per Voreinstellung ohne Rahmen und Gitternetzlinien angezeigt. Die Breite von Spalten und die Höhe von Zeilen wird aufgrund der Inhalte kalkuliert. Tabellen nehmen per Default nicht mehr Breite ein, als es der Inhalt erfordert. Nachfolgender Inhalt beginnt jedoch in jedem Fall erst unterhalb der Tabelle. Inhalte von Kopfzellen stellen die meisten Browser fett und zentriert dar.Vertikal werden die Inhalte von Zellen mit unterschiedlich hohem Inhalt per Default mittig ausgerichtet. Mit