DSL Anbieter im Vergleich
 

Tabellen

  

Das nächste Kapitel behandelt das Thema Tabellen

<table></table> Definition einer Tabelle
<tr> Definiert eine Tabellenzeile
<td> Definition einer Tabellenzelle
<th></th> Attribute wie in <TD> Tabellenzelle mit Überschrift, die Darstellung erfolgt automatisch "zentriert" und "fett".
<caption></caption> Zeigt Tabellenüberschrift an

Erst einmal behandeln wir Grunsätzliche Definition der Tabelle, auf Rahmen, Farben und Hintergründe gehe ich später ein.

Gebt folgendes in den Editor ein und speichert es als "seite9.htm"

<html>
<head>
<title>Meine erste Webseite</title>
</head>
<body>
<table border="1">
<tr>
<td>Zelle1</td>
<td>Zelle2</td>
<td>Zelle3</td>
</tr>
<tr>
<td>Zelle1</td>
<td>Zelle2</td>
<td>Zelle3</td>
</tr>
</table>
</body>
</html>

...hier das Beispiel

<table> leitet die Tabelle ein, dann wird mit <tr> der Beginn der ersten Zeile definiert, danach werden mit 3x<td></td> drei Zellen definiert und mit </tr> die Zeile wieder beendet.
Die zweite Zeile wird wieder mit <tr> eingeleitet usw...., den Abschluß bildet dann </table>.

Es muß zwischen den Tags <td> und </td> immer ein Inhalt enthalten sein, sonnst wird die Zelle nicht richtig dargestellt. Haben wir kein Inhalt für die Zelle, fügen wir einfach ein Leerzeichen ein (den Inhalt der Anführungszeichen "&nbsp;"), dieses wird später nicht sichtbar sein.

Der Tabellenrahmen wird so definiert <table border="1">, lassen wir border="1" weg, nimmt der Browser an der Wert ist "0" und der Tabellenrahmen ist unsichtbar.

Tauschen wir jetzt die Tags <td> und </td> der ersten Zeile gegen <th> </th> aus und leiten die Tabelle so ein <table border="1" width="100%"> wird die Tabelle auf die ganze Seite ausgedehnt. Würden wir 50% angeben wäre die Tabelle nur über die halbe Seite ausgedehnt. Ebenso ist es möglich das Prozentzeichen auszulassen dann werden die Angaben als Pixel interpretiert. Der Vorteil der Prozentangaben ist aber, dass egal bei welcher Bildschirmauflösung gearbeitet wird, die Darstellung immer im gleichem Verhältnis gezeigt wird. Der HTML Code würde dann so aussehen:

<html>
<head>
<title>Meine erste Webseite</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<th>Zelle1</th>
<th>Zelle2</th>
<th>Zelle3</th>
</tr>
<tr>
<td>Zelle1</td>
<td>Zelle2</td>
<td>Zelle3</td>
</tr>
</table>
</body>
</html>

...hier das Beispiel

Genau wie sich die Tabellenbreite beinflussen läßt können auch den einzelnen Zellen die Höhe und Breite zugewiesen werden. Das kann so aussehen:

<html>
<head>
<title>Meine erste Webseite</title>
</head>
<body>
<table border="1" width="50%" height="50%">
  <tr> 
    <th colspan="2" height="25%">Zelle1</th>
    <th colspan="2" height="25%">Zelle2</th>
    <th colspan="2" height="25%">Zelle3</th>
  </tr>
  <tr> 
    <td colspan="2" height="25%">Zelle1</td>
    <td colspan="2" height="25%">Zelle2</td>
    <td colspan="2" height="25%">Zelle3</td>
  </tr>
  <tr> 
    <td height="50%">Zelle1</td>
    <td height="50%">Zelle2</td>
    <td height="50%">Zelle3</td>
    <td height="50%">Zelle4</td>
    <td height="50%">Zelle5</td>
    <td height="50%">Zelle6</td>
  </tr>
</table>
</body>
</html>

...hier das Beispiel

Hier die Erklärung der Angaben am Beispiel <td colspan="2" height="25%">: "colspan=2" bedeutet die Zellenstreckung über 2 Zellen, da wir ja in der letzten Zeile 6 Zellen haben, die 25% sind bezogen auf die Tabellenhöhe insgesamt.

Zum Abschluss zeige ich noch, wie es aussehen kann wenn Farbe in das Spiel kommt und wie sich mit Tabellen ganze Webseiten gestalten lassen. Jetzt muss ein wenig mehr eingegeben werden, ihr schafft das schon !

<html>
<head>
<title>Meine erste Webseite</title>
</head>
<body topMargin=0 leftMargin=0>
<table border="0" 
width="100%" height="100%" 
cellpadding="0" cellspacing="0">
  <tr bgcolor="#0099CC"> 
    <th colspan="5" height="10%"> 
      <h1>Meine Webseite</h1>
    </th>
  </tr>
  <tr> 
    <th height="45%" bgcolor="#0099CC">Inhalt</th>
    <th height="45%" bgcolor="#FFCC99">Text</th>
    <th height="45%" bgcolor="#FFCC99">Text</th>
    <th height="45%" bgcolor="#FFCC99">Text</th>
    <th height="45%" bgcolor="#FFCC99">Text</th>
  </tr>
  <tr> 
    <th height="45%" width="20%" bgcolor="#0099CC">Inhalt</th>
    <th height="45%" bgcolor="#FFCC99">Text</th>
    <th height="45%" bgcolor="#FFCC99">Text</th>
    <th height="45%" bgcolor="#FFCC99">Text</th>
    <th height="45%" bgcolor="#FFCC99">Text</th>
  </tr>
</table>
</body>
</html>

...hier das Beispiel

Auf dieser Seite ist noch etwas neu hinzu gekommen, im "body tag" stehen topMargin=0 leftMargin=0>, diese bewirken das die Tabelle auf der Webseite ohne Rand dargestellt wird.

Sehen Sie sich doch auch meine Seite über Cascading Style Sheets an

Home | Einführung | Grundlagen | Style Sheet | Javascript | Hilfreiches | Webseitentest | Veröffentlichen | Links | Anhang | Literatur

Kontakt & Copyright © René Schwarz