Aufbau einer Tabelle l table leitet Tabelle ein
Aufbau einer Tabelle l <table>: leitet Tabelle ein l border="Wert": legt Umrandung fest l </table>: beendet die Tabelle l <tr>: definiert eine Zeile l <td>: definiert eine Zelle l Beispiel: <table border="5"><tr><td>Dies ist die kleinstmö gliche Tabelle. </td></tr></table> l Ergebnis: 8. Tabellen 1
Breite einer Tabelle l Standardmäßig: abhängig vom Text l Individuell gestalten: mit Attribut width="Wert" (Angabe in Pixel oder Prozent) l Bei Prozentangabe: 100% = Fensterbreite <table border="1" width="50%"> <th>Tabelle mit Breitenangabe</th> <tr> <td>Diese Tabelle hat eine Breitenangabe von 50 Prozent. </td> </tr> <td>Das bedeutet: Egal wie viel Text in der Tabelle steht, sie hat immer eine Breite von 50% des Fensters. </td> </tr> </table> 8. Tabellen 2
Breite von Spalten l Definieren über Attribut width="Wert" l Angabe in Pixel, Prozent oder *: l Prozentwerte sind abhängig von der Tabellenbreite (Summe aller Spaltenbreiten müssen 100% ergeben) l Pixelangaben sind feste Werte l * bedeutet: Rest, der übrigbleibt l Innerhalb einer Tabelle gilt Angabe der ersten Spalte auch für alle folgenden Spalten 8. Tabellen 3
Beispiel für Spaltendefinition l Tabelle mit Breite 75%, Spaltenbreiten: 20%, 30%, 50% l Tabelle mit Breite 75%, Spaltenbreiten: 20%, *, 50% l Tabelle mit Breite 75%, Spaltenbreiten: 150, *, 100 Pixel 8. Tabellen <table align="center" border="1" width="75%" <tr><td width="20%">20%</td> <td width="30%">30%</td> <td width="50%">50%</td></tr> </table>nbsp; <table align="center" border="1" width="75%" <tr><td width="20%">20%</td> <td width="*">*</td> <td width="50%">50%</td></tr> </table>nbsp; <table align="center" border="1" width="75%" <tr><td width="150">150</td> <td width="*">*</td> <td width="100">100</td></tr> </table>nbsp; 4
Breitenangabe außer Kraft setzen l Die Breitenangabe ist nur wirksam, wenn der Inhalt einer Zelle die Breitenangabe nicht überschreitet. l Beispiel: 8. Tabellen 5
Spalten organisieren l Browser muss immer erst gesamte Tabelle einlesen, bevor er sie darstellen kann. l HTML 4. 0 bietet Befehl <colgroup>: l Browser kann Tabelle während des Ladens aufbauen. l Beispiel: Jede Spalte erhält eine Breite von 200 Pixel: <table border="1"><colgroup><col width="200"></colgroup<<tr>. . . </tr></table> l HTML 4. 0 bietet Attribut span="Anzahl": l Mehrere aufeinander folgende Spalten erhalten dieselbe Eigenschaft. l Beispiel: <col span="3"> width="100" 8. Tabellen 6
Beispiel zur Organisation von Spalten (1) (2) (3) (4) (5) <table border="3"> <colgroup> <col span="5" width="10%"> <col span="2" width="25%> </colgroup> (6) <tr> <td>Zelle 1</td>. . . </table> 8. Tabellen 7
Tabellenüberschrift l Befehl <caption>: erstellt Tabellenüberschrift l Attribut align: richtet Überschrift aus l Beispiel: l Überschrift links über der Tabelle: <caption align="left"> l Überschrift rechts über der Tabelle: <caption align="right"> l Überschrift zentriert über der Tabelle: <caption align="center"> l Überschrit unterhalb der Tabelle: <caption align="bottom"> 8. Tabellen 8
Ausrichten einer Tabelle l Standardmäßige Ausrichtung einer Tabelle: links l Tabelle individuell ausrichten: Attribut align="Ausrichtung" l Beispiel: l Tabelle links, Text fließt rechts: align="left" l Tabelle rechts, Text fließt links : align="right" l Tabelle zentriert, Text in der nächsten Zeile : align="center" 8. Tabellen 9
Text horizontal in Tabellenzelle ausrichten l Standardmäßige Ausrichtung in Zellen: linksbündig l Zelle individuell ausrichten: Attribut align="Ausrichtung" l Beispiel: l Text linksbündig in Zelle: align="left" l Text rechtsbündig in Zelle: align="right" l Text zentriert in Zelle: align="center" l Text als Blocksatz in Zelle: align="justify" 8. Tabellen 10
Text vertikal in Tabellenzelle ausrichten l Zelle individuell ausrichten: Attribut valign="Ausrichtung" l Beispiel: l Text oben in der Zelle: <td valign="top"> l Text vertikal in der Zelle: <td valign="middle"> l Text unten in der Zelle: <td valign="bottom"> l Textzeilen aller Zellen einer Zeile immer auf gleicher Höhe: <td valign="baseline"> 8. Tabellen 11
Textausrichtungsarten kombinieren <table border="1"> <th colspan="2">Ausrichtung mit VALIGN und ALIGN</th> <tr valign="top" align="right" <td>In diesem Beispiel. . . </td> <td>In dieser Zelle. . . </td> </tr> <tr valign="top" align="right"> <td>Auch in dieser Zelle. . . </td> <td>Nur wird hier. . . </td> </tr> </table> 8. Tabellen 12
Spalten verbinden l Attribut colspan="Anzahl": Anzahl der Spalten, über die sich die Zelle erstrecken soll l Attribut innerhalb der tags <th> oder <td> l Beispiel: l <td colspan="2"> eine Zelle über zwei Spalten l <th colspan="13"> ein Tabellenkopf über 13 Spalten 8. Tabellen 13
Tabelle mit verbundenen Spalten l Fehlersuche in Tabellen mit verbundenen Zellen äußerst schwierig l Zuerst Tabelle mit allen Zellen erstellen und testen l Dann Spalten miteinander verbinden Grundtabelle <table border="1"> <tr> <td></td> </tr> </table> 8. Tabellen Modifizierte Tabelle <table border="1"> <tr> <td>Spalte 1</td> <td>Spalte 2</td> </tr> <td colspan="2">colspan=2></td> </tr> </table> 14
Zeilen verbinden l Attribut rowspan="Anzahl": Anzahl der Zeilen, über die sich die Zelle erstrecken soll l Attribut innerhalb der tags <th> oder <td> l Beispiel: l <td rowspan="4"> eine Reihe über vier Spalten l <th rowspan="7"> ein Tabellenkopf über sieben Zeilen 8. Tabellen 15
Tabelle mit verbundenen Zeilen l Fehlersuche in Tabellen mit verbundenen Zellen äußerst schwierig l Zuerst Tabelle mit allen Zellen erstellen und testen l Dann Zeilen miteinander verbinden Grundtabelle <table border="1"> <tr> <td></td> </tr> </table> 8. Tabellen Modifizierte Tabelle <table border="1"> <tr> <td>Zeile 1</td> <td rowspan="2">rowspan=2</td> </tr> <td>Zeile 2</td>. . . <!--gelöschte Zelle--> </tr> </table> 16
Besonderheit bei Tabellen mit verbundenen Zeilen l Browser baut Tabelle zeilenweise auf l Verbundene Zeilen stehen jedoch untereinander l Beispiel für korrekten HTML-Code: Tabelle HTML-Code <table border="1"> <tr> <td> </td> <td rowspan="2"> </td> </tr> <tr><td> </td></tr> <td> </td> <td rowspan="2"> </td> </tr> <tr><td> </td></tr> </table> 8. Tabellen 17
Spalten und Zeilen verbinden Grundtabelle <table border="1"> <tr><td></td> <td></td> <td></td></tr> </table> 8. Tabellen Modifizierte Tabelle <table border="1"> <tr><td> </td> <td></td>&; nbsp</tr> <td colspan="2" rowspan="3"> colspan=2 rowspan=3</td> </tr> <tr><td> </td></tr> </table> 18
Kopf, Körper, Fuß l Attribut <thead>: Kopfteil der Tabelle (Überschriften) l Attribut <tbody>: Hauptteil der Tabelle l Attribut <tfoot>: Fußteil der Tabelle (Erläuterungen) l Jedes Attribut muss mindestens eine Tabellenzeile <tr> enthalten l Beispiel: <table> <thead><tr><td>Kopfdaten</td></tr></thead> <tbody><tr><td>eigentliche Daten</td></tr></tbody> <tfoot><tr><td>fuß daten</td></tr></tfoot> </table> 8. Tabellen 19
Zellabstand l Attribut <cellspacing="Pixel">: l Vergrößert den Abstand der einzelnen Zellen einer Tabelle l Angabe im Befehl <table> l Beispiel: <table cellspacing="5"> 8. Tabellen 20
Abstand der Zellinhalte l Attribut cellpadding="Pixel": l Vergrößert den Abstand der einzelnen Zellen einer Tabelle l Angabe im Befehl <table> l Beispiel: <table cellpadding="7"> 7 Pixel Abstand 8. Tabellen 21
Tabellenlinien mit dem Attribut rules="Art" l Spezielle Angaben zum Trennen von Zeichen und Spalten im Internet Explorer l Angabe muss im Befehl <table> erfolgen l Art: l none: es wird keine Trennlinie gezeichnet l groups: Trennlinie zwischen Gruppen (thead, tbody, tfoot) l rows: Trennlinie zwischen jeder Zeile l cols: Trennlinie zwischen jeder Spalte l all: es wird eine Trennlinie um alle Zellen gezeichnet 8. Tabellen 22
Rahmenfarbe l Die Standardfarbe des Tabellenrahmens ist grau. l Der Internet Explorer ermöglicht, die Rahmenfarbe anzupassen. l Befehle zur Angabe der Rahmenfarbe innerhalb der Anweisung <table>: l bordercolor="Farbe" l bordercolorlight="Farbe" l bordercolordark="Farbe" l Beispiel: <table bordercolorlight="cyan" bordercolordard="blue" border="5"> 8. Tabellen 23
Hintergrundfarbe l Attribut bgcolor="Farbe" legt Hintergrundfarbe fest: l für gesamte Tabelle (<table>) l für eine Zeile (<tr>) l für eine Zelle (<th>, <td>) l Die Farbe des größten Tabellenelements bestimmt auch alle weiteren Tabellenelemente, solange diese nicht separat geändert wurden. 8. Tabellen 24
Hintergrundbilder l Attribut background="Dateiname" legt Hintergrund fest für: l Eine Tabelle (<table>) l Eine Zeile (<tr>) l Eine Zelle (<td>) l Beispiele: l <table background="tabellehg. jpg"> l <tr background="zeilenhg. jpg"> l <td background="zellenhg. jpg> l Internet Explorer erkennt Angabe für Zeile <tr> nicht, daher muss jeder einzelnen Zelle ein Hintergrund zugewiesen werden. 8. Tabellen 25
Vorrangregeln der Tabellenelemente l Für horizontale Ausrichtung: Zellen vor Zeilen: <td> vor <tr> l Für vertikale Ausrichtung: Zeilen vor Zellen: <tr> vor <td> l Eigenschaften einzelner Elemente vor höheren Elementen: <td> vor <th> vor <table> l Eigenschaften von Zellinhalten vor Eigenschaften der Zellen: <p align="center"> vor <td align="right"> 8. Tabellen 26
Fehlersuche in der Tabellendarstellung l Zum besseren Überblick den Rahmen der Tabelle auf border="1" stellen l Schließende spitze Klammern alle vorhanden? l End-Tags alle vorhanden? l Haben alle Spalten/Reihen dieselbe Zellenanzahl? l Zellinhalt (mindestens  )? l Bei Attribut colspan/rowspan zu viele/zu wenige Zellen? 8. Tabellen 27
Tipps zur Erstellung einer Web-Seite l Lange Textpassagen besser in Tabellen darstellen l Viel Information besser auf mehrere kleine Tabellen aufteilen wegen langer Ladezeit l Erstelltes Dokument in verschiedenen Browsern anschauen l Web-Seite in unterschiedlich großen Browser-Fenstern testen 8. Tabellen 28
Beispiel zur Erstellung einer Web-Seite Navigationsleiste mit Hilfe einer Tabelle erstellt Technische Daten in einer Tabelle 8. Tabellen 29
- Slides: 29