Web Page Generator
Tabellen - HTML Tutorial - Kurs für Einsteiger.

HTML Tutorial: Tabellen




Verwendung von Tabellen

Oft werden Tabellen da eingesetzt wo man sie gar nicht vermuten würde. Sie dienen oft als Makierungen und rücken den Text in die rchtige Position.
Wieso sehen wir "nie" diese Tabellen? Das liegt daran das die Tabellen unsichtbar gemacht werden. D.h. die Umrandung wird weggemacht und nur der Inhalt (Schrift, Bilder, etc.) ist sichtbar.


Struktur
Tabellen werden immer mit
<table>
eingeleitet. Als nächster Schritt folgt die Zeilenbennennung die man direkt nach <table> setzt. Diese sieht folgendermaßen aus:
<tr>
Um die Übersicht zu behalten macht man nach <table> ein Absatz und führt dann mit <tr> weiter. So weit wir bisher sind kann keine Tabelle entstehen, da wir ja nur bisher wissen, dass es eine Tabelle sein soll mit 1 Zeile aber 0 Spalten. Das heißt, dass keine Tabelle so exestieren kann. Nun dann fügen wir eine Spalte ein. Dies geht mit dem Befehl:
<td>
Wie schon oben genannt wird der Übersicht halber ein Absatz eingefügt, sodass man den Quellcode immer noch entziffern kann.
Jetzt kommt ein sehr wichtiger Teil. Wie bei allen Tags werden diese auch abgeschlossen! Das heißt wenn man mit der Zeile fertig ist oder mit der Spalte muß abgeschlossen werden. Das wird per
</td>
</tr>
gemacht. Wenn Du mit der Tabelle fertig bist, mußt du diese auch abschließen. Ich mache das jetzt extra eine Zeile darunter, weil es das letzte einer Tabelle ist! Also demenstprechend:
</table>
Der hauptsächliche Text kommt IMMER zwischen den
<td>HIER KOMMT DER TEXT HIN UND NUR HIER!!!</td>
Jetzt machen wir ein kleines Beispiel für eine einfache Tabelle.

<html>
<head>
<title>Meine erste Tabelle</title>
</head>
<body>
<table>
<tr>
<td> Hier ist die erste Spalte in der ersten Zeile!</td>
<td> Hier ist die zweite Spalte in der ersten Zeile!</td>
</tr>
<tr>
<td> Hier ist die erste Spalte in der zweiten Zeile!</td>
<td> Hier ist die zweite Spalte in der zweiten Zeile!</td>
</tr>
</table>
</body>
</html>

Wie wir in dem Beispiel sehen können, können wir in der Zeilenteilung mehrere Spalten einfügen. Es ist auch möglich in den Spalten noch einmal seperat eine frische Tabelle zu machen. Dies eignet sich hervoragend für Navigationen oder andere Sachen. Dazu auch ein Beispiel:

<html>
<head>
<title>Eine Tabelle in einer Tabelle</title>
</head>
<body>
<table>
<tr>
<td>
<table>
<tr>
<td>Das funktioniert</td>
<td>Spitze!</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Hier ist die erste Spalte in der zweiten Zeile!</td>
</tr>
</table>
</body>
</html>

Auch wenn kein Inhalt im <td></td> steht wird dieser Teil trotzdem hingeschrieben. Es wird dazwischen meist ein &nbsp; (Leerzeichen) eingefügt um ein "unsichtbaren" Inhalt einzufügen.


colspan & rowspan
Jetzt kommen wir zu einem sehr wichtigen Punkt bei Tabellen. Es ist für den Anfang sehr schwer zu verstehen, aber wird nach dem zweiten Mal sehr einfach!

Die Rede ist von colspan und rowspan. Sie werden in dem <td>-Tag geschrieben und haben folgende Bedeutung:

colspan = verbindet 2 Zeilen miteinander!
Beispiel:

<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td colspan="2" width="300"><div align="center">Beispiel für colspan!</div></td>
</tr>
<tr>
<td><div align="center">Spalte 1</div></td>
<td><div align="center">Spalte 2</div></td>
</tr>
</table>
</body>
</html>

In colspan wird <td> direkt nach dem definieren des colspan geschrieben. D.h. im zweiten <tr>-Bereich.


rowspan = verbindet 2 Spalten miteinander!
Beispiel:

<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2" width="300"><div align="center">Beispiel für rowspan!</div></td>
<td width="200"><div align="center">Spalte 2</div></td>
</tr>
<tr>
<td width="200"><div align="center">Auch spalte 2</div></td>
</tr>
</table>
</body>
</html>

In rowspan wird <td> im selben <tr>-Bereich geschrieben indem der rowspan-Tag definiert worden ist.


<th>
Dieser Tag ersezt den <td>-Tag und bewirkt, dass der geschrieben Text zentriert und fett geschrieben wird.
Dies wird oft bei Tabellenüberschriften genutzt. (ähnelt dem h1, h2, ...)


Thead, Tfoot, Tbody
Diese Befehle sind sogennante Einteilungen. Wie bei Word bekannt gibt es eine Kopfzeile und eine Fußzeile, sowie der Hauptteil. Diese 3 Befehle spiegeln genau das wieder. Es wird im unteren Beispiel deutlich, dass zuerst thead, dann tfoot und erst zum Schluß tbody geschrieben wird, aber vom Browser wird es wiefolgt ausgegeben: thead, tbody, tfoot.

<html>
<head>
<title>Thead, Tfoot, Tbody</title>
</head>
</body>
<table border="1" rules="groups">
<thead>
<tr>
<th>Beispiel 1</th>
<th>Beispiel 2</th>
<th>Beispiel 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td><i>xxx:<br>77777</i></td>
<td><i>yyy:<br>88888</i></td>
<td><i>zzz:<br>99999</i></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>1.1</td>
<td>1.2</td>
</tr><tr>
<td>2</td>
<td>2.1</td>
<td>2.2</td>
</tr><tr>
<td>3</td>
<td>3.1</td>
<td>3.2</td>
</tr>
</tbody>
</table>
</body>
</html>


caption-side (Ausrichtung der Tabellenüberschrift)
Mit caption kann man einer Tabelle eine Überschrift geben. Man könnte dies mit fieldset vergleichen


Ein Beispiel dazu sähe so aus:

<html><head><title>caption-side</title>
</head><body bgcolor="FFFFFF" text="#000000">
<table border="1">
<caption style="caption-side:bottom">Beispiel</caption>
<tr>
<th>1.1</th><th>1.2</th><th>1.3</th>
</tr><tr>
<td>2.1</td><td>2.2</td><td>2.3</td>
</tr><tr>
<td>3.1</td><td>3.2</td><td>3.3</td>
</tr></table>
</body></html>

Ich denke, an dem Beispiel wäre alles geklärt. Es wird direkt nach dem Einleitung der Tabelle (<border>) per CSS angewandt. Man kann anstadt "bottom" top, middle left und right schreiben und somit die Ausrichtung des Textes bestimmen.


Größenangaben
Du kannst einer Tabelle eine bestimmte Größe geben oder eine die sich nach der größe des Brwosers richtet. Das erstgenannte wird mit
<td width="300" height="400">
gemacht. Dies hat den Vorteil, dass man sein Style direkt designen kann, ohne auf Verändeungen zu achten.
Für eine angleichende Größe der Tabelle am Browser wird
<td width="45%" height="70%">
genutzt. Dies hat jedoch den Nachteil das man auch auf die Veränderungen gefasst sein muß. Deshalb empfehle ich immer Pixelangaben zu machen.

Feste Größe bei Tabellen
Wenn ihr eine Tabelle haben wollt mit einer festen Größe, die trotz eines zu langen Textes die feste Größe beibehält, müßt ihr das hier in den <body>Tag schreiben:
style="table-layout:fixed"
Ein Beispiel wäre dann so:

<html><head><title>table-layout</title>
</head><body bgcolor="FFFFFF" text="#000000">

