Informatik :: HTML :: Tabellen

Tabellen

Struktur | Gestaltung | Aufgaben

Struktur

Syntax Erklärung Ansicht im Browser
<tableöffnender Tabellen-Tag
Name Vorname Alter
Meier Franz 21
   <tröffnender Zeilen-Tag (von table row)
       <th>Name</th> Kopfzelle 1 (von table head)
       <th>Vorname</th> Kopfzelle 2
       <th>Alter</th> Kopfzelle 3
   </trschließender Zeilen-Tag
   <tr>  öffnender Zeilen-Tag
       <td>Meier </td> Datenzelle 1 (von table data)
       <td>Franz </td> Datenzelle 2
       <td>21 </td> Datenzelle 3
   </tr>  öffnender Zeilen-Tag
</table> scließender Tabellen-Tag

Der Inhalt von Kopfzellen erscheint standardmäßig fett und zentriert.
Der Inhalt von Datenzellen erscheint standardmäßig linksbündig.


Seitenanfang

Gestaltung

Attribute im <table>-Tag Erklärung
ALIGN="left | center | right" Ausrichtung der Tabelle
BGCOLOR="Farbcode" Hintergrundfarbe der Tabelle
BORDER="Zahl" Rahmenstärke in Pixel
CELLSPACING="Zahl" Gitternetzdicke in Pixel
CELLPADDING="Zahl" Abstand des Zellinhaltes von Rand in Pixel
HEIGHT="Zahl | Zahl%" Höhe der Tabelle in Pixel | % der Fensterhöhe
WIDTH="Zahl | Zahl%" Breite der Tabelle in Pixel | % der Fensterbreite

Attribute im <th>- und <td>-Tag Erklärung
ALIGN="left | center | right" Ausrichtung des Zellinhalts
BGCOLOR="Farbcode" Hintergrundfarbe der Zelle
COLSPAN="n" verbindet n Spalten zu einer Spalte
HEIGHT="Zahl | Zahl%" Höhe der Zelle in Pixel | % der Tabellenhöhe
ROWSPAN="n" verbindet n Zeilen zu einer Zeile
VALIGN="top | middle | bottom" vertikale Ausrichtung des Zellinhalts
WIDTH="Zahl | Zahl%" Breite der Zelle in Pixel | % der Tabellenbreite

Seitenanfang

Aufgabe 1:

Erstelle das HTML-Dokument 05_Tabellen1.html welches unten abgebildete Web-Seite liefert!

Beachte dabei folgende Formatierungshinweise:

Aufgabe 2:

Erstelle das HTML-Dokument 05_Tabellen2.html welches unten abgebildete Web-Seite liefert!

Beachte dabei folgende Formatierungshinweise:


Seitenanfang