HTML - Element: <table>

Sie können in HTML Tabellen definieren, um tabellarische Daten darzustellen. Verwenden Sie Tabellen jedoch nicht zum Layout der Seite, denn dafür gibt es CSS.

Der <table>-Tag definiert den Beginn einer Tabelle. Um eine neue Tabellenzeile einzufügen verwenden Sie den <tr>-Tag (tr = table row = Tabellenzeile). Innerhalb des <tr>-Tags erstellen Sie mit dem <td>-Tag (td = table data = Tabellendaten) eine Tabellenspalte.
Mit dem <colgroup>-Tag und dem <col>-Tag können Sie Tabellenspalten vordefinieren.

<table border="1">
 <tr>
  <td> Tabellenzeile 1 - Tabellenspalte 1 </td>
  <td> Tabellenzeile 1 - Tabellenspalte 2 </td>
  <td> Tabellenzeile 1 - Tabellenspalte 3 </td>
 </tr>
 <tr>
  <td> Tabellenzeile 2 - Tabellenspalte 1 </td>
  <td> Tabellenzeile 2 - Tabellenspalte 2 </td>
  <td> Tabellenzeile 2 - Tabellenspalte 3 </td>
 </tr>
 <tr>
  <td> Tabellenzeile 3 - Tabellenspalte 1 </td>
  <td> Tabellenzeile 3 - Tabellenspalte 2 </td>
  <td> Tabellenzeile 3 - Tabellenspalte 3 </td>
 </tr>
</table>

Beispiel anzeigen

Tabellenkopf, Tabellenkörper und Tabellenfuß

Der <thead>-Tag definiert einen Tabellenkopf. Text der im <th>-Tag (th = table header = Tabellenkopf) steht wird zentriert und Fett hervorgehoben angezeigt. Der <caption>-Tag definiert eine Tabellenüberschrift.
Tabellenkörper (<tbody>) und Tabellenfuß (<tfoot>) sind Optional und können zur Gliederung der Tabelle hinzugefügt werden.

<table border="1">
<caption> Tabellenüberschrift </caption>
 <thead>
 <tr>
  <th> Kopf 1 </th>
  <th> Kopf 2 </th>
  <th> Kopf 3 </th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td> Tabellenzeile 1 - Tabellenspalte 1 </td>
  <td> Tabellenzeile 1 - Tabellenspalte 2 </td>
  <td> Tabellenzeile 1 - Tabellenspalte 3 </td>
 </tr>
 <tr>
  <td> Tabellenzeile 2 - Tabellenspalte 1 </td>
  <td> Tabellenzeile 2 - Tabellenspalte 2 </td>
  <td> Tabellenzeile 2 - Tabellenspalte 3 </td>
 </tr>
 </tbody>
 <tfoot style="background-color: Yellow;">
 <tr>
  <td> Tabellenzeile 3 - Tabellenspalte 1 </td>
  <td> Tabellenzeile 3 - Tabellenspalte 2 </td>
  <td> Tabellenzeile 3 - Tabellenspalte 3 </td>
 </tr>
 </tfoot>
</table>

Beispiel anzeigen

Attribute

Mit den Attributen colspan="" und rowspan="" können Sie Tabellenspalten über mehrere Spalten und Zeilen setzen. Wenn Sie das Attribut border="1" weg lassen, so wird die Tabelle ohne Rahmen angezeigt.

<table border="1">
 <tr>
  <td> Tabellenzeile 1 - Tabellenspalte 1 </td>
  <td colspan="2"> Tabellenzeile 1 - Tabellenspalte 2 und 3 </td>
 </tr>
 <tr>
  <td> Tabellenzeile 2 - Tabellenspalte 1 </td>
  <td> Tabellenzeile 2 - Tabellenspalte 2 </td>
  <td> Tabellenzeile 2 - Tabellenspalte 3 </td>
 </tr>
 <tr>
  <td rowspan="2"> Tabellenzeile 3 und 4 - Tabellenspalte 1 </td>
  <td> Tabellenzeile 3 - Tabellenspalte 2 </td>
  <td> Tabellenzeile 3 - Tabellenspalte 3 </td>
 </tr>
 <tr>
  <td> Tabellenzeile 4 - Tabellenspalte 2 </td>
  <td> Tabellenzeile 4 - Tabellenspalte 3 </td>
 </tr>
 <tr>
  <td> Tabellenzeile 5 - Tabellenspalte 1 </td>
  <td> Tabellenzeile 5 - Tabellenspalte 2 </td>
  <td> Tabellenzeile 5 - Tabellenspalte 3 </td>
 </tr>
</table>

Beispiel anzeigen

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<td> Tabellenspalte

CSS - Container mit Eselsohren

PHP - Counter für Seitenaufrufe

JavaScript - Datum und Uhrzeit als Zeichenkette anzeigen

MySQL - Den nächsten und vorherigen Datensatz ermitteln

No Content
Oder auch Usability. Viele Webseiten glänzen mit einem großartigen Design aber „Ohne Inhalt“. Ein bischen Text, 5 Bilder, 4 Seiten Text, einige Witze und eine E-Mail-Adresse... das war es?! Wer nicht mehr zu bieten hat, bekommt auch nicht viele Besucher. Und platzieren Sie kein "billiges Zeug" oder inkorrekte Information. Enttäuschte Besucher sind kaum zurückzugewinnen. Auch das Aufführen von Links zu anderen Seiten macht noch keine interessante und damit sehenswerte Homepage aus. Verzichten Sie auch möglichst auf private Informationen aus Ihrem Leben (zum Beispiel Lebensläufe und tiefgründige Familienangelegenheiten). Mit solchen Themen locken Sie heute keinen "Hund hinter dem Sofa" mehr hervor. Eine kurze Info zum Ersteller oder vielleicht auch Webmaster inkl. E-Mail-Adresse reicht in der Regel vollkommen aus.
Im Netz gibt es viele nützliche oder interessante Angebote, um seine Homepage zu ergänzen beziehungsweise um sich von anderen Seiten zu unterscheiden. Dies sind zum Beispiel Content-Anbieter, Gästebücher, Newsletter, Newsticker, Foren und so weiter