ChristophTutorials - (Video)Tutorialseite und IT-Blog

Zitat der Woche

Früher hatten wir die spanische Inquisition. Jetzt haben wir die Kompatibilität.
- Herbert Klaeren

Letzte Artikel

Zufällige Artikel

Verzeichnisse

Blogverzeichnis - Blog Verzeichnis bloggerei.de Blogverzeichnis Blog Verzeichnis Blog Top Liste - by TopBlogs.de Blog Button
Datenschutzerklärung
Impressum
HTML - Tabellen - 31.10.2010
Ab und zu braucht man einfach Tabellen um gewisse Dinge darstellen zu können. Mit Tabellen kann man sogar ein ganzes Seitendesign schreiben (was aber nicht so empfehlenswert ist). Im Folgenden wird gezeigt, wie man in HTML Tabellen erstellt und auch, wie man Zellen verbinden kann.
Das Tag und noch mehr Tags
Das oberste Tagpaar heißt ganz einfach <table> </table>. Aber irgendwas fehlt dieser Tabelle noch! Es fehlt uns an Zeilen! Zeilen erzeugt man mit dem Tagpaar <tr> </tr>. Und eine Zeile wiederum kann eine oder mehrere Zellen enthalten, die durch das Tagpaar <td> </td> erzeugt werden. Für Tabellenüberschriften benutzt man statt <td> </td> das Tagpaar <th> </th>. Hier ein kleines Beispiel für eine einfache Tabelle:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Tabellenbeispiel</title>
 </head>
 <body>
  <table>
   <tr>
    <th>Überschrift 1</th>
    <th>Überschrift 2</th>
    <th>Überschrift 3</th>
   </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>
   <tr>
    <td>Zelle 4;1</td>
    <td>Zelle 4;2</td>
    <td>Zelle 4;3</td>
   </tr>
  </table>
 </body>
</html>
Das sieht dann so aus:
Überschrift 1 Überschrift 2 Überschrift 3
Zelle 2;1 Zelle 2;2 Zelle 2;3
Zelle 3;1 Zelle 3;2 Zelle 3;3
Zelle 4;1 Zelle 4;2 Zelle 4;3
Und das soll eine Tabelle sein? Da fehlt doch irgendwas! Tabellen haben doch immer diese Striche zwischen den Zellen!
Um die Tabelle zu umranden und die "Striche" hinzubekommen gibt es das Attribut "border". Als Wert soll man in Pixel angeben, wie dick die Umrandung der Tabelle sein soll:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Tabellenbeispiel</title>
 </head>
 <body>
  <table border="2">
   <tr>
    <th>Überschrift 1</th>
    <th>Überschrift 2</th>
    <th>Überschrift 3</th>
   </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>
   <tr>
    <td>Zelle 4;1</td>
    <td>Zelle 4;2</td>
    <td>Zelle 4;3</td>
   </tr>
  </table>
 </body>
</html>
Und das sieht dann so aus:
Überschrift 1 Überschrift 2 Überschrift 3
Zelle 2;1 Zelle 2;2 Zelle 2;3
Zelle 3;1 Zelle 3;2 Zelle 3;3
Zelle 4;1 Zelle 4;2 Zelle 4;3
Naja, schon mal etwas besser. Wir werden später lernen, wie man so etwas mit CSS noch besser hinbekommt.
Zellen verbinden
Häufig muss man zwei Zellen verbinden. Und auch dafür gibt es wieder zwei Attribute. Sie werden auf das Tag <td> (und <th>) angewandt.

Das Attribut "colspan" verbindet Zellen waagerecht, das Attribut "rowspan" verbindet Zellen Senkrecht. Die Attribute wollen als Wert die Anzahl Zellen, die sie einnehmen sollen. Die so ersetzten Zellen müssen dann weg gelassen werden, sonst kann das ziemlich merkwürdig aussehen. Und hier schon wieder "ein kleines Beispiel" (Ich habe die <html>- und <body>-Tags weg gelassen):
 <table border="2" id="tabellenbeispiel">
  <tr>
   <th>Überschrift 1</th>
   <th>Überschrift 2</th>
   <th>Überschrift 3</th>
  </tr>
  <tr>
   <td colspan="2">Zelle 2;1-2</td>
   <td>Zelle 2;3</td>
  </tr>
  <tr>
   <td>Zelle 3;1</td>
   <td colspan="2" rowspan="2">Zelle 3-4;2-3</td>
  </tr>
  <tr>
   <td>Zelle 4;1</td>
  </tr>
 </table>
Und das sieht dann so aus:
Überschrift 1 Überschrift 2 Überschrift 3
Zelle 2;1-2 Zelle 2;3
Zelle 3;1 Zelle 3-4;2-3
Zelle 4;1
Keine Leeren Zellen!
Wenn man bei HTML eine Zelle leer lassen will, sollte man sie mit einem erzwungenen Leezeichen füllen. Um ein "erzwungenes Leerzeichen" auszugeben schreibt man einfach "&nbsp;". Eine kurze Liste mit noch mehr solcher Sonderzeichen, wir auch in einem weiteren Tutorial folgen.

Kommentare:

- kein Kommentar -
Um einen Kommentar zu schreiben ist eine Anmeldung nötig.