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