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

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

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

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

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

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

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

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

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

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

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

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

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

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

Tabellen in HTML: Besondere Attribute Farben von Tabellenzellen und -text Hinweis: Farbangaben können auch im rgb-Code erfolgen (s. http://www.uni-hohenheim.de/w3-info/html/muenz/tcae.htm#a2) Beispiele: <th bgcolor = " #0000ff " > (Hintergrund blau) <font color= " #ffffff " >Weißer Text</font> HTML-Workshop

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

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

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

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

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