HTML verstehen Teil 6: Tabellen III

HTML verstehen Teil 6: Tabellen-Attribute

Herzlichen Glückwunsch, Sie können jetzt schon eine ganze Menge bei den Tabellen einstellen. Heute kommen wir in Fortsetzung des Teil 2 zu den weiteren Gestaltungsmöglichkeiten der Tabelle: Der Farbe, die Zellengröße etc. Doch am Anfang des Artikels möchte ich die bisher dargestellte Tabelle erweitern.

Richtig so eine einfache Tabelle kann ja jeder, Sie wollen doch mehr! Wie wäre es, wenn Sie eine Tabelle in der Tabelle definieren können?

Schauen Sie sich diese Tabelle einmal an:

Tabellenkopf
Zeile 1, Spalte 1 und noch ein wenig mehr Zeile 1, Spalte 2
Zeile 2, Spalte 1
Zelle (3,2),mit Tabelle Zeile (3,2),mit Tabelle
Zeile (3,2),mit Tabelle Zeile (3,2),mit Tabelle
Zeile 3, Spalte 1 Zeile 3, Spalte 2

Wie Sie sehen ist in der Zelle (3,2) statt des Textes eine neue Tabelle ohne Kopfzeile eingewandert. Hier das Coding, das Sie sich herauskopieren, in einen Editor einstellen und ausprobieren sollten: Sie wissen ja: „Übung macht den Meister“

<table border=“1″ width=“100%“>
  <tr >
   <th colspan=“2″ align=“center“>Tabellenkopf</th>
  </tr>
  <tr>
   <td width=“20%“>Zeile 1, Spalte 1 und noch ein wenig mehr</td>
   <td width=“80%“>Zeile 1, Spalte 2</td>
  </tr>
  <tr>
   <td>Zeile 2, Spalte 1</td>
   <td>
    <table border=“1″ width=“100%“>
     <tr>
      <td>Zelle (3,2),mit Tabelle</td>
      <td>Zeile (3,2),mit Tabelle</td>
     </tr>
     <tr>
      <td>Zeile (3,2),mit Tabelle</td>
      <td>Zeile (3,2),mit Tabelle</td>
     </tr>
    </table>

   </td>
  </tr>
  <tr>
   <td align=“center“>Zeile 3, Spalte 1</td>
   <td>Zeile 3, Spalte 2</td>
  </tr>
</table>

[Übrigens, wenn Sie sich den Quellcode dieses Artikels ansehen und sich obiges Tabellencoding anschauen, werden Sie wahrscheinlich nicht mehr so viel erkennen können. Das liegt an den Tags, die ich Ihnen ja zeigen will und nicht ausführen will, deshalb die Ersatzeichen]

Probieren Sie doch mal aus, was passiert, wenn Sie bei dem obigen Coding bei dem ersten <table>-Tag, das Attribut border=“1″ auf border=“0″ einstellen. Dann wird die Tabelle schon fast zu einer Seitenaufbereitung mit Tabellenkopf als Logo-Linie und einem linken Menüteil, sowie einem Seitentextteil mit der neuen Tabelle. Da kommen wir aber noch hin!

Farbiges Layout

Kommen wir zu den Farben innerhalb einer Tabelle. Das Attribut, das Sie vergeben, ist die Hintergrundfarbe bgcolor=“#FFFF00″ für die Farbe gelb.
Je nachdem bei welchem Tag sie dieses Attribut definieren, haben Sie verschiedene Wirkungsweisen:

bgcolor im Tag bewirkt Färbung
<table> gesamte Tabelle
<tr> gesamte Zeile
<td> gesamte Zelle

Sie können bspw. eine Tabelle komplett gelb färben, und nur eine Zeile auf blau umfärben: Sie geben im table-Tag bgcolor=“#FFFF00″ an und in einem td-Tag dann bgcolor=“#0000FF“:

bgcolor im Tag bewirkt Färbung
<table> gesamte Tabelle
<tr> gesamte Zeile
<td> gesamte Zelle

Was im Coding folgendermaßen aussieht:

<table border=“1″ bgcolor=“#FFFF00″>
 <tr>
  <td><b>bgcolor im Tag</b></td>
  <td> <b>bewirkt Färbung</b></td>
 </tr>
 <tr>
  <td><table></td>
  <td > gesamte Tabelle</td>
 </tr>
 <tr>
  <td bgcolor=“#0000FF“ ><tr></td>
  <td > gesamte Zeile</td>
 </tr>
 <tr>
  <td><td></td>
  <td> gesamte Zelle</td>
 </tr>
</table>

Sie sehen, hier können Sie sich mit Farben austoben. Aber ein Tipp: Treiben Sie es nicht zu arg, denn die bunten Tabellen und Seiten gehören der Vergangenheit an. Heutzutage nimmt man leichte Grau-, oder Blautöne, um die Hintergründe zu gestalten. Pastell-Farben sind heute gefragt. Das bunte kommt noch von den alten 16 Farben Bildschirmen, und so etwas habe Sie heute im Keller stehen, nicht mehr auf Ihrem Schreibtisch!

Bei obiger Tabelle sehen Sie aber auch, dass Sie das blaue Feld kaum lesen können. Es gibt aber leider keine Vordergrundfarbe für Tabellen im reinen HTML! Deshalb müssen Sie sich hier mit dem <font>-Tag (siehe Teil 4) behelfen:

Das blaue Feld würden Sie dann vielleicht so schreiben:
<td bgcolor=“#0000FF“ ><font color=“#FFFFFF“><tr></font></td>

Zellengrößen

Sie haben ja im letzten Teil der Tabellen schon gelernt, dass der Browser immer versucht, eine „schöne“ Tabelle auf den Bildschirm zu speichern. Manchmal kann es gut aussehen, wenn man die Abstände der Tabellenzellen etwas manipuliert.

Dafür gibt es die beiden Attribute cellspacing und cellpadding!

  • cellspacing bedeutet den Abstand der Zellen untereinander und wird in Pixel angegben
  • cellpadding bedeutet den, also den Abstand zwischen dem Zellenrand und dem Zelleninhalt

Ich hab da mal etwas vorbereitet:[Quelle:de.selfhtml.org/]

<table border=“8″ cellspacing=“10″ cellpadding=“20″>
 <tr>
  <th>Berlin</th>
  <th>Hamburg</th>
  <th>Münchenlt;/th>
 </tr>
 <tr>
  <td>Miljöh</td>
  <td>Kiez</td>
  <td>Bierdampf</td>
 </tr>
 <tr>
  <td>Buletten</td>
  <td>Frikadellen</td>
  <td>Fleischpflanzerl</td>
 </tr>
</table>

Dieses Coding bringt folgende Ausgabe:

Berlin Hamburg München
Miljöh Kiez Bierdampf
Buletten Frikadellen Fleischpflanzerl

Spielen Sie mit diesen Angaben doch ein wenig, und Sie werden verblüffende Ergebnisse zeitigen. Dies war nun die Einfärbung und die Größenmanipulation ohne CSS!
Es gibt noch ein Vielzahl anderer Tabellenattribute und noch ein paar Tags, mit denen Sie ohne CSS Ihre Tabellen ausgeben können. Diese Tags sind bspw.
<thead> , <tbody> und <tfoot>. Diese Tags wurden insbesondere für CSS ins XHTML aufgenommen, um Tabellen noch „formatierbarer“ zu machen.

Doch davon in der nächsten Folge, dann aber mit CSS! Wobei ich CSS natürlich erst kurz erklären werde.
Bis zur nächsten Folge, und Sie wissen ja, falls Sie Fragen haben, dann bitte einen Kommentar schreiben.

Gruß
Bernd Klüppelberg

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar