Tabellen

Tabellenkonstruktionen ermöglichen es, Inhalte in ein fortgeschrittenes Layout zu füllen. Inhalte & Objekte können innerhalb eines Browserfensters nahezu ohne Beschränkungen horizontal und vertikal nebeneinander positioniert werden.

Eine Tabellenkonstruktion besteht aus drei Befehlsebenen:

<table> </table>: leitet die Tabellenkonstruktion ein und schließt sie auch wieder
Wichtiges Attribut <table border="Pixelwert">: legt Umrandung fest (Standardeinstellung der Webbrowser ist border="1", Ausnahme ist der IE 5 / Mac)
<tr> </tr>: definiert eine Tabellenzeile
<td> </td>: definiert eine Tabellenzelle innerhalb einer Tabellenzeile, nur hier werden Inhalte eingefügt.

Tabellen werden in Zeilen definiert, Browser bauen Tabellen zeilenweise auf:
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>
Tabelle </title>
</head>
<body>
Die kleinst m&ouml;gliche Tabellenkonstruktion:
<table border="1">
<tr>

<td>
Eros enim consequatvel dolore velit molestie ullamcorper wisi feugait ex iusto nisl iriuredolor odio facilisis augue qui, in esse erat qui autem ut velit. At, nisl lobortis qui ex duis delenit esse sit enim delenit lobortis, nulla lobortis eum exerci lobortis et in nisl hendrerit dolore nulla ullamcorper vel nulla exerci. </td>
</tr>
</table>

</body>
</html>

SO SIEHT'S AUS

 
Die Ausdehnung einer Tabelle ist (ohne weiter Angaben dazu) abhängig von der Menge des Inhalts der Tabellenzelle/n, d.h. die Tabelle versucht, dem Inhalt den größt möglichen Platz bereit zu stellen. Dies kann bis zu 100% der Breite des Browserfensters beanspruchen.
SO SIEHT'S AUS

:: Aktion

Um in einer einzeiligen Tabelle zusätzliche Zellen innerhalb dieser Zeile zu erhalten, können beliebig viele Zellenbefehle eingefügt werden. Es entstehen Spalten.

Zu Beachten ist die Standardeinstellung der Webbrowser bei der Ausrichtung der Zelleninhalte:

  • linksbündig
  • vertikal zentriert

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>
Tabelle </title>
</head>
<body>
<table border="1">
<tr>

<td>
Erste Zelle</td>
<td>
Zweite Zelle</td>
</tr>
</table>

</body>
</html>

SO SIEHT'S AUS
   
 

 
Tabellenkonstruktionen mit mehreren Zeilen
Wird eine Tabelle mit mehreren Zeilen konstruiert, müssen zu Beginn alle Zeilen die identische Anzahl an Zellen haben (sonst kommt es zu Fehldarstellungen).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>
Tabelle </title>
</head>
<body>
<table border="1">
<tr>

<td>
Erste Zeile, erste Zelle</td>
<td>
Erste Zeile, zweite Zelle</td>
</tr>
<tr>

<td>
Zweite Zeile, erste Zelle</td>
<td>
Zweite Zeile, zweite Zelle</td>
</tr>
</table>

</body>
</html>

SO SIEHT'S AUS
 
:: Aktion
 

 
Abstände definieren
 
Abstand der Zellen zueinander
Mit dem Attribut <table cellspacing="Pixelwert"> wird ein unsichtbarer Rahmen um die Zellen eingefügt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>
Tabelle </title>
</head>
<body>
<table border="1" cellspacing="10">
<tr>

<td>
Erste Zeile, erste Zelle</td>
<td>
Erste Zeile, zweite Zelle</td>
</tr>
<tr>

<td>
Zweite Zeile, erste Zelle</td>
<td>
Zweite Zeile, zweite Zelle</td>
</tr>
</table>

</body>
</html>

SO SIEHT'S AUS
 
:: Aktion

Abstand zwischen Zellenrand und Zelleninhalt
Mit dem Attribut cellpadding="Pixelwert" innerhalb des <table>-Tags kann ein Offset/Rahmen um den Inhalt der Zellen einer Tabelle (egal ob Text oder Grafik) gelegt werden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>
Tabelle </title>
</head>
<body>
<table border="1" cellpadding="10">
<tr>

<td>
Erste Zeile, erste Zelle</td>
<td>
Erste Zeile, zweite Zelle</td>
</tr>
<tr>

<td>
Zweite Zeile, erste Zelle</td>
<td>
Zweite Zeile, zweite Zelle</td>
</tr>
</table>

</body>
</html>

SO SIEHT'S AUS
 

 
Definition der Größe einer Tabelle oder Tabellenzelle

Mit Attribut width="Pixelwert" innerhalb des <table>-Tags kann die Breite einer Tabelle fixiert werden.
Bei Prozentangabe: 100% = totale Fensterbreite
Bei Zahlenwert: Pixelwert

Die Breitenangabe ist nur wirksam, wenn der Inhalt einer Zelle die Breitenangabe nicht überschreitet.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>
Tabelle </title>
</head>
<body>
<table border="1" width="300">
<tr>

<td>
Erste Zelle</td>
<td>
Zweite Zelle</td>
</tr>
</table>

</body>
</html>

SO SIEHT'S AUS

Über das Attribut height="Pixelwert" kann die Tabelle vertikal aufgespannt werden. Benötigt der Inhalt jedoch mehr Raum nach unten als im Attribut definiert wurde, wird dieser nicht abgeschnitten (wie z.B. in einem Textrahmen eines Layoutprogramms), sonden die Tabelle spannt sich so weit nötig auf und ignoriert damit die Angabe.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>
Tabelle </title>
</head>
<body>
<table border="1" width="300" height="300">
<tr>

<td>
Erste Zelle</td>
<td>
Zweite Zelle</td>
</tr>
</table>

</body>
</html>

SO SIEHT'S AUS

Die Attribute width="Wert" und height="Wert" können auch in den Zellen-Tag <TD> eingetragen werden. Letzlich versucht die Tabelle, die die Summe der Zellenbreiten gleich der definierten Gesamtbreite zu setzen. D.h. bei einer Tabelle mit der Gesamtbreite von 500 Pixel und der Definition der ersten Zelle mit 300 Pixel Breite wird die zweite Zelle automatisch 200 Pixel aufgespannt (ohne zusätzlich Definition).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>
Tabelle </title>
</head>
<body>
<table border="1" width="500">
<tr>

<td width="300">
Erste Zelle</td>
<td height="100">
Zweite Zelle</td>
</tr>
</table>

</body>
</html>

SO SIEHT'S AUS
 

 
Hintergrundfarbe einer Zelle einstellen
 
Attribut bgcolor="#Farbe" im Befehl legt Hintergrundfarbe fest. Der Farbwert wird als Hexadezimalwert angegeben.

  • für gesamte Tabelle <table>
  • für eine Zeile <tr> (wird von einigen Browsern ignoriert!)
  • für eine Zelle <td>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>
Tabelle </title>
</head>
<body>
<table border="1">
<tr>

<td bgcolor="#04D4D2">
Erste Zeile, erste Zelle</td>
<td bgcolor="#FF8B0E">
Erste Zeile, zweite Zelle</td>
</tr>
<tr>

<td bgcolor="#D49C04">
Zweite Zeile, erste Zelle</td>
<td bgcolor="#FF8B0E">
Zweite Zeile, zweite Zelle</td>
</tr>
</table>

</body>
</html>

SO SIEHT'S AUS
     

 
Hintergrundgrafik angeben
 
Attribut background="Dateiname" legt Hintergrund fest für:

  • Eine Tabelle <table>: wird von einigen Browsern ignoriert
  • Eine Zeile <tr>: wird von einigen Browsern ignoriert
  • Eine Zelle <td>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>
Tabelle </title>
</head>
<body>
<table border="1" width="300">
<tr>

<td background="grafik.gif">
Erste Zeile, erste Zelle</td>
<td>
Erste Zeile, zweite Zelle</td>
</tr>
<tr>

<td>
Zweite Zeile, erste Zelle</td>
<td>
Zweite Zeile, zweite Zelle</td>
</tr>
</table>

</body>
</html>

SO SIEHT'S AUS
     

 
Ausrichtung des Inhalts einer Zelle


horizontale Ausrichtung
Standard: Ausrichtung von Inhalten in Zellen linksbündig
Zelleninhalt individuell ausrichten: Attribut align="Ausrichtung" im Befehl <td>

Werte für align
Text linksbündig in Zelle: <td align="left">
Text rechtsbündig in Zelle: <td align="right">
Text zentriert in Zelle: <td align="center">

SO SIEHT'S AUS

vertikale Ausrichtung
Standard: Ausrichtung von Inhalten in Zellen mittig
Zelle individuell ausrichten: Attribut valign="Ausrichtung" im Befehl <td>

Werte für valign
Text oben in der Zelle: <td valign="top">
Text vertikal in der Zelle: <td valign="middle">
Text unten in der Zelle: <td valign="bottom">

SO SIEHT'S AUS

Inhaltsausrichtungsarten können natürlich kombinieren werden
<td align="right" valign="bottom">

SO SIEHT'S AUS

:: Aufgabe