HTML - Kurs Mit Tabellen kann man Objekte, Grafiken oder Texte auf leichte Art und weiße in einem Layout unterbringen. Wie Sie diese Tabellen erstellen, erfahren Sie im vierten Teil.

Oben die Werbung, Links das Menü, in der Mitte der Text. So in etwa sieht bei den meisten Webseiten das Layout aus. Die feste Struktur wird hier von Tabellen erzwungen. Es gibt Programme, die das Layouten leicht machen, wie z.B. Dreamweaver, der eine extra Layoutansicht hat. Hier wollen wir ihnen jedoch einfach zeigen, wie sie praktisch mit Tabellen umgehen.

Erstellen Sie auch hierzu eine neue HTML-Seite mit der Grundstruktur, der Code sollte wie folgt aussehen.


<html>
<head>

<title>Der Titel</title>


</head>

<body>


<table width="300px" border="1">
<tr>
<td>Erste Spalte</td>
<td>Zweite Spalte</td>
<td>Dritte Spalte</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

</body>

</html>


In ihrem Browser sollten Sie dies hier sehen.

Eine einfache Tabelle

Eine Tabelle wird in HTML mit dem <table> Tag eingeleitet. Man kann der Tabelle feste Größen mit den Attributen "width" und "height" geben. Das "height" Attribut ist eher optional, da sich die Inhalte ja nicht nach einer festgelegten Höhe orientieren, der Inhalt ist nunmal so groß. Eine Zeile wird in HTML mit dem Tag <tr> eingeleitet. Diese eine Zeile hat dann eine bestimmte Anzahl von Feldern. Diese Felder werden mit <td> festgelegt. In ihnen kann man Texte oder Bilder ausgeben. Zeile für Zeile ist logisch angeordnet. Man kann auch dem <td> Tag die Attribute "width" und "height" geben. Standardmäßig wird die gesamtbreite der Tabelle unter den einzelnen Zellen aufgeteilt. Wie sie in diesem Code sehen, finden Sie eine neue "Zeichenkette", das "&nbsp;". Diese Zeichenkette erzwingt ein Leerzeichen. Die Zelle richtet sich in der Höhe nach dem eingefügte Inhalt, wäre dort kein Leerzeichen, dann hätte die Zelle keinen Inhalt, somit würde es die Zelle gar nicht geben. Probieren Sie es einfach aus, entfernen Sie einmal das &nbsp;.

Sie können den <table> Tag noch um weitere Attribute erweitern, cellspacing="0"
gibt an, wie weit (in Pixeln) die einzelnen Zellen voneinander entfernt sein sollen, zudem gibt cellpadding="0" an, wie weit der Text von dem Rand der Zelle entfernt sein soll. Das "border" Attribut gibt die dicke des Rahmens in Pixeln an. Desweiteren können Sie einzelne Farben definieren. Sie können mit dem Attribut "bgcolor" die Hintergrundfarbe der Tabelle, einer Zeile oder einer Zelle angeben. Mit dem Attribut "color" können Sie die Farbe des Textes angeben.

Und nun zu unserem einfachen Tabellenlayout das soll so aussehen:


Das Ergebnis (verkleinert
)

Wie Sie sehen gibt es insgesamt zwei Zeilen. In der ersten Zeile gibt es nur eine Zelle, in der zweiten Zeile gibt es zwei Zellen, für das Menü, und für den Inhalt.

Der Code ist deshalb auch nicht weiter schwer:

<table width="750" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="60" valign="top">&nbsp;</td>
</tr>
<tr>
<td width="150" height="440" valign="top">&nbsp;</td>
<td width="600" valign="top">&nbsp;</td>
</tr>
</table>

Hier finden Sie ein wichtiges Attribut in den <td> Tags. Das "valign" gibt an, woran sich der Text "orientieren" soll. Hier ist es jeweils "top", also oben. Wenn Sie dem Attribut den Wert "bottom" geben, dann ist der Text unten zu finden.

Im nächsten, und letzten Teil des HTML Kurses lernen Sie, wie sie die einzelnen Dokumente mit Links verknüpfen, und wie Sie ein einfaches Menü gestalten.

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: