HTML: Tabelleneigenschaften

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

Tabellenrahmen  nach oben

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  nach oben

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  nach oben

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  nach oben

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  nach oben

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  nach oben

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  nach oben

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  nach oben

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  nach oben

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  nach oben

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  nach oben

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> 

Weiterlesen

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht ver├Âffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>