Tabellen formatieren
Ein Beispiel
Folgende Tabelle wurde mit CSS formatiert
| BEREICH | BEITRÄGE |
|---|---|
| ALLGEMEIN | 03 |
| JAVASCRIPT | 19 |
| CSS | 07 |
| HTML | 03 |
Und hier der Quelltext dazu
<table style="border-collapse:collapse; border-spacing:0;
border:0; border-width:0; padding:0;
padding:1px; width:200px; margin-left:auto; margin-right:auto;">
<thead>
<tr>
<th style="border-style:solid; border-width:2px;
border-color:#ff0000; padding:1px;
background-color:#ffcccc; text-align:center;">BEREICH</th>
<th style="border-style:solid; border-width:2px;
border-color:#ff0000; padding:1px;
background-color:#ffcccc; text-align:center;">BEITRÄGE</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border-style:solid; border-width:1px;
border-color:#ff0000; padding:1px;
width:100px; text-indent:5px;">ALLGEMEIN</td>
<td style="border-style:solid; border-width:1px;
border-color:#ff0000; padding:1px;
text-indent:50px;">03</td>
</tr>
<tr>
<td style="border-style:solid; border-width:1px;
border-color:#ff0000; padding:1px;
width:100px; text-indent:5px;">JAVASCRIPT</td>
<td style="border-style:solid; border-width:1px;
border-color:#ff0000; padding:1px;
text-indent:50px;">19</td>
</tr>
<tr>
<td style="border-style:solid; border-width:1px;
border-color:#ff0000; padding:1px;
width:100px; text-indent:5px;">CSS</td>
<td style="border-style:solid; border-width:1px;
border-color:#ff0000; padding:1px;
text-indent:50px;">07</td>
</tr>
<tr>
<td style="border-style:solid; border-width:1px;
border-color:#ff0000; padding:1px;
width:100px; text-indent:5px;">HTML</td>
<td style="border-style:solid; border-width:1px;
border-color:#ff0000; padding:1px;
text-indent:50px;">03</td>
</tr>
</tbody>
</table>
Wie Du siehst, ist es zur Gänze möglich, bei Tabellenformatierungen auf CSS zurückzugreifen. Lediglich Netscape kleiner als Version 6.0 kann diese Angaben größtenteils nicht interpretieren.
Achtung! Falls Dich das riesige Quelltext-Ungetüm abschreckt, dann sei unbesorgt: Mich schreckt es ebenfalls ab. Jetzt schauen wir uns mal an, wie angenehm der Quelltext schrumpft, wenn das CSS ausgelagert wird.
Folgende Tabelle wurde mit externem CSS formatiert
Das ganze läßt sich auch in einem style sheet
im head oder extern formatieren und sieht dann so aus:
| BEREICH | BEITRÄGE |
|---|---|
| ALLGEMEIN | 03 |
| JAVASCRIPT | 19 |
| CSS | 07 |
| HTML | 03 |
Optisch ist kein Unterschied zu erkennen, allerdings wird der Quelltext wesentlich schlanker und daher übersichtlicher und lädt deshalb auch schneller. Diese Vorgehensweise empfiehlt sich besonders, wenn mehrere Tabellen auf dieselbe Art formatiert werden.
Außerdem kann dann Netscape kleiner als Version 6 zumindest auch die
Texteinrückung interpretieren, was er bei einer Direktformatierung
nicht tut. Desweiteren kann es vorkommen, daß er sämtliche Formatierungen
über den Haufen schmeißt, wenn er im HTML-Quelltext auf das
style-Attribut trifft.
Und hier der Quelltext dazu
HTML-Quelltext
<table id="sampletable">
<thead>
<tr>
<th class="norm">BEREICH</th>
<th class="norm">BEITRÄGE</th>
</tr>
</thead>
<tbody>
<tr>
<td class="norm">ALLGEMEIN</td>
<td class="zahl">03</td>
</tr>
<tr>
<td class="norm">JAVASCRIPT</td>
<td class="zahl">19</td>
</tr>
<tr>
<td class="norm">CSS</td>
<td class="zahl">07</td>
</tr>
<tr>
<td class="norm">HTML</td>
<td class="zahl">03</td>
</tr>
</tbody>
</table>
CSS-Quelltext
#sampletable {
border-collapse:collapse;
border-spacing:0;
border:0;
border-width:0;
padding:1px;
width:200px;
margin:1em auto;
}
#sampletable th {
border-style:solid;
border-width:2px;
border-color:#ff0000;
padding:1px;
background-color:#ffcccc;
color:inherit;
text-align:center;
}
#sampletable td.norm {
border-style:solid;
border-width:1px;
border-color:#ff0000;
padding:1px;
width:100px;
text-indent:5px;
}
#sampletable td.zahl {
border-style:solid;
border-width:1px;
border-color:#ff0000;
padding:1px;
text-indent:50px;
}
Da es sich bei dieser Beispieltabelle nur um ein einzelnes Exemplar handelt, ist der CSS-Code im Verhältnis zum Tabellen-HTML doch noch relativ groß. Im Alltagsgebrauch aber, wenn dutzende oder hunderte von Elementen nur ein einziges Mal formatiert werden müssen, ist die relative Code-Ersparnis sehr viel größer.
Viel Spaß!