Photoshop
Cinema 4d
HTML / CSS
JavaScript
PHP
Flash
Fotografie
Terragen
Webserver
Informatik
Sonstige
Tabellen (HTML Tutorial)
Tutorial erstellt von cinpix, letzte Änderung am 17.07.2007
Tabellen sind im Gestalten von Webseiten fast unumgänglich. Man verwendet sie nicht nur um etwas in simplen Tabellen darzustellen,
nein, man kann sie auch für eine solide Aufteilung der Seite verwenden, wie zum Beispiel einen Bereich für den Banner,
einen anderen für die Navigation und einen weiteren Bereich für den eigentlichen Inhalt.
Der Quellcode einer Tabelle, die 3x2 Zellen enthält, sieht so aus:
Code:
Um eine Tabelle im HTML Editor Phase 5.3 per Knopfdruck in den body einzufügen, müsst ihr lediglich in der oberen Leiste "Tabelle"
auswählen, die Anzahl der Zellen angeben und dann einfach auf "Einfügen" drücken.
Wie ihr seht, besteht eine Tabelle aus dem <table> -Tag! Um ein Gitternetz um die Zellen zu erzeugen, kann man den <table> -Tag um
das Attribut border=X erweitern. Für den Wert X gibt man eine Zahl ein, die in Pixeln die Breite der Linien der Tabelle angibt, beispielsweise 1.
Der Wert 0 erzeugt eine blinde Tabelle, also eine Tabelle, die keinen Rand und keine Gitternetzlinien enthält.
Der <tr> -Tag leitet eine neue Tabellenzeile ein. Im Anschluss daran werden die Zellen (Spalten) der betreffenden Reihe definiert.
Am Ende einer Tabellenzeile wird sie mit einem </tr> -Tag wieder geschlossen.
In unserem Beispiel-Quelltext habe ich die Tabelle mit Kopfzellen erweitert, um eine bessere Übersicht der Einteilung zu bekommen.
Der Text ist fett und zentriert ausgerichtet. Eine Kopfzelle wird mit dem <th> -Tag (th = table header) eingeleitet und mit </th> wieder
geschlossen. Eine normale Datenzelle wird mit dem <td> -Tag (td = table data) eingeleitet.
Um eine Überschrift über die Tabelle zu schreiben erweitert man den Quellcode um folgende Zeilen:
Code:
Dies sieht so aus:
Das Attribut colspan=2 gibt an, dass die Zelle nun über 2 Spalten geht.
align (engl. Ausrichtung) gibt an, wie der Text ausgerichtet werden soll.
In unserem Fall wird die Tabellenüberschrift zentriert dargestellt.
Eine weitere Möglichkeit ist diesen Code zu verwenden, um einen Text über den Kopf- und Datenzellen zu schreiben:
Code:
Man kann auch top mit bottom(Tabellenunterschrift), left(seitliche Tabellenüberschrift links) und
right(seitliche Tabellenüberschrift rechts) auswechseln.
Ich hoffe, dass euch dieses Tutorial das Grundbasiswissen über Tabellen klar und verständlich vermittelt hat.
Freundliche Grüße!
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!
nein, man kann sie auch für eine solide Aufteilung der Seite verwenden, wie zum Beispiel einen Bereich für den Banner,
einen anderen für die Navigation und einen weiteren Bereich für den eigentlichen Inhalt.
Der Quellcode einer Tabelle, die 3x2 Zellen enthält, sieht so aus:
Code:
<html>
<head><title>Die Tabelle</title></head>
<body text=�#000000� bgcolor=�#FFFFFF�>
<table border=1 >
<tr>
<th>Kopfzelle 1</th>
<th>Kopfzelle 2</th>
</tr>
<tr>
<td>Zelle1</td>
<td>Zelle2</td>
</tr>
<tr>
<td>Zelle3</td>
<td>Zelle4</td>
</tr>
</table>
</body>
</html>
<head><title>Die Tabelle</title></head>
<body text=�#000000� bgcolor=�#FFFFFF�>
<table border=1 >
<tr>
<th>Kopfzelle 1</th>
<th>Kopfzelle 2</th>
</tr>
<tr>
<td>Zelle1</td>
<td>Zelle2</td>
</tr>
<tr>
<td>Zelle3</td>
<td>Zelle4</td>
</tr>
</table>
</body>
</html>
Um eine Tabelle im HTML Editor Phase 5.3 per Knopfdruck in den body einzufügen, müsst ihr lediglich in der oberen Leiste "Tabelle"
auswählen, die Anzahl der Zellen angeben und dann einfach auf "Einfügen" drücken.
Wie ihr seht, besteht eine Tabelle aus dem <table> -Tag! Um ein Gitternetz um die Zellen zu erzeugen, kann man den <table> -Tag um
das Attribut border=X erweitern. Für den Wert X gibt man eine Zahl ein, die in Pixeln die Breite der Linien der Tabelle angibt, beispielsweise 1.
Der Wert 0 erzeugt eine blinde Tabelle, also eine Tabelle, die keinen Rand und keine Gitternetzlinien enthält.
Der <tr> -Tag leitet eine neue Tabellenzeile ein. Im Anschluss daran werden die Zellen (Spalten) der betreffenden Reihe definiert.
Am Ende einer Tabellenzeile wird sie mit einem </tr> -Tag wieder geschlossen.
In unserem Beispiel-Quelltext habe ich die Tabelle mit Kopfzellen erweitert, um eine bessere Übersicht der Einteilung zu bekommen.
Der Text ist fett und zentriert ausgerichtet. Eine Kopfzelle wird mit dem <th> -Tag (th = table header) eingeleitet und mit </th> wieder
geschlossen. Eine normale Datenzelle wird mit dem <td> -Tag (td = table data) eingeleitet.
Um eine Überschrift über die Tabelle zu schreiben erweitert man den Quellcode um folgende Zeilen:
Code:
<html>
<head><title>Die Tabelle</title></head>
<body text=�#000000� bgcolor=�#FFFFFF�>
<table border=1 >
<tr>
<td colspan=2 align=center>
<font size=+2>Tabellenüberschrift</font>
</td>
</tr>
<tr>
<th>Kopfzelle 1</th>
<th>Kopfzelle 2</th>
</tr>
...
<head><title>Die Tabelle</title></head>
<body text=�#000000� bgcolor=�#FFFFFF�>
<table border=1 >
<tr>
<td colspan=2 align=center>
<font size=+2>Tabellenüberschrift</font>
</td>
</tr>
<tr>
<th>Kopfzelle 1</th>
<th>Kopfzelle 2</th>
</tr>
...
Dies sieht so aus:
Das Attribut colspan=2 gibt an, dass die Zelle nun über 2 Spalten geht.
align (engl. Ausrichtung) gibt an, wie der Text ausgerichtet werden soll.
In unserem Fall wird die Tabellenüberschrift zentriert dargestellt.
Eine weitere Möglichkeit ist diesen Code zu verwenden, um einen Text über den Kopf- und Datenzellen zu schreiben:
Code:
<caption align=top>Tabellenüberschrift</caption>
Man kann auch top mit bottom(Tabellenunterschrift), left(seitliche Tabellenüberschrift links) und
right(seitliche Tabellenüberschrift rechts) auswechseln.
Ich hoffe, dass euch dieses Tutorial das Grundbasiswissen über Tabellen klar und verständlich vermittelt hat.
Freundliche Grüße!
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!
