Basiswissen zur Programmierung von HTML- Tabellen

 

Grundlagen    Zeilen Spalten Spaltentitel    Tabellentitel

 

Grundlagen Grundsätzlich gilt für eine Tabelle, daß sie mit dem Tag <table> beginnt und muß mit diesem Tag </table> geschlossen werden. Somit ist die Tabelle geschlossen. Das Attribut <width> verwendet man für die Bestimmung der Breite der Tabelle die wir erreichen wollen, hierbei kann man   die Angaben in absolute Pixel oder relative Prozente angeben. Wert muß in Anführungsstriche geschrieben werden. (Achtung:Nur wenn es sich um Spalten gleicher Breite handeln soll), unbedingte Angabe ist nicht von Nöten, hilft aber dem Browser für die Formatierung der Tabelle.
Wenn man Ränder für die Tabelle erzeugen will, verwendet man das Attribut <border> . Will man keinen Rand erzeugen, schreibt man <border=0> .
Über <cellpadding> wird festgelegt, wie groß der Abstand der Zelleninhalte zum Zellenrand sein soll, <cellspacing> hingegen bestimmt die Abstände der Zellen. Natürlich kann man die Farbe der Tabelle bestimmen. Gibt man das Attribut ein, wird der Farbwert als Hintergrundfarbe aller Zellen festgelegt; wenn es nicht gezielt bei den Zeilen oder  Zellen geändert wird.

< table>
   .......
  </table>
  <table width="80%" border>
    ......
  </table>

Tabellen lassen sich auch positionieren. Mit Hilfe  des Befehls <align> und den Werten <left > und <right> wird die Tabelle nach links oder nach rechts verschoben, < hspace> und <vspace> bestimmen hingegen horizontalen und vertikalen Abstand zum umgebenenText. Hinweis : Manche Browser haben die Eigenschaft das die Farbe der Ränder änderbar ist, < bordercolor> übernimmt diese Aufgabe.                                                                               nach oben

 


 

Zeilen einfügen ist der Schritt um eine Tabelle richtig zu erstellen. Um eine Zeile richtig einzuschließen bedarf es den Tag <tr> (table row). Der Tag <tr> kann in beliebiger Anzahl in einer Tabelle auftreten. Nicht vergessen: immer <tr> zu schließen </tr> . Die Ausrichtung der einzelnen Zellen in der gesamten Spalte können durch die Attribute der Tags <tr> bestimmt werden. Mit <align> bestimmt man wieder die horizontale Ausrichtung. Zellenausrichtung erreicht man mit left (links), right   (rechts), center (mittig). Für vertikale Ausrichtung benutzt man : valign .
Die Werte top (oben), bottom (unten) und middle (mittel) sind für die jeweiligen Ausrichtung der Zellen. Für die Hintergrundfarbe aller Zellen der Zeile ist -wie oben genannt- über das Attribut bgcolor einzustellen.

<table>
   ...
  <tr valign=top>
   ...
  </tr>
  <tr>
   ...
  </tr>
   ...
  <tr>
   ...
  </tr>
  </table>

nach oben

 


 

Spalten Innerhalb der Zeilen können nur die Spalten oder Zellen festgelegt werden. Der Tag <td> (table data) wird dazu verwandt. Dabei können viele Zellen in jeder Zeile auftreten. Schließen von <td> nicht vergessen </td> . Anzahl der Spalten der Tabelle wird ausgerichtet nach der Zeile, wo die meisten Zellen definiert sind. Fehlende Zellen werden mit Leerzellen aufgefüllt. Die bekannten Attribute wie <align> , <valign> und <bgcolor> sind ebenso gültig für die Zellen , sie beziehen sich aber nur auf die Zelle , jedoch nicht auf die ganze Zeile. Weiterhin ist <width> erlaubt. Es wird die Breite der Spalte festgelegt, wo sich die entsprechende Zelle befindet. Will man eine Spalte über mehrere Spalten oder Zeilen erstellen, so wird mit <colspan> und <rowspan> definiert. Es wird bestimmt, die Anzahl der Spalten oder Zeilen, über die sich die Zelle erstrecken soll. Das Attribut <nowrap> wird definiert dafür, daß der Zelleninhalt nicht automatisch umgebrochen wird. Der von den Tags <td> eingeschlossene Container enthält keine weiteren Tags- er enthält die Information der Zelle! Mit den Tags <table> , <tr> und <td> komplettiert man die Tags, sie sind erforderlich um eine Tabelle in einem HTML- Dokument einzufügen.

<table>
  <tr>
    <td>Zelle 1</td>
    <td>Zelle 2</td>
    <td>Zelle 3</td><
  </tr>
  <tr>
    <td>Zelle 4</td>
    <td>Zelle 5</td>
    <td>Zelle 6</td>
  </tr>
  </table>

nach oben

 


 

Spaltentitel Für die Spalten kann man Titel vergeben. Um einen Titel zu definieren, wird in der ersten Zeile der Tabelle, statt Tag <td> der Tag <th> (table heáder) eingesetzt.Die Attribute stimmen mit denen der Tags <td> überein.

  <table>
  <tr>
    <th>Spaltentitel 1</th>
    <th>Spaltentitel 2</th>
    <th>Spaltentitel 3</th>
  </tr>
  <tr>
    <td>Zelle 1</td>
    <td>Zelle 2</td>
    <td>Zelle 3</td>
  </tr>
  <tr>
    <td>Zelle 4</td>
    <td>Zelle 5</td>
    <td>Zelle 6</td>
  </tr>
  </table>

nach oben

 


 

Tabellentitel Als letzten Teil dieser Rubrik, vergeben wir den Titel der gesamten Tabelle. Für diese Vergabe des Titels verwenden wir den Tag <caption> (caption) direkt nach <table> vor den Spaltentitel oder - zellen oder man setzt es an das Ende als letzten Container. Die Ausrichtung erfogt wie üblich über das Attribut <align> und dann links, rechts oder zentriert.Nicht vergessen <caption> zu schließen </caption> .

  <table>
  <caption>Tabellentitel</caption>
  <tr>
    <th>Spaltentitel 1</th>
    <th>Spaltentitel 2</th>
    <th>Spaltentitel 3</th>
  </tr>
  <tr>
    <td>Zelle 1</td>
    <td>Zelle 2</td>
    <td>Zelle 3</td>
  </tr>
  <tr>
    <td>Zelle 4</td>
    <td>Zelle 5</td>
    <td>Zelle 6</td>
  </tr>
  </table>

nach oben