Tabellen, Tabellen, nichts als Tabellen?
Aus diesem Zeitalter sind wir bereits wieder heraus in HTML, vor allem seit dem Zeitalter von CSS - denn Tabellen können auf
Internetseiten für Behinderte Barrieren sein.
Trotzdem kommen wir gelegentlich um eine Tabelle nicht herum - wie zum Beispiel bei einer Auflistung von Position, Material und auch
noch Preis (was ja fast noch eine kleine Tabelle ergibt).
Auch andere Dinge benötigen manchmal eine Tabelle, sei es wegen der Ordnung oder wegen der unterschiedlichen Funktionen der
Browser - egal - benötigt werden sie doch.
Aber eh wir jetzt loslegen noch kurz zuvor dieser Hinweis:
Du musst jetzt nicht nur im Quelltext erstellen - nein - auch in der CSS-Datei - denn hierfür habe ich nun nichts mehr vorgearbeitet, was
aber auf Grund der Beschreibungen hier dann doch für Dich kein Problem darstellen sollte.
Sehen wir uns als erstes einmal einen einfachen Quelltext zu einer Tabelle an (für die "index"-Datei):
| Quelltext | Erläuterung |
|---|---|
| <body> | Dieser Quelltext existiert bereits in der index! |
| <table class="normal"> | Eine Tabelle mit der Klasse normal wird geöffnet (die Klasse selbst wird festgelegt in der CSS-Datei). |
| <tr> | Die erste Querreihe der Tabelle wird eröffnet, auch hier sind Klassenangaben möglich. |
| <th class="normal"> | Die erste Spaltenüberschrift wird geöffnet. |
| Positionsnummer | Die in der ersten Zelle stehende Überschrift |
| </th> | Die Zelle der ersten Spaltenüberschrift wird wieder geschlossen. |
| <th class="normal"> | Die zweite Spaltenüberschrift wird geöffnet. |
| Artikelbeschreibung | Die in der zweiten Zelle stehende Überschrift |
| </th> | Die Zelle der zweiten Spaltenüberschrift wird wieder geschlossen. |
| <th class="normal"> | Die dritte Spaltenüberschrift wird geöffnet. |
| Einzelpreis | Die in der dritten Zelle stehende Überschrift |
| </th> | Die Zelle der dritten Spaltenüberschrift wird wieder geschlossen. |
| </tr> | Die erste Querreihe wird wieder geschlossen. |
| <tr> | Die zweite Querreihe der Tabelle wird eröffnet. |
| <td class="normal"> | Der erste Zellenwert wird geöffnet |
| 01 | Der Zellenwert selbst wird angegeben. |
| </td> | Der erste Zellenwert wird wieder geschlossen. |
| <td class="normal"> | Der zweite Zellenwert wird geöffnet. |
| SELF-HTML - ein Freeware Nachschlagewerk für HTML | Der zweite Zellenwert selbst |
| </td> | Der zweite Zellenwert wird wieder geschlossen. |
| <td class="normal"> | Der dritte Zellenwert wird geöffnet. |
| 0,00 € | Der dritte Zellenwert selbst |
| </td> | Der dritte Zellenwert wird wieder geschlossen. |
| </tr> | Die zweite Querreihe wird wieder geschlossen. |
| </table> | Die Tabelle wird wieder geschlossen. |
| </body> | Dieser Quelltext existiert bereits in der index! |
Und so sieht diese Tabelle in der Kontrollseite, hier noch unformatiert, aus.
Du siehst, das Spaltenüberschrift von Haus aus anders dargestellt werden, als Zellenwerte. Dies können wir in der CCS-Datei nun auch wieder beeinflussen.
Also öffnen wir jetzt die CSS-Datei (die "formatierung.css") und legen hier folgende Klassen an:
| Angabe | Erläuterung |
|---|---|
| table.normal { } | Die Tabellenklasse normal erstellen |
| th.normal { } | Die Überschriftenklasse normal erstellen |
| td.normal { } | Den Zellenwert normal erstellen |
Folgende Angabe (innerhalb von {}) sind bei jeder Klasse möglich:
| Angabe | Erläuterung |
|---|---|
| border:none; | Mit dieser Angabe wird absolut kein Rahmen um diese jeweilige Klasse gezeichnet |
| border:1px solid #000000; | Mit dieser Angabe wird ein 1 Pixel starker schwarzer Rahmen um die jeweilige Klasse gezogen (Alternativ andere Stärke - 2px, ... | anderes Linienformat anstatt solid - dashed, ... |oder andere Farbe). |
| background-color:#ff0000; | Wie bereits vom body oder den Texten bekannt, hier ebenfalls möglich - eine andere Hintergrundfarbe für die jeweilige Klasse - hier angegeben ist ROT. |
| width:100%; | Breitenangabe der jeweiligen Klasse - 100% ist nur bei der Tabelle selbst (table.normal) möglich - die Quersumme von th und td sollte 100% ergeben (obiges Beispiel enthält 3 x td - also maximal width:33%; für td und th). |
| color:#000000; | Auch hier ebenfalls möglich - für jede Klasse eine andere Textfarbe (außer table.normal!) |
| font-size:105%; | Diese Angabe ist bereits von den Textangaben her bekannt - Änderungen an der Schriftgröße (ebenfalls nicht bei table.normal!) |
| font-family:Arial; | Festlegen oder Änderung der Schriftart (auch nicht bei table.normal!) |
| font-weight:bold; | Text in Fettschrift (alternativ normal und bolder - aber nicht bei table.normal) |
| und viele weitere |
Sinnvoll kann es auch sein, tr mit einer oder mehreren Klassen zu belegen - gerade wenn man Zeilen hervorheben möchte. Für tr ist dann also nur border und background-color effektiv ein zu beziehen.
Hier habe ich einmal eine formatierte Tabelle mit dem folgenden Quelltext
<table class="normal" summary="Ein kleiner Vergleich von Programmen">
<tr class="beige">
<th class="normal_25">Position</th>
<th class="normal_50">Beschreibung</th>
<th class="normal_25">Einzelpreis in €</th>
</tr>
<tr>
<td class="normal">01</td>
<td class="normal">
Self HTML - ein kostenloses Nachschlagewerk zum Webseiten erstellen
</td>
<td class="normal_gruen">0,00</td>
</tr>
<tr>
<td class="normal">02</td>
<td class="normal">
Paint.net - ein kostenloses Programm um Bilder zu bearbeiten
</td>
<td class="normal_gruen">0,00</td>
</tr>
<tr>
<td class="normal">03</td>
<td class="normal">
es gibt noch mehr Programme, diese kosten jedoch Geld!
</td>
<td class="normal_rot">?,??</td>
</tr>
</table>
</body>
und den folgenden Formatierungsangaben
table.normal { background-color:#ffffff; width:100%; border:2px solid blue; }
tr.beige { background-color:#F9F1D2; }
th.normal_25 { width:25%; font-size:110%, font-weight:bold; font-family:Arial; color:#000000; border:1px solid red; text-align:left; }
th.normal_50 { width:50%; font-size:110%, font-weight:bold; font-family:Arial; color:#000000; border:1px solid black; }
td.normal { font-size:95%, font-weight:normal; font-family:Vogue; color:#000000; }
td.normal_gruen { width:25%;font-size:95%, font-weight:normal; font-family:Vogue; color:#00bb00; }
td.normal_rot { width:25%; font-size:95%, font-weight:bold; font-family:Vogue; color:#ff0000; }
vorbereitet.
- Diese vorbereitete Tabelle anzeigen -
An diesem letzten Beispiel von mir zu den Tabellen siehst Du sicherlich, was man so mit einer Tabelle anstellen kann - aber nun bist Du
wieder dran - probiere mit Deiner CSS-Datei und verschiedenen Klassen ein wenig herum - Du wirst sehen - es lohnt sich.
Ein kleiner Nachtrag noch - summary="" gibt für behinderte mit geeigneter Software diesen Text als Sprache aus und sollte den Inhalt dieser Tabelle kurz beschreiben - weiterhin sinnvoll für eine solche Sprachausgabe ist in der th-Klasse folgende Angabe: "speak-header:always;", welche die Überschrift der Spalte wiederholt vor jeder Zeile - gerade für Blinde zur Erfassung des Tabelleninhaltes sehr wichtig.