Home
  Windows
  Internet
  E-Mail
  Homepage
    Homepage I - HTML
      Hypertext Markup Language
      Syntax
      Meine erste Seite
      Formatierungen
      Bilder einfügen
      Hyperlinks
      Tabellen
      Frames
      FTP
      Tags und Attribute
Termine
Download
Kontakt

© Dietmar Becker
Microsoft Certified Professional

Tabellen - Layout-Gestaltung

Tabellen werden meist verwendet, um Texte und Grafiken geordnet und übersichtlich am Bildschirm zu verteilen. Ursprünglich sind Tabellen zur Darstellung tabellarischer Daten geschaffen worden, doch durch Ihre individuelle Gestaltungsvielfalt sind sie in der heutigen Praxis überwiegend für Seiten-Layouts nicht mehr wegzudenken.

Somit sind Tabellen eine übliche Methode, eine Struktur zu verwirklichen.

Auch auf meiner Homepage habe ich mich der Tabellenform bedient, um die Navigation übersichtlich und strukturiert darzustellen.

Mit dem Tag <table></table> (table = Tabelle) wird eine Tabelle erstellt (Endtag erforderlich)
Eine Zeile wird mit dem Tag <tr></tr> (Table Row = Tabellen Reihe) wird eine Zeile eingefügt.
Das Tag <td></td> (Table Data = Tabellen Daten) wird eine Zelle erstellt, in welcher später der Inhalt eingefügt wird.

In der Regel sind diese Tabellen "unsichtbar", d.h. nicht als solche erkennbar. Zum besseren Verständnis werden die Tabellen erst einmal mit dem Attribut border="1" gekennzeichnet.

Und hier unsere erste Tabelle - sie soll aus einer Zeile und zwei Spalten (also Inhalte) bestehen:

<!-- Quellcode Anfang -->
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0//EN//“>
<html>
<head>
<title>Meine erste Seite mit einer Tabelle </title>
</head>
<body>

<table border="1">
<tr>
<td>Inhalt 1</td>
<td>Inhalt 2</td>
</tr>
</table>


</body>
</html>
<!-- Quellcode Ende -->

Das sieht dann so aus:

Im nächsten Beispiel möchten wir eine Tabelle mit vier Spalten (A - D) und drei Zeilen (1 - 3) erstellen, die zusätzlich noch 100% der verfügbaren Breite einnimmt (Attribut weight="100%" im innerhalb des <table> Tags. Der Quellcode sieht dann so aus:

<!-- Quellcode Anfang -->
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0//EN//“>
<html>
<head>
<title>Meine erste Seite mit einer Tabelle </title>
</head>
<body>

<table border="1" weight="100%">
 <tr>
<td> A1</td>
<td> B1</td>
<td> C1</td>
<td> D1</td>
</tr>
<tr>
<td> A2</td>
<td> B2</td>
<td> C2</td>
<td> D2</td>
</tr>
<tr>
<td> A3</td>
<td> B3</td>
<td> C3</td>
<td> D3</td>
</tr>
</table>


</body>
</html>
<!-- Quellcode Ende -->

Und im Browser sehen wir dann dieses Ergebnis:

Im nächsten Beispiel möchte ich die Zellen A1 - D1 verbinden - was mit dem Attribut colspan="4" (cols = columns = Spalten und span = überspannen) innerhalb des ersten <th> Tags erreicht wird.
Dann möchte ich die Zellen A2 und A3 verbinden - dies wird mit dem Attribut rowspan="2" (row = Reihen und span = überspannen) innerhalb des ersten <th> Tags erreicht wird.

Und um etwas Farbe in die Tabelle zu bekommen, fügen wir den Zellen noch das Attribut bgcolor="farbe" (bgcolor = background Color = Hintergrundfarbe) hinzu. (bei "farbe" können bestimmte englische Farbnamen oder auch Hexadezimale Werte, z.B. #C50B3A eingesetzt werden)

Hier der Quellcode der Tabelle:

<!-- Quellcode Anfang -->
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0//EN//“>
<html>
<head>
<title>Meine erste Seite mit einer Tabelle - Zellen verbinden und einfärben</title>
</head>
<body>

<table border="1" width="100%">
<tr bgcolor="orange">
<th colspan="4"> 4 Spalten verbinden f&uuml;r die Tabellen&uuml;berschrift</th>
</tr>
<tr>
<td width="25%" bgcolor="#C50B3A" rowspan="2"> 2 Reihen verbinden </td>
<td width="25%" bgcolor="lime"> B2</td>
<td width="25%" bgcolor="yellow"> C2</td>
<td width="25%" bgcolor="red"> D2</td>
</tr>
<tr>
<td width="25%" bgcolor="#00FF00"> B3</td>
<td width="25%" bgcolor="#FFFF00"> C3</td>
<td width="25%" bgcolor="#FF0000"> D3</td>
</tr>
</table>


</body>
</html>
<!-- Quellcode Ende -->

Dies wird im Browser dann so dargestellt:

So, und zum Schluß noch ein Beispiel eines typischen Tabellen-Layouts.

Damit man keine Rahmen sieht, geben wir dem Attribut border den Wert "0" mit (border="0") und bestimmen mit den Attributen cellpadding="0" (cellpadding = Zelleninnenabstand, der Abstand zwischen Zellenrand und Zelleninhalt in Pixeln) und cellspacing="0" (cellspacing = Zellenabstand, der Abstand der Zellen untereinander in Pixeln), dass keine Lücken (Abstände) entstehen.

Im Quellcode stellt sich das so dar:

<!-- Quellcode Anfang -->
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0//EN//“>
<html>
<head>
<title>Meine erste Seite mit einer Tabelle - Seitenlayout mit Tabellen</title>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#006633" alink="#FF0000" vlink="#006633">

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr bgcolor="orange">
<th> <img src="../images/hI_logo.gif" width="256" height="98"></th>
<th><h1>HTML-Kurs I </h1></th>
</tr>
<tr>
<td width="25%" height="100%" valign="top" bgcolor="orange"> <h1>Navigation</h1>
<p><a href="../hI_syntax.html" target="_blank">Syntax</a><br>
<a href="../hI_formatierungen.html" target="_blank">Formatierung</a> <br>
<a href="../hI_bilder.html" target="_blank">Bilder</a><br>
<a href="../hI_hyperlinks.html" target="_blank">Hyperlinks</a><br>
<a href="../hI_tabellen.html" target="_blank">Tabellen</a><br>
<a href="../hI_frames.html" target="_blank">Frames</a></p>
<h1>Aktuell </h1>
<p>Heute im Angebot:<br>
Ganz neue, frische Webseiten!!!</p>

<!-- Hier ein paar leere Umbrüche als Lückenfüller -->
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<!-- Ende leere Umbrüche-->


</td>
<td valign="top">
<h1>Seitenlayout mit einer Tabelle</h1>
<p>Hier steht dann jede Menge Text, Informationen, Bilder....</p>
<p>&nbsp;</p></td>
</tr>
</table>


</body>
</html>
<!-- Quellcode Ende -->

Und hier das Ergebnis....

.....kann sich doch schon sehen lassen!

Eine weitere möglichkeit des Seitenlayouts läßt sich mit Frames (Rahmen) verwirklichen. Mehr dazu im gleichlautendem nächsten Kapitel.



 

zurück zum Seitenanfang