VII. Erstellen von Tabellen:

Einen erheblichen Teil des Layouts im Internet wird von Tabellen erledigt. Deshalb ist es wichtig diese zu lernen.
In den folgenden Abschnitten sind ausfürliche Beispiele mit Quelltexten (Sourcecode) vorhanden.

Tabelle einbinden:

<table align="X">...</table>

Ausrichtung: X=left, center, right

Rahmen festlegen:

<...border rules="X"...>

Rahmen:
X=
all: Linien zwischen allen Zellen
none: nur Aussenrahmen
rows: Linien zwischen Zeilen
cols: Linien zwischen Spalten
groups: Linien zwischen Kopf, Körper und Fuss

Sollen keine Linien bei der Tabelle sichtbar sein, einfach nur den border rules -Tag weglassen!

Inhalte editieren:

<tr>...</tr>

Zeilenanfang und –ende

<th>...</th>

Kopfzelle (Text wird hervorgehoben und in Zelle zentriert)

<td>...</td> 

Datenzelle

Tabelle formatieren:

• Soll in Datenzellen zentriert oder rechtsbündig geschrieben werden muss zusätzlich noch der entsprechende div align -Tag benutzt werden (linksbündig ist Standard).
  
  
• Auch in Tabellen (oder einzelnen Zellen) können Schriftfarbe, -arten usw. verändert werden.
  
  
• Es können Links undsogar Bilder eingefügt werden.

Beispiel:

<table align=“left" border rules="all">
<tr><th>Kopfzelle</th><th>Kopfzelle</th><th>Kopfzelle</th></tr>
<tr><td>Datenzelle</td><td>Datenzelle</td><td>Datenzelle</td></tr>
</table>

erzeugt:

Hintergrundfarbe

• ...von der ganzen Tabelle,
  
• ...von einzelnen Tabellenzeilen,
  
• ...von einzelnen Tabellenzellen.
  

In den Tags:

• <table>
  
• <tr>
  
• <td>
  

muss lediglich folgendes Attribut hinzugefügt werden:

• bgcolor="farbe"

Dies sieht dann so aus:

• <table bgcolor="yellow">
  
• <tr bgcolor="red">
  
• <td bgcolor="black">

Verbinden von Zellen:

Möchte man Zellen einer Tabelle verbinden muss mit folgenden Befehlen gearbeitet werden:

Um Zellen einer Zeile zu verbinden:

• colspan=X
  
  

Um Zellen einer Spalte zu verbinden:

• rowspan=X

Dabei gibt X die Anzahl der Einzelzellen an, die zu einer Zelle verbunden werden.

Beispiel:

<table border rules="all">
<tr><td colspan="3">Unsere Kleidergroessen</td></tr>
<tr><td>M</td><td>L</td><td>XXL</td></tr>
</table>

Beispiel:

<table border rules="all">
<tr>
<td rowspan="2">Kleidergroessen</td>
<td>S</td><td>XS</td>
</tr>
<tr>
<td>L</td>
<td>XXL</td>
</tr>
</table>

Achtung:

Ohne groeßenangaben werden Tabellen immer nur in der minimal notwendigen groeße eingefügt! Die breiteste Zelle einer Spalte definiert die Spaltenbreite, die höchste Zelle einer Zeile definiert die Zeilenhöhe.

TIPS:

• Anstelle von <...border rules="all"...> kann man auch <...border="X"...> mit X = Pixelanzahlverwenden, um die Breite der Rahmen zu verändern.
  
  
• <...cellspacing="X"...> mit X = Pixelanzahl verändert den Abstand der einzelnen Zellen.
  
  
• <...cellpadding="X"...> mit X = Pixelanzahlverändert die groesse des Abstandes vom Inhalt der Zelle zu ihrem Rand.
  
  
• <...width="X"...> mit X = Pixelanzahl oder <...width="X%"...> X Prozent vom Browserfenster erzwingen die Breite einer Tabelle. Alle Befehle können in einem Tag kombiniert werden!
  
  

Beispiel:

• <table width="60%" cellpadding="10" border="8"...>