Tag <table>

Tag <table>

Definition

Status: Aktueller Standard

Das Tag <table> steht für table (Tabelle).

Das <table>-Element dient zur Darstellung strukturierter tabellarischer Daten in HTML. Es organisiert Inhalte in Zeilen (<tr>) und Zellen (<td> oder <th>). Die erste Tabellenzeile sollte mit <th> (für die Spaltenüberschriften) gebildet werden. Früher wurde eine Tabelle direkt über (veraltete) Arrtibute gestaltet, heute verwendet man hierfür CSS. Optional (aber für guten Code ratsam) ist die Verwendung einer Tabellenüberschrift (<caption>) und die Unterteilung in Tabellenkopf (<thead>) und Tabellenkörper (<tbody>) und (sofern sinnvoll) mit einem Tabellenfuß (<tfoot>).

Syntax

<table>
 <caption>...</caption>
 <thead>
  <tr>
    <th>Überschrift 1</th>
    <th>Überschrift 2</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Inhalt 1</td>
    <td>Inhalt 2</td>
  </tr>
  </tbody>
</table>

Attribute bzw. Unterelemente

border [Obsolet]

Rahmen um die Tabelle in Pixel (0 = kein Rahmen, Pixel ohne Einheit "px")

width [Obsolet]

Legt die Tabellenbreite fest (px oder Prozent). Bei Pixel ohne Einheit "px"

cellpadding [Obsolet]

Abstand zwischen Zellinhalt und Zellrand (Innenabstand)

cellspacing [Obsolet]

Abstand zwischen einzelnen Zellen

align [Obsolet]

Tabelle links/rechts/zentriert

bgcolor [Obsolet]

Hintergrundfarbe

bordercolor [Obsolet]

Rahmenfarbe

height [Obsolet]

Höhe der Tabelle

rules [Obsolet]

Linien zwischen Zeilen/Spalten

Außenrahmen

Überschrift

Tabellenkopf

Spaltenüberschrift

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel <table> - mit allen Elementen

Der Code:

<table>
  <caption>Beispieltabelle mit colspan und rowspan</caption>
  <thead>
   <tr>
    <th scope="col">Tag</th>
    <th scope="col" colspan="2">Umsatz</th>
    <th scope="col">Status</th>
   </tr>
  </thead>

  <tbody>
   <tr>
    <td rowspan="2">Montag</td>
    <td>Online</td>
    <td>500€</td>
    <td rowspan="2">Aktiv</td>
   </tr>
   <tr>
    <td>Laden</td>
    <td>300€</td>
   </tr>
   <tr>
    <td>Dienstag</td>
    <td colspan="2">800€ Gesamt</td>
    <td>Aktiv</td>
   </tr>
  <tr>
   <td>Mittwoch</td>
   <td>Online</td>
   <td>450€</td>
   <td rowspan="2">Inaktiv</td>
  </tr>
  <tr>
   <td>Donnerstag</td>
   <td colspan="2">700€ Gesamt</td>
  </tr>
  </tbody>

  <tfoot>
   <tr>
    <td colspan="5">Alle Elemente der Tabelle im Einsatz</td>
  </tr>
</tfoot>

</table>

Ergebnis:

Ergebnis: <table>-Demo 1
mit allen Elementen

CSS-Tipps:

Damit die Tabelle auch zur besseren Lesbarkeit die klassischen schwarzen Rahmen um die Zellen bekommt verwendet man die Property "border":

 td, th {border: 1px sold black}

Allerdings erhält jede Zelle nun einen Rahmen weswegen es zu einer doppelten Rahmendarstellung kommt:

Ergebnis:

Ergebnis: <table>-Demo 1

Damit sich die Zellrahmen nicht doppeln gibt es in CSS die Property "border-collapse":

th, td {border-collapse: collapse};

Dank dieser Definition teilen sich die benachbarten Zellen den Rahmen:

Ergebnis:

Ergebnis: <table>-Demo 2