<table border="1" style="table-layout:fixed">
<colgroup span="3" style=""></colgroup>
<tr>
<td style="width:100px">1234567890123456789012345678901234567890 12345678901234567890 </td>
<td style="width:200px">1234567890123456789012345678901234567890 12345678901234567890 </td>
<td style="width:300px">1234567890123456789012345678901234567890 12345678901234567890 </td>
</tr>
</table>

</body></html>


Ausrichtung

Es gibt zwei verschiedene Attribute für die Ausrichtung von Tabellen und/oder Tabelleninhalte (Zelleninhalte):

1.) vertikale oder senkrechte Ausrichtung

valign="top" Der Text wird nach oben gesetzt
valign="middle" Der Text wird von der Höhe her Zentriert angezeigt (Standart)
valign="bottom" Der Text wird nach unten gesetzt

2.) horizontale oder waagerechte Ausrichtung

align="left" Der Text wird linksbündig angezeigt(Standart)
align="center" Der Text wird zentriert angezeigt
align="right" Der Text wird rechtsbündig angezeigt

Table-Tags

So jetzt zu den Tags die in <table> kommen:

<table bordercolor="#000000">
//Definierung der Farbe der Rennlinie der Tabelle.
<table bordercolordark="#******">
//Dunkle Randfarbe
<table bordercolorlight="#******">
//Helle Randfarbe
<table border="0">
//Definierung der Dicke der Linien. Eine der wichtigsten Befehle!!!( Bei dem Wert 0 sagt man auch blinde Tabelle dazu)
<table cellspacing="2">
//Definierung des Abstandes von den einzelnen Spalten und Tabellen.
<table cellpadding="1">
//Definierung des Innenabstandes von Borderspacing.

Definitionen von Tabellenhintergünden
Jetzt gibt es in Tabellen noch ein paar kleine Definierungscodes für die Hintergründe. Sie können in <td>, <table> oder <tr> eingesetzt werden.

<td bgcolor="#000000"> Definierung der Hintergundfarbe
<td background="./bild.gif"> Definierung eines Hintergrundbildes

Achtung!!! Wenn du <table background="bild.jpg"> machst wird es von NS anders angezeigt wie von dem IE.



Apache HTTP Server Test Page powered by CentOS

Apache 2 Test Page
powered by CentOS

This page is used to test the proper operation of the Apache HTTP server after it has been installed. If you can read this page it means that the Apache HTTP server installed at this site is working properly.


If you are a member of the general public:

The fact that you are seeing this page indicates that the website you just visited is either experiencing problems or is undergoing routine maintenance.

If you would like to let the administrators of this website know that you've seen this page instead of the page you expected, you should send them e-mail. In general, mail sent to the name "webmaster" and directed to the website's domain should reach the appropriate person.

For example, if you experienced problems while visiting www.example.com, you should send e-mail to "webmaster@example.com".

If you are the website administrator:

You may now add content to the directory /var/www/html/. Note that until you do so, people visiting your website will see this page and not your content. To prevent this page from ever being used, follow the instructions in the file /etc/httpd/conf.d/welcome.conf.

You are free to use the images below on Apache and CentOS Linux powered HTTP servers. Thanks for using Apache and CentOS!

[ Powered by Apache ] [ Powered by CentOS Linux ]

About CentOS:

The Community ENTerprise Operating System (CentOS) Linux is a community-supported enterprise distribution derived from sources freely provided to the public by Red Hat. As such, CentOS Linux aims to be functionally compatible with Red Hat Enterprise Linux. The CentOS Project is the organization that builds CentOS. We mainly change packages to remove upstream vendor branding and artwork.

For information on CentOS please visit the CentOS website.

Note:

CentOS is an Operating System and it is used to power this website; however, the webserver is owned by the domain owner and not the CentOS Project. If you have issues with the content of this site, contact the owner of the domain, not the CentOS Project.

Unless this server is on the centos.org domain, the CentOS Project doesn't have anything to do with the content on this webserver or any e-mails that directed you to this site.

For example, if this website is www.example.com, you would find the owner of the example.com domain at the following WHOIS server:

http://www.internic.net/whois.html