Tabellen mit HTML

Damit Inhalte auf einer Seite übersichtlicher dargestellt werden, ist manchmal sinnvoll, diese in Form einer Tabelle anzulegen.

Tabellen haben den folgenden Grundaufbau:

<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>Titel 1 </th>
<th>Titel 2 </th>
</tr>
<tr>
<td>Inhalt 1 </td>
<td>Inhalt 2 </td>
</tr>
<tr>
<td>Inhalt 3 </td>
<td>Inhalt 4 </td>
</tr>
</table>

In der ersten Zeile wird die Breite (width) der Tabelle mit 200 Pixeln festgelegt und der Rahmen auf die Breite 1 Pixel gesetzt. Der Abstand zwischen den Zellen (cellspacing) ist 0 Pixel und es gibt keine Zellausfüllung (cellpadding="0").

Danach erfolgt zeilenweise der Aufbau der Tabelle.

Tag Wirkung
<tr>
Beginn einer neuen Zeile
<th>
Diese Zelle ist eine Überschrift
<td>
Tabellenzelle

Wichtig ist, dass in jeder Zeile die selbe Anzahl von Zellen vorhanden ist.

 

Aufgabe

  1. Lege eine Datei: tabelle.htm an. Erstelle dabei die folgende Tabelle (die Breite ist 300 Pixel):

    Attribut Wirkung
    width="200" Breite ist 200 Pixel
    border="1" 1 Pixel breiter Rand
  2. Teste, welche Veränderungen die Änderung der Werte für cellpadding und cellspacing bewirken!

Das sieht dann so aus:

Titel 1 Titel 2
Inhalt 1 Inhalt 2
Inhalt 3 Inhalt 4