Ich will hier nix neu erfinden aber hier ist noch nicht alles gesagt.
Zur Erinnerung:
Tabellen kann man halt als Tabellen im herkömmlichen Sinn verwenden, aber sie können auch für eine punktgenaue Aufteilung der Seiten genutzt werden ("blinde Tabellen").
Bei älteren Browsern (vor allem IE) wird die Seite erst gezeigt wenn alle Tabelleninhalte geladen sind!
Bemerkung: ich schreibe zur Übersichtlichkeit _ für Leerzeichen und // für Kommentare
1. einfachstes Grundgerüst
<table> //Tabelle beginnen
_<tr> //Zeile 1beginnen
__<th>ÜS 1</th> //Zelle der Spalte 1 mit Überschrift
__<th>ÜS 2</th> //Zelle der Spalte 2 mit Überschrift
_</tr> //Zeile 1 beenden
_<tr> //Zeile 2 beginnen
__<td>Text</td> //Zelle der Spalte 1 mit Text (oder sonstigem Inhalt)
__<td>Text</td> //Zelle der Spalte 2 mit Text
_</tr> //Zeile 2 beenden
</table> //Tabelle abschließen
table = table notwendig
tr = table-row notwendig
td = table-data notwendig
th = table-header unnötig
alle Tags brauchen einen Abschluss-Tag
mögliche Attribute
border= Pixel //gibt die Rahmenstärke an
width= Pixel //gibt die Breite der Tabelle an
height= Pixel //gibt die Höhe der Tabelle an
bordercolor= #Hexwert //gibt die Rahmenfarbe an zB Rot #FF0000
bgcolor= #Hexwert //gibt die Hintergrundfarbe an
cellspacing= Pixel //gibt die Abstand zwischen Zellen an
cellpadding= Pixel //gibt den Abstand zwischen Zelleninhalten an
Bsp.:
<table border="1" cellspacing="0" cellpadding="2" width="400" height="200">
<tr bgcolor="#00FF00"><td width="100"></td><td width="500"></td></tr>
</table>
2. Spalten vordefinieren (HTML 4.0)
Hilft dem Browser vor dem Seitenaufbau die Abmessungen für die Tabelle zu ermitteln.
Beispiel 1:
<table border="1">
_<colgroup> //Spaltengruppierung
__<col width="80"> //1. Spalte mit den Eigenschaften
__<col width="120"> //2. Spalte mit den Eigenschaften
_</colgroup>
_<tr>
__<td>Zeile 1, Spalte 1</td>
__<td>Zeile 1, Spalte 2</td>
_</tr>
</table>
Beispiel 2:
<table border="1">
_<colgroup width="200" span="2"> //Formatierung gilt für die Spanne von 2 Spalten
_</colgroup>
_<tr>
__<td>Zeile 1, Spalte 1</td>
__<td>Zeile 1, Spalte 2</td>
_</tr>
</table>
Beispiel 3:
<table border="1" width="100%"> //Tabelle mit 100% Seitenbreite
_<colgroup>
__<col width="4*"> //1. Spalte 4/5 Seitenbreite
__<col width="1*"> //2. Spalte 1/5 Seitenbreite
_</colgroup>
_<tr>
__<td>Zeile 1, Spalte 1</td>
__<td>Zeile 1, Spalte 2</td>
_</tr>
</table>
colgroup = column group
col = column
Der Col-Tag darf keinen Abschluss-Tag haben -> XHTML <col width="100" />
3. Kopf, Körper und Fuß
<table border="1" rules="groups">
_<thead>
__<tr>
___<th>Kopfzeile 1, Spalte 1</th>
___<th>Kopfzeile 1, Spalte 2</th>
__</tr>
_</thead>
_<tfoot>
__<tr>
___<td>Fußzeile 1, Spalte 1</td>
___<td>Fußzeile 1, Spalte 2</td>
__</tr>
_</tfoot>
_<tbody>
__<tr>
___<td>Zeile 1, Spalte 1</td>
___<td>Zeile 1, Spalte 2</td>
__</tr>
_</tbody>
</table>
thead = table head
tfoot = table foot
tbody = table body
Die Reihenfolge ist wichtig als thead->tfoot->tbody.
"thead" und "tfoot" dürfen pro Tabelle nur einmal vorkommen, "tbody" beliebig oft.