[Download des Kurses zum Offline-Betrieb]
c;-) webmichis HTML-Kurs

Tabellen in einer HTML-Datei (Grundwissen)

Aufbau einer Tabelle

<table border> oder <table>
leitet eine Tabelle ein (table = Tabelle). border mit Rand, sonst ohne Rand ("blind"); 
<tr>
leitet eine Zeile ein (tr = tablerow = Tabellenzeile). 
<td>Zelle 1. Zeile 1.Spalte</td>
<td>Zelle 1. Zeile 2.Spalte</td>

...
weitere Spalte(n) in der 1. Zeile möglich 
</tr>
beendet eine Zeile. 
<tr>
<td>Zelle 2. Zeile 1.Spalte</td>
<td>Zelle 2. Zeile 2.Spalte</td>
...
</tr>

...
weitere Zeile(n) in der Tabelle möglich 
</table>
beendet die Tabelle.
Darstellung im Browser
Anmerkung:
  • Eine Tabelle besteht aus mindestens einer (normalerweise aus mehreren) Zeile(n). Eine Zeile besteht aus mindestens einer (normalerweise aus mehreren) Zelle(n) (Diese Zellen bilden die Spalten der Tabelle.).
  • Der Erklärungsbereich, in dem wir uns befinden, ist eine "blinde" Tabelle. Blinde Tabellen eignen sich also z. B. zur Darstellung von mehrspaltigem Text.
  • Der Inhalt einer Zelle (die Tabellendaten) wird jeweils hinter dem einleitenden <td>-Tag notiert. Eine Tabellenzelle kann beliebige Elemente enthalten (normalen Text, Links, oder Grafik in HTML). Selbst eine weitere Tabelle kann der Inhalt einer Zelle sein.
[zum Inhalt]

 

Breite und Höhe einer Tabelle (Zeile, Spalte)

<table border width=[tw] height=[th]>
oder <table width=[tw] height=[th]>
[tw] legt die Tabellenbreite, [th] die Tabellenhöhe fest. 
<tr height=[zh]>
 [zh] legt die Zeilenhöhe für die aktuelle Zeile fest. 
<td width=[sw] height=[sh]>
[sw] legt die Zellenbreite (damit auch die Breite der entsprechenden Spalte), [sh] die Zellenhöhe (damit auch die Höhe der entsprechenden Zeile) fest.
Anmerkung:
  • Für die Platzhalter [tw], [th], [zh], [sw] und [sh] kannst du eine Zahl oder einen Prozentwert angeben. Mit einer Zahl, z.B. 400, erreichst du, dass die Tabelle so viel Pixel breit dargestellt wird wie angegeben.
    Mit einem Prozentwert erreichst du, dass die Tabelle den angegebenen Prozentwert der Breite des Anzeigefensters einnimmt. Dafür gibst du z. B. width=70% an. Dadurch kann in jedem Grafikmodus die ganze Tabelle ähnlich dargestellt werden.
  • Die Angaben zu Breite und Höhe einer Tabelle sind nur wirksam, wenn der Tabelleninhalt kleiner ist, so dass leerer Raum entsteht. Wenn der Tabelleninhalt größer ist, werden die Angaben zu Breite und Höhe ignoriert. Die Tabelle wird in diesem Fall vom WWW-Browser so dimensioniert, dass der gesamte Inhalt angezeigt wird.
[zum Inhalt]

 

Hintergrundfarbe einer Tabelle (Zeile, Zelle)

<table bgcolor=#[hft]>
[hft] legt die Hintergrundfarbe der Tabelle fest. 
<tr bgcolor=#[hfz]>
 [hfz] legt die Hintergrundfarbe der aktuellen Zeile fest. 
<td bgcolor=#[hfd]>
[hfd] legt die Hintergrundfarbe der aktuellen Zelle fest.
Anmerkung:

Für die Platzhalter [hft], [hfz] und [hfd] kannst du eine Hexadezimalzahl für die entsprechende Farbe angeben.

[zum Inhalt]

 

Gestaltung einer Tabelle mit dem Übungseditor

Zur Übung solltest du nun die verschiedenen Möglichkeiten der Gestaltung im Übungseditor selbst ausprobieren.
Sei kreativ und variiere, denn auch aus Fehlern kannst du lernen!

  c;-) webmichis HTML-Kurs  [zum Inhalt]

Letzte Änderung: