HTML verstehen Teil 6: Tabellen Teil V

HTML verstehen Teil 6: Tabellen mit CSS

In diesem Artikel soll es weiterhin um Tabellen im XHTML gehen. Heute sollen Sie kennenlernen, wie man eine Tabelle auch definieren kann, ohne die doch etwas hässlichen, primitiv anmutenden Umrandungen, die mit dem Attribut border=“1″ angezeigt werden. Da hier aber die Kunst des XHTML endet, muss auf das modernere Mittel CSS zurückgegriffen werden. Die Cascading Style Sheets (=CSS) ist eine Formatierungssprache, die heute fast auf allen Webseiten zu finden ist.

Für CSS gibt es in diesem Blog schon eine Reihe von Artikeln, die in die Problematik und in die Sprache einführen. Um einen Überblick und eine Einführung zu erhalten, verweise ich hier der Einfachheit halber auf diese Artikel, die Sie hier finden. Gerüstet mit diesem Werkzeug können Sie sich nun weiter mit den Tabellen des HTML befassen.

Kopf und Fuß einer Tabelle

Bisher habe ich Ihnen noch einige Tabellen-Tags unterschlagen. Das war keine Absicht, ich wollte, dass Sie zuerst den Pflichtteil dann die Kür für Tabellen lernen. Mit 3 neuen Tags können Sie in einer Tabelle festlegen, was der Tabellenkopf, der Tabellenfuß und der Tabellenrumpf ist. Dabei spielt aber die Reihenfolge der Tags eine wichtige Rolle:

  • <thead> ⇒ Tabellenkopf
  • <tfoot> ⇒ Tabellenfuß
  • <tbody> ⇒ Tabellenrumpf oder -rümpfefuß

Sie müssen nach einem <thead>-Tag gleich einen <tfoot>-Tag für den Fuß definieren, dann können Sie ein oder mehrere <tbody>-Tags definieren.

Kopf 1 Kopf 2 Kopf 3
Fußspalte 1 Fußspalte 2 Fußspalte 3
Zelle 1,1 Zelle 1,2 Zelle 1,3
Zelle 2,1 Zelle 2,2 Zelle 2,3
Zelle 3,1 Zelle 3,2 Zelle 3,3

Sie wundern sich über die Umrandung? Nun, hier ist die Lösung! So sieht das Coding der Tabelle aus:

<table border=“3″ rules=“groups“>
 <thead>
  <tr>
   <th>Kopf 1</th>
   <th>Kopf 2</th>
   <th>Kopf 3</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <td>Fußspalte 1</td>
   <td>Fußspalte 2</td>
   <td>Fußspalte 3</td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <td>Zelle 1,1</td>
   <td>Zelle 1,2</td>
   <td>Zelle 1,3</td>
  </tr><tr>
   <td>Zelle 2,1</td>
   <td>Zelle 2,2</td>
   <td>Zelle 2,3</td>
  </tr><tr>
   <td>Zelle 3,1</td>
   <td>Zelle 3,2</td>
   <td>Zelle 3,3</td>
  </tr>
 </tbody>
</table>

Mit dem Attribut rules in Verbindung mit dem Attribut border werden im reinen XHTML für die Tabellen mit thead, tfoot und tbody die Rahmenlinien verändert. Ich möchte hier gar nicht so arg auf diese Attribute eingehen, wer sich näher dafür interessiert sei auf die folgenden Seiten bei SELFHTML verwiesen.

Tabelle mit CSS

Wie sie in den Artikeln über CSS schon gelesen haben (hier nochmals der Link), kann man die CSS Anweisungen mit dem Attribut style in fast allen Tags einbauen. Bei der Tabelle können Sie style auf <table>, <tfoot>, <thead>,<tbody> und natürlich auf <tr>, <th> und <td> anwenden. Damit können Sie für alle Elemente der Tabelle eigene Formatrichtlinien definieren, die Sie auf die Schriftart, die Breite, Höhe etc. einstellen können.

Nur müssen Sie die Syntaxregeln des CSS beherrschen. Und hier ist es wichtig, dass die Anweisungen nicht mit a=“xx“ sondern mit a:xx angegeben werden.

Das alles funktioniert mit dem style-Attribut! Sie können bspw. schreiben:
<td style=“background-color:#660000; color:#FF0000; font-weight:bold“>Text TEXT</td>
und erhalten folgende Tabellenzelle:
Text TEXT

Klar ist aber, dass die Tabelle vor lauter style-Attributen dann ziemlich unübersichtlich wird. Deshalb gibt es eine viel bessere Möglichkeit die Styleangaben auf Ihre Seite zu bannen:

<style>-tag

Sie können in oder unter den Header Ihrer Seite mit dem style-Tag alle notwendigen styles vordefinieren und sich darauf dann in Ihren Tags beziehen.

<style type=“text/css“>
……. Hier kommen die CSS-Anweisungen hin …..
</style>

Zwischen diesen beiden Tags gilt dann aber keine HTML-Syntax mehr, sondern ausschließlich CSS Syntax, und auf die werden wir jetzt kurz nochmals eingehen:

Ein Stylesheet und das ist das, was wir oben mit <style>…</style> einschließen. Es besteht aus einer sog. Stilregel, die wiederum 2 Komponenten hat:

  1. Selektor: Ein Selektor ist ein HTML-Element, auf das die Stilregel angewendet werden soll.
  2. Deklaration: Eine Deklaration beinhaltet die Werteausgestaltung der Stilregen

Dabei wird die Deklaration durch die Zeichen { und } umschlossen und der Selektor vorneangestellt: also:

Selektor { Deklaration }

Eine Deklaration besteht immer aus 2 Elementen: der Eigenschaft und dem Wert durch einen : von einander getrennt, also

Eigenschaft : Wert.

Somit können Sie einmal für alle benutzen Tags auf Ihrer Seite vorab im Stylesheet Vereinbarungen treffen:

<style type=“text/css“>
h1 { color: #000000; size:20pt; }
h2 { color: #FF0000, size:18pt; }
h3 { color: #00FF00, size:16pt; }
h4 { color: #0000FF, size:14pt; }
</style>

Immer wenn Sie jetzt das h1-Tag benutzen, wird es schwarz mit einer Schriftgröße von 20pt (Punkten) erscheinen. Es ist somit eine wirklich vereinfachende Möglichkeit der Vorabdefinition von Darstellungen.

Was aber noch viel besser ist, Sie können sog. Stilklassen definieren:
Eine Stilklasse wird mit .name definiert (Punkt und eine beliebige Bezeichnung). Auf diese nehmen Sie in Ihrem Coding Bezug durch das Attribut „class“.
z.B.

<style type=“text/css“>
.myred { color: #FF0000; }
</style>
…..
<td class=“myred“>Dieser Text wird nun in rot erscheinen</td>

Sie sehen, man gibt im Stylesheet zwar die Klasse mit einem Punkt an, doch bei der Verwendung der Klasse im class-Attribut den Namen ohne den Punkt.

Der entscheidende Vorteil ist, dass das Style-Tag auf der Seite nur für diese Seite gilt, Sie können also für jede Ihrer Seiten die Darstellung ändern, indem Sie die Angaben im Stylesheet Ihrer Seite anpassen.

Das hört sich nun alles so einfach an, nicht wahr? „Wieso“, fragen Sie sich, „hat er nicht gleich mit CSS angefangen, ich hätte mir einige Attribute sparen können?“

Das alles gehört zur behutsamen Einführung in CSS! CSS kann viel viel komplexer, fast zu komplex werden. Deshalb stelle ich Ihnen nun noch im Beispiel das Tabellenlayout für Tabellen in meinen Artikeln vor. Behutsam, behutsam!


Problem Lösung Rel
Problem 1 Lösung1 alle
Problem 2 Lösung2 alle
Problem 3 Lösung 3 alle

Dazu gehört das Coding

<table class=“mytab“ border=“0″ width=“100%“>
 <tr class=“mytabHRow“>
  <td class=“mytabHContent“ width=“45%“><strong>Problem</strong></td>
  <td class=“mytabHContent“ width=“50%“><strong>Lösung</strong></td>
  <td class=“mytabHContent“ width=“5%“><strong>Rel</strong></td>
 </tr>
 <tr class=“mytabHRow“>
  <td class=“mytabHContent“>Problem 1</td>
  <td class=“mytabHContent“>Lösung1</td>
  <td class=“mytabHContent“>alle</td>
 </tr>
 <tr class=“mytabHRow“>
  <td class=“mytabHContent“>Problem 2</td>
  <td class=“mytabHContent“>Lösung2</td>
  <td class=“mytabHContent“>alle</td>
 </tr>
 <tr class=“mytabHRow“>
  <td class=“mytabHContentRed“>Problem 3</td>
  <td class=“mytabHContentRed“>Lösung 3</td>
  <td class=“mytabHContentRed“>alle</td>
 </tr>
</table>

 

Und hier die Preisgabe der Klassen:

table.mytab {
  padding:0;
  margin:0;
  padding-left:1px;
  width:100%;
}
.mytabHRow {
  background-color: #E0FFC0;
  margin-left:1px;
}
.mytabHContent {
  font-family: Verdana, Arial,sans-serif;
  padding-top:5px;
  font-size: 10px;
  background-color: #E0E0E0;
  color: #336699;
  font-weight:normal
}
.mytabHContentRed {
  font-family: Verdana, Arial,sans-serif;
  padding-top:5px;
  font-size: 10px;
  background-color: #E0E0E0;
  color: #CC0000;
  font-weight:normal
}

Wie sie sehen, werden hier zwar eine Menge Eigenschaften gesetzt, die ich noch nicht erklärt habe. Auf eine möchte ich aber hier noch kurz eingehen, die restlichen können Sie z.B. hier nachlesen. Ich werde erst viel später darauf eingehen können!

Mit der Eigenschaft font-family hat es folgende Bewandtnis: Sie dient mal wieder unsern Chinesen, aber auch Leuten, die Ihre Seite anschauen und aus anderen Ländern kommen. Hier wird als Schriftart Verdana angegeben, was aber, wenn der Browser unseres Freundes aus China gar nicht weiß, was Verdana ist? Nicht alle Schriftarten sind in allen Browsern vorhanden! Nun dann schaut der chinesische Browser nach ob er Arial hat, wenn nicht dann hat er bestimmt die Schriftart sans-serif, denn die ist in ziemlich allen Browsern eingebaut.

Sie geben also mit font-family eine Reihe von Fonts an, die von links nach rechts abgearbeitet werden, bis eine passt. Wenn beim Browser alle Stricke reisen, dann hat er noch seine Standard-Schriftart, die er zum Schluss anwendet.

So das war das Kapitel Tabellen im HTML. Es war lang, aber wir werden immer wieder darauf zurückkommen müssen, weil die HTML-Tabelle eine der meist genutzten Darstellungsformen ist. Ich darf aber nicht vergessen Ihnen noch einiges über Links, Bilder und Formulare im HTML zu schildern, deshalb beende ich hier dieses Kapitel über die Tabellen.

Gruß
Bernd Klüppelberg

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar