Weitere Gestaltungsmöglichkeiten

Weitere Gestaltungsmöglichkeiten von Tabellen

Zellen verbinden

Sie können benachbarte Zellen waagerecht, senkrecht oder in beiden Richtungen verbinden. Die verbundenen Zellen werden dann wie eine gemeinsame Zelle behandelt (.z.B. bezüglich der Ausrichtung enthaltener Zellinhalte).

Beispiele:

ÜS 1
Z1 / S1 Z1 / S2
Z2 / S1 Z2 / S2
<table border="1" width="80%">
  <tr>
    <th width="80%" colspan="2">ÜS 1</th>
  </tr>
  <tr>
    <td width="40%">Z1 / S1</td>
    <td width="40%">Z1 / S2</td>
  </tr>
  <tr>
    <td width="40%">Z2 / S1</td>
    <td width="40%">Z2 / S2</td>
  </tr>
</table>
ÜS 1ÜS 2
Z1 / S1 Z1 / S2
Z2 / S1
<table border="1" width="80%">
  <tr>
    <th width="40%">ÜS 1</th>
    <th width="40%">ÜS 2</th>
  </tr>
  <tr>
    <td width="40%">Z1 / S1</td>
    <td width="40%" rowspan="2">Z1 / S2</td>
  </tr>
  <tr>
    <td width="40%">Z2 / S2</td>
  </tr>
</table>

Der Einsatz von colspan ('Spalten spannen') und rowspan ('Zeilen spannen') erfordert zwar einige Übung, erweitert aber die Gestaltungsmöglichkeiten erheblich.

Tipp für colspan: Von den zu verbindenden Zellen in der am weitesten links stehenden colspan="[Anzahl]" einsetzen. Dann die notwendige Anzahl von Zellen in der gleichen Zeile löschen.

Tipp für rowspan: In der obersten Zeile der zu verbindenden Zellen in die 'Anfangszelle' rowspan="[Anzahl]" einsetzen. Dann in jeder darunterstehenden Zeile die entsprechende Zelle löschen.


Möglichkeiten mit Rahmen

Rahmen um und in Tabellen bieten interessante Gestaltungsmöglichkeiten durch ihre Farben und stärken. Leider interpretieren die Browser die Attribute recht unterschiedlich.

Cascading Style Sheets (CSS) sind hier in jedem Falle vorzuziehen. Aber auch ohne deren Kenntnisse (späteres Kapitel) können Sie Einiges erreichen

Beispiele:

Z1 / S1 Z1 / S2
Z2 / S1 Z2 / S2
<table border="3"  bordercolor="#000080" cellspacing="4">
  <tr>
    <td>Z1 / S1</td>
    <td>Z1 / S2</td>
  </tr>
  <tr>
    <td>Z2 / S1</td>
    <td">Z2 / S2</td>
  </tr>
</table>
Z1 / S1 Z1 / S2
Z2 / S1 Z2 / S2
<table border="8" bordercolor="#800000" cellspacing="0">
  <tr>
    <td>Z1 / S1</td>
    <td>Z1 / S2</td>
  </tr>
  <tr>
    <td>Z2 / S1</td>
    <td>Z2 / S2</td>
  </tr>
</table>
Z1 / S1 Z1 / S2
Z2 / S1 Z2 / S2
<table border="1" frame="hsides" rules="rows" cellspacing="0">
  <tr>
    <td>Z1 / S1</td>
    <td>Z1 / S2</td>
  </tr>
  <tr>
    <td>Z2 / S1</td>
    <td>Z2 / S2</td>
  </tr>
</table>

(Breitenangaben sind hier zur Vereinfachung weggelassen!)


Farben und Hintergrundbilder

Mit geeigneten Hintergrundfarben können Sie z.B. die Lesbarkeit langer Tabellen erhöhen.

Beispiel:

Z1 / S1 Z 1 / S2
Z 2 / S1 Z 2 / S2
Z 3 / S1 Z 3 / S2
Z 4 / S1 Z 4 / S2
Z 5 / S1 Z 5 / S2
Z 6 / S1 Z 6 / S2
<table border="0" cellspacing="0">
  <tr bgcolor="#FFEFD5">
    <td>Z1 / S1</td>
    <td>Z1 / S2</td>
  </tr>
  <tr bgcolor="#FFFFFF">
    <td>Z2 / S1</td>
    <td>Z2 / S2</td>
  </tr>
    ...[Wiederholung]
</table>

(Breitenangaben sind hier zur Vereinfachung weggelassen!)

Mit Cascading Style Sheets (CSS) bieten sich weitere interessante Möglichkeiten zu Tabellengestaltung. Außerdem verringern sie den Quelltextaufwand z.T. ganz erheblich.