Grundgerüst einer Tabelle
 


9 Tabellen

Ohne den Einsatz von CSS werden Tabellen hauptsächlich zur Layoutgestaltung unserer HTML Seiten verwendet. Mit ihnen lassen sich Texte, Grafiken und Formulare übersichtlich anordnen.
Damit sie unsichtbar bleiben (blinde- oder unsichtbare Tabelle) wird ihr border Attribut auf 0 gesetzt. Ihr vielseitiger Einsatz macht sie zu dem (auch heute noch) Gestaltungselement unserer HTML Seiten. Es gibt kaum einen Webdesigner, der auf sie verzichtet.
Machen Sie sich vor dem Erstellen einer Tabelle über deren Aussehen Gedanken.

9.1 Das Grundgerüst einer Tabelle


Eingeleitet werden Tabellen mit dem TABLE TAG <table> ... </table>.
Nun geht es zeilenweise weiter.
<tr> ... </tr> (table row) erzeugt die erste Tabellenzeile.
In dieser Tabellenzeile kann mit <th> ... </th> (table header) eine Kopfzelle erzeugt werden (Kopfzellen können auch einfach weggelassen werden). Text in der Kopfzelle, <th> Der Text </th>, wird (meist) zentriert und fett dargestellt. Nach Bedarf erstellen Sie nun weitere Kopfzellen in der obersten Zeile. Etwa so:


<table>
 <tr>
   <th> Hunde </th><th> Katzen </th><th> Vögel </th>
 </tr>
</table>

Wünschen Sie keine Kopfzellen, können Sie gleich in der ersten Tabellenzeile Datenzellen erstellen.
Mit <td> ... </td> (table data) legen Sie los.
In einer Datenzelle können beliebige Elemente stehen. So z.B. Text, Linien, Listen, Grafik oder auch andere Tabellen.
ACHTUNG, lassen Sie niemals eine Tabellenzelle leer. Netscape kann das übel nehmen. Deshalb zumindest ein &nbsp; (geschütztes Leerzeichen) einfügen!
Bei Bedarf erzeugen Sie mit <tr> ... </tr> weitere Zeilen, die Sie mit Tabellenzellen füllen. Bedenken Sie, dass , in jeder Tabellenzeile die gleiche Anzahl an Tabellenspalten eingetragen werden muss, wie in der obersten Tabellenzeile vorgegeben.

Ein Beispiel:
 
und so sieht es aus
     
<table border="1">
<!--Beginn der ersten Zeile -->
 <tr>
  <th>&nbsp;</th>
  <th>Hunde</th>
  <th>Katzen</th>
  <th>V&ouml;gel</th>
 </tr>
<!--Beginn der zweiten Zeile -->
 <tr>
  <td>Anzahl </td>
  <td>3</td>
  <td>5</td>
  <td>500</td>
 </tr>
<!--Beginn der dritten Zeile -->
 <tr>
  <td>Alter </td>
  <td>2</td>
  <td>4</td>
  <td>20</td>
 </tr>
 <tr>
  <td>Kaufpreis </td>
  <td>8</td>
  <td>1</td>
  <td>40</td>
 </tr>
</table>
 
  Hunde Katzen Vögel
Anzahl 3 5 500
Alter 2 4 20
Kaufpreis 8 1 40


Weiter zum Punkt 9.2 und 9.3