HTML: Tabelleneigenschaften

von Jan Winkler

Zur Gestaltung einer Tabelle können mehrere Merkmale beitragen. Hier einige davon.

Tabellenrahmen  

Um bei Tabellen Rahmen zu definieren benutzt man das border-Attribut. Mit ihm beschreibt man die Dicke der Rahmen. Beispiel:

<table border="2">
 ... Tabelleninhalt ...
</table>

<table border="0">
 ... Tabelleninhalt ...
</table> 

Rahmenfarbe  

Diese Rahmen der Tabelle können nun auch farbig gestaltet werden. Hierzu verwendet man die Attribute bordercolordark und bordercolorlight. bordercolordark beschreibt die dunkle Rahmenfarbe - bordercolorlight die helle Rahmenfarbe. Die dunkle und die helle Rahmenfarbe ergeben dann zusammen die Rahmenfarbe, wobei die dunkle Rahmenfarbe als Schatten gedacht ist. Beispiel:

<table border="2" bordercolordark="#800000" 
       bordercolorlight="#FF0000">
 ... Tabelleninhalt ...
</table>

<table border="5" bordercolordark="green" 
       bordercolorlight="lime">
 ... Tabelleninhalt ...
</table> 

Rahmenposition  

Mit dem frame-Attribut können Sie bestimmen wie, d.h. an welcher Seite und in welcher Art, Rahmen dargestellt werden sollen. Folgende Werte sind hier möglich:

• void - Rahmen werden nicht dargestellt
• above - Rahmen werden oben dargestellt
• below - Rahmen werden unten dargestellt
• hsides - Rahmen werden oben und unten dargestellt
• vsides - Rahmen werden rechts und links dargestellt
• lhs - Rahmen werden links dargestellt
• rhs - Rahmen werden rechts dargestellt
• box - Rahmen werden oben, unten, rechts und links dargestellt
• border - Rahmen werden oben, unten, rechts und links dargestellt

Beispiel:

<table border="2" frame="hsides">
 ... Tabelleninhalt ...
</table>

<table border="1" frame="void" >
 ... Tabelleninhalt ...
</table> 

Rahmenregeln  

Um Rahmen bestimmte Regeln zu geben, wann, wie und wo sie dargestellt werden sollen, gibt es das rules-Attribut. Die folgenden Varianten sind als Werte möglich:

• none - innere Rahmen werden nicht dargestellt
• groups - innere Rahmen werden zwischen Tabellenkopf, - körper und fuß dargestellt
• rows - innere Rahmen werden nur zwischen Zeilen dargestellt
• cols - innere Rahmen werden nur zwischen Spalten dargestellt
• all - innere Rahmen werden überall dargestellt

Beispiel:

<table border="2" rules="none">
 ... Tabelleninhalt ...
</table>

<table border="1" rules="rows" >
 ... Tabelleninhalt ...
</table> 

Hintergrundbild  

Tabellen und Zellen können ein Hintergrundbild erhalten. Bei beiden notiert man dies mit dem background-Attribut. Beispiel:

<table background="bild.gif">
 ... Tabelleninhalt ...
</table>

<table border="2">
 <tr>
  <td background="bild.gif">... Zelleninhalt ... </td>
  <td background="maus.jpg">... Zelleninhalt ... </td>
 </tr>
</table> 

Hintergrundfarbe  

Tabellen, Zeilen und Zellen können eine Hintergrundfarbe erhalten. Bei allen dreien notiert man dies mit dem bgcolor-Attribut. Beispiel:

<table bgcolor="red">
 ... Tabelleninhalt ...
</table>

<table border="2">
 <tr bgcolor="blue">
  <td bgcolor="yellow">... Zelleninhalt ... </td>
  <td>... Zelleninhalt ... </td>
 </tr>
</table> 

Tabelleninformationen  

Tabelleninformationen können mit dem summary-Attribut des table-Elements notiert werden. Diese Informationen sollen zusätzlich einen leichteren Überblick über den Inhalt der Tabelle geben. Beispiel:

<table summary="Angaben zum Fettgehalt von Milch">
 <tr>
  <td> Es gibt Milch mit 3,5% Fett. </td>
  <td> Es gibt auch Milch mit 1,5% Fett. </td>
 </tr>
</table> 

Zelleninformationen  

Zelleninformationen können mit dem abbr-Attribut in der jeweiligen Zelle getätigt werden. Diese Informationen sollen zusätzlich einen leichteren Überblick über den Inhalt der jeweiligen Zelle geben. Beispiel:

<table>
 <tr>
 <td abbr="Infos über Milch">Es gibt Milch mit 3,5% Fett.</td>
 <td abbr="Satz zu Einstein">Einstein war kein Zauberer.</td>
 </tr>
</table> 

Zellenüberschriften  

Mit dem headers-Attribut lassen sich Zellenüberschriften notieren. Diese sollen helfen den Zusammenhang zur jeweiligen Kopfzelle zu finden. Als Wert sollte hierbei die ID (id="") der dazugehörigen Kopfzelle notiert werden. Beispiel:

<table>
 <tr>
  <th id="Spalte1">Milch</th>
  <th id="Spalte2">Einstein</th>
 </tr>
 <tr>
  <td headers="Spalte1"> Es gibt Milch mit 3,5% Fett. </td>
  <td headers="Spalte2"> Einstein war kein Zauberer. </td>
 </tr>
</table> 

Achsen beschreiben  

Um in komplexeren Tabellen durchzusehen besteht die Möglichkeit zusammengehörige Zellen mit dem axis-Attribut zu versehen. So lassen sich leichter Zusammenhänge zwischen Zellen und/oder Spalten ziehen. Beispiel:

<table>
 <tr>
 <td axis="Milch">Es gibt Milch mit 3,5% Fett.</td>
 <td axis="Reise">Eine Reise nach München kann lang werden.</td>
 </tr>
 <tr>
 <td axis="Reise">Eine Reise nach Köln kann schnell gehen.</td>
 <td axis="Milch">Es gibt Milch mit 1,5% Fett.</td>
 </tr>
</table> 

Bereich / Umfang  

Um den Bereich bzw. den Umfang der Beziehung zwischen Zellen darstellen zu können, kann das scope-Attribut verwendet werden. Dabei sind folgende Angaben möglich:

• col - Zelle nimmt Bezug auf die ganze Spalte
• row - Zelle nimmt bezug auf die ganze Zeile
• rowgroup - Zelle nimmt Bezug auf eine oder mehrere Zeilengruppe/n
• colgroup - Zelle nimmt Bezug auf eine oder mehrere Spaltengruppe/n

Beispiel:

<table>
 <tr>
  <th scope="col">... Kopfzelleninhalt ... </th>
  <th scope="col">... Kopfzelleninhalt ... </th>
 </tr>
 <tr>
  <td>... Zelleninhalt ... </td>
  <td>... Zelleninhalt ... </td>
 </tr>
</table> 

« zurück

weiter »