HTML-Workshop: Tabellen

Präsentation zum Thema: "HTML-Workshop: Tabellen"—  Präsentation transkript:

1 HTML-Workshop: Tabellen
Hani Sahyoun Rechenzentrum Universität Hohenheim HTML-Workshop

2 Tabellen in HTML: Grundelemente
<table>: Anfang der Tabelle </table>: Ende der Tabelle <caption> Anfang Tabellenüberschrift </caption> Ende Tabellenüberschrift HTML-Workshop

3 Tabellen in HTML: Grundelemente
<tr>: Beginn einer neuen Zeile </tr>: Ende einer Tabellenzeile <th>: Kopfzelle (Spaltenüberschrift) <td>: Datenzelle HTML-Workshop

4 Tabellen in HTML: Aufbau einer Tabelle aus 3 Spalten und 3 Zeilen
<table> <caption> Tabellenüberschrift> </caption> <tr> <th>Kopfzelle: 1. Zeile, 1. Spalte <th>Kopfzelle: 1. Zeile, 2. Spalte <th>Kopfzelle: 1. Zeile, 3. Spalte </tr> HTML-Workshop

5 Tabellen in HTML: Aufbau einer Tabelle
<tr> <td>Datenzelle: 2. Zeile, 1. Spalte <td>Datenzelle: 2. Zeile, 2. Spalte <td>Datenzelle: 2. Zeile, 3. Spalte </tr> HTML-Workshop

6 Tabellen in HTML: Aufbau einer Tabelle
<tr> <td>Datenzelle: 3. Zeile, 1. Spalte <td>Datenzelle: 3. Zeile, 2. Spalte <td>Datenzelle: 3. Zeile, 3. Spalte </tr> </table> HTML-Workshop

7 Tabellen in HTML: Aufbau einer Tabelle
So sieht die Tabelle aus: Tabellenüberschrift HTML-Workshop

8 Tabellen in HTML: Besondere Attribute
Rahmendicke, Zellenabstand, Textabstand <table border = "Rahmendicke"> <table cellspacing = "Zellenabstand"> <table cellpadding = "Abstand zwischen Zellenrand und Text"> HTML-Workshop

9 Tabellen in HTML: Besondere Attribute
Hinweis: Alle Größenangaben sind in Pixel = Bildpunkte auf dem Bildschirm Beispiel: <table border = "1" cellspacing = "3" cellpadding = "5"> HTML-Workshop

10 Tabellen in HTML: Besondere Attribute
Höhe und Breite von Tabellenzellen: Höhe und Breite einer Kopfzelle: <th height = "Zellenhöhe " width= "Zellenbreite"> Höhe und Breite einer Datenzelle: <td height = "Zellenhöhe " width= "Zellenbreite"> HTML-Workshop

11 Tabellen in HTML: Besondere Attribute
Horiz. Ausrichtung: links, zentriert und rechts <th align = "left" | "center" | "right" > <td align = "left" | "center" | "right" > Beispiele: <th align = "center"> <td align = "left"> HTML-Workshop

12 Tabellen in HTML: Besondere Attribute
Vertikale Ausrichtung: oben, mitte und unten <th|td valign = " top|middle|bottom " > Beispiele: <th valign = "top"> <td valign = "bottom"> HTML-Workshop

13 Tabellen in HTML: Besondere Attribute
Hintergrundfarbe für gesamte Tabelle <table bgcolor = " Hintergrundfarbe " > Beispiele: <table border bgcolor = " white " > <table border bgcolor = " #00ff00 " > (grün) HTML-Workshop

14 Tabellen in HTML: Besondere Attribute
Farben von Tabellenzellen und -text <th|td bgcolor = " Hintergrundfarbe " > <font color = " Textfarbe " >Text</font> Beispiele: zu Farbangaben: <th bgcolor = " blue " > <font color= " white " >Weißer Text</font> HTML-Workshop

15 Tabellen in HTML: Besondere Attribute
Farben von Tabellenzellen und -text Hinweis: Farbangaben können auch im rgb-Code erfolgen (s. Beispiele: <th bgcolor = " #0000ff " > (Hintergrund blau) <font color= " #ffffff " >Weißer Text</font> HTML-Workshop

16 Tabellen in HTML: Zellen in einer Zeile oder Spalte verbinden
<th|td colspan = "Zahl der Spalten"> <th|td rowspan = "Zahl der Zeilen"> HTML-Workshop

17 Tabellen in HTML: Zellen in einer Zeile oder Spalte verbinden
Beispiel 1: Zellen in einer Zeile verbinden <table border> <tr> <th colspan=2>Zelle, die sich über 2 Spalten erstreckt </tr> <td>Inhalt der ersten Zelle unter der erstreckten Zelle <td>Inhalt der zweiten Zelle unter der erstreckten Zelle </table> HTML-Workshop

18 Tabellen in HTML: Zellen in einer Zeile oder Spalte verbinden
So sieht die Tabelle aus Zelle über 2 Spalten Zelle Zelle HTML-Workshop

19 Tabellen in HTML: Zellen in einer Zeile oder Spalte verbinden
Beispiel 2: Zellen in einer Spalte verbinden <table border> <tr> <th rowspan=2>Zelle, die sich über 2 Zeilen erstreckt <td >Inhalt der ersten Zelle neben der erstreckten Zelle </tr> <td>Inhalt der zweiten Zelle neben der erstreckten Zelle </table> HTML-Workshop

20 Tabellen in HTML: Zellen in einer Zeile oder Spalte verbinden
So sieht die Tabelle aus Zelle Zelle über 2 Zeilen Zelle HTML-Workshop