Grundaufbau einer Tabelle

Quellcode für eine Tabelle

  • Erstelle eine HTML-Datei mit folgendem Quellcode:

<html>
<head>
<title>Die sechste Lektion</title>
</head>
<body bgcolor="#FFCC66" text="#000000">

<table border="1">
  <tr>
    <td>Tabellenzeile 1</td>
    <td>2. Spalte / Zeile 1</td>
    <td>3. Spalte / Zeile 1</td>
  </tr>
  <tr>
    <td>Tabellenzeile 2</td>
    <td>2. Spalte / Zeile 2</td>
    <td>3. Spalte / Zeile 2</td>
  </tr>
</table>

</body>
</html>~

  • Benenne die Datei *lektion61.htm*
  • Öffne die Datei *lektion61.htm* im Browser
  • So in der Richtung sollte es aussehen:

  • Schau dir mal den Quelltext an:

Die einzelnen Befehle

  • <table>~
    Dieser Befehl leitet eine Tabelle ein (table = Tabelle).
  • <table border="1">~
    Das Attribut border kennst du bereits aus der letzten Lektion. Es definiert den Rahmen der Tabelle.
  • <tr>~
    So beginnt eine Tabellenzeile (englisch table row).
  • <td>~
    innerhalb der Tabellenzeile werden die Zellen mit deinem Inhalt (englisch table data = Tabellendaten) definiert. Bei unserem Beispiel befinden sich 3 Zellen innerhalb einer Tabellenzeile. Die Tabelle hat also 3 Spalten.
  • Eine Tabelle kannst du also zunächst in Zeilen unterteilen.
  • Innerhalb der Zeilen befinden sich die Spalten.
  • *Merke:* Jede Zeile einer Tabelle sollte unbedingt gleich viele Spalten haben, sonst gibt es eventuell Fehldarstellungen.
  • In der ersten Zeile legst du also fest, wieviele Spalten deine Tabelle haben soll.
  • Du kannst aber problemlos mehrere Tabellen mit unterschiedlich vielen Spalten untereinanderhängen.