Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 07): Tabellen (01)

HTML & CSS für Einsteiger (Teil 07): Tabellen (01)

Tabellen spielen auf Webseiten nach wie vor eine wichtige Rolle. Das gilt allerdings nur noch hinsichtlich der Präsentation von Daten. Als es noch kein CSS gab bzw. dieses von den Browsern noch nicht wirklich unterstützt wurde, dienten Tabellen übrigens auch noch einem ganz anderen Zweck: Man setzte darüber Layouts um. Innerhalb der Tabellenzellen platzierte man dazu die einzelnen Seitenelemente. Die daraus resultierenden Layouttabellen-Monster gehören dank CSS aber glücklicherweise der Vergangenheit an. Heute werden Tabellen im Webdesign ausschließlich dafür verwendet, wofür sie eigentlich gedacht sind: zum übersichtlichen Darstellen von Daten.
 

... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Tabellen sind recht komplexe Gebilde, die sich aus Reihen und Spalten zusammensetzen. Das äußere Grundgerüst von Tabellen bildet immer das table-Element.
<table>
…
</table>

Innerhalb dieses Elements erfolgt die eigentliche Tabellendefinition. Es empfiehlt sich übrigens, während der Umsetzung einer Tabelle in HTML dieser einen Rahmen zuzuweisen. So kann man besser nachvollziehen, wie Reihen und Spalten genau verlaufen. Dazu weist man dem einleitenden <table> die Attribut-Wert-Kombination border="1" zu. (Beachtet, dass das border-Attribut in HTML nicht verwendet werden sollte. Hier greift man stattdessen auf die entsprechenden CSS-Eigenschaften zu. Dazu aber später mehr).
<table border="1">
…
</table>

Weiter geht es mit der Definition der Tabellenzeilen. Das geschieht über das Element tr.
<table border="1">
   <tr></tr>
</table>

Auch das führt aber noch nicht zur gewünschten Ausgabe. Als Nächstes muss man nämlich die Spalten definieren. Das geschieht wiederum über das td-Element.
<table border="1">
   <tr>
      <td></td>
   </tr>
</table>
 
 
Nun könnt ihr den ersten Tabelleninhalt definieren. Das definiert man zwischen <td> und </td>.
<table border="1">
   <tr>
      <td>Inhalt 1</td>
   </tr>
</table>

Erst jetzt lohnt ein Blick auf das Ergebnis im Browser.

Bilder


 
 
Sonderlich spektakulär ist das sicherlich noch nicht, schließlich besteht die Tabelle momentan ja nur aus einer Tabellenzelle. Ihr könnt nun noch eine weitere Spalte einfügen. Das geschieht wieder über ein td-Element. Achtet darauf, dieses innerhalb des tr-Elements zu definieren.
<table border="1">
   <tr>
      <td>Inhalt 1</td>
      <td>Inhalt 2</td>
   </tr>
</table>

Auch hier wieder ein Blick auf das Ergebnis.

Bilder


 
 
Um zusätzliche Zeilen in die Tabelle aufzunehmen, legt man einfach ein weiteres tr-Element an, in dem dann wiederum die gewünschten td-Elemente definiert werden.

Auch hierzu wieder ein Beispiel:
<table border="1">
   <tr>
      <td>Inhalt 1</td>
      <td>Inhalt 2</td>
   </tr>
   <tr>
      <td>Inhalt 3</td>
      <td>Inhalt 4</td>
   </tr>
</table>

Ein Blick auf das Ergebnis im Browser liefert folgendes Ergebnis:

Bilder



Auf diese Weise könnt ihr also auch umfangreiche Tabellen erstellen.

 
 

Kopf, Körper und Fuß festlegen

Tabellen lassen sich in logische Bereiche einteilen. Dabei handelt es sich um einen Kopf-, einen oder mehrere Datenbereiche und einen Fußbereich. Das folgende Beispiel zeigt, wie so etwas aussehen kann:
<table border="1">
  <thead>
    <tr>
      <th>Abfahrt</th>
      <th>Ankunft</th>
      <th>Bahnsteig</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Berlin</td>
      <td>Stralsund</td>
      <td>5</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>1</td>
    </tr>
    <tr>
      <td>München</td>
      <td>Berlin</td>
      <td>3</td>
    </tr>
  </tbody>
</table>
 
 
Und hier ein Blick auf das Ergebnis im Browser:

Bilder



Einen optischen Effekt hat die Aufteilung in die genannten Bereiche offensichtlich nicht. Stellt sich natürlich eine Frage: Warum soll man sich dann die Mühe machen und diese Bereiche definieren? Dafür gibt es zwei gute Gründe:

• Mittels CSS lassen sich die Bereiche auf Wunsch unterschiedlich formatieren.
• Die Browser können beim Ausdrucken langer Tabellen den Tabellenkopf und den Tabellenfuß auf jeder Seite wiederholen.

Der Tabellenkopf wird mit thead eingeleitet. Daran schließen sich die Zeilen der Tabelle an, die zum Kopfbereich gehören. Vergesst nicht, den Kopfbereich </thead> wieder zu schließen.

Soll die Tabelle einen Tabellenfuß bekommen, muss dieser unbedingt vor dem Tabellenkörper definiert werden. Eingeleitet wird der Fuß über <tfoot>. Daran können sich wieder eine oder mehrere Zeilen anschließen, die zum Fußbereich gehören. Mit </tfoot> schließt man den Tabellenfuß.

Den eigentlichen Tabellenkörper definiert man innerhalb des tbody-Elements. Dieses tbody kann mehrfach vorkommen. Geschlossen wird ein Tabellenkörper jeweils über </tbody>.
Warum sollte man beispielsweise in einer Tabelle mehrere tbody-Elemente verwenden? Ein schönes Beispiel dafür könnte die Tabelle der Fußball-Bundesliga sein. In einer solchen Tabelle gibt es üblicherweise mehrere Bereiche.

• Meister
• Champions-League-Teilnehmer
• Champions-League-Qualifikant
• Europa-League-Teilnehmer
• Das graue Mittelfeld
• Relegationsplatz
• Absteiger

Jeden dieser Bereiche könnte man in ein eigenes tbody-Element packen und diese dann mittels CSS anders gestalten.

 

Spalten vordefinieren

Wie die Tabelle von den Browsern angezeigt wird, hängt natürlich in erster Linie von der vorhandenen Anzahl an Zeilen und Spalten ab. Der Prozess, eine Tabelle anzuzeigen, ist für den Browser allerdings nicht ganz einfach. Tatsächlich muss ein Browser nämlich immer erst die gesamte Tabelle einlesen, bevor er die Tabelle anzeigen kann. Gerade bei sehr umfangreichen Tabellen kann das natürlich eine gewisse Zeit in Anspruch nehmen. Dieses Problem lässt sich umgehen, indem man dem Browser direkt mitteilt, aus wie vielen Spalten die Tabelle tatsächlich besteht.
<table>
   <colgroup span="2"></colgroup>
   <tr>
     <th>ISBN</th>
     <th>Titel</th>
     <th>Preis</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Eine kurze Geschichte von fast allem</td>
     <td>29,95 Euro</td>
   </tr>
 </table>

Über colgroup wird die Vorab-Definition der Spaltenangaben eingeleitet. Beachtet, dass die meisten der in früheren HTML-Versionen verfügbaren Attribute für colgroup in HTML5 nicht mehr zulässig sind. Gestattet ist von denen jetzt lediglich das span-Attribut. Als Wert erwartet dieses span die Anzahl der in der Tabelle enthaltenen Spalten.

Das colgroup-Element steht direkt hinter dem einleitenden <table>. Die Spalten selbst werden dann durch die einzelnen col-Elemente definiert.

Beim Einsatz von colgroup hat man prinzipiell zwei Möglichkeiten:

• Mit span-Attribut
• Ohne span-Attribut

Verwendet man kein span-Attribut, muss innerhalb des colgroup-Elements für jede Spalte, über die sich die Spaltengruppe erstrecken soll, jeweils ein col-Element definiert werden. Beachtet dabei, dass es sich bei col um ein Standalone-Element handelt.
<table>
   <colgroup>
   <col />
   <col />
 </colgroup>
   <tr>
     <th>ISBN</th>
     <th>Titel</th>
     <th>Preis</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Eine kurze Geschichte von fast allem</td>
     <td>29,95 Euro</td>
   </tr>
 </table>

Es gibt übrigens auch noch eine Mischform.
<table> 
 <colgroup> 
 <col> 
 </colgroup> 
 <colgroup span="2"></colgroup>
 …

Das ist immer dann praktisch, wenn eine Spalte separat vordefiniert werden soll, man die anderen aber in einer Gruppe zusammenfassen möchte.

Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2016 - 16:04

Vielen Dank für das Video.

Portrait von BeBa
  • 20.04.2015 - 22:24

Ein komplexes Thema leicht verständlich erklärt - SUPER!

Portrait von Kiasa
  • 09.02.2015 - 12:17

Super erklärt, vielen herzlichen Dank!

Portrait von AnneRick
  • 15.11.2014 - 17:32

Vielen Dank für das Tutorial.

Anne

Portrait von Steve007
  • 09.11.2014 - 17:01

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von Kundentest
  • 29.10.2014 - 20:42

Herzlichen Dank für das Tutorial.

Portrait von BOPsWelt
  • 29.10.2014 - 19:12

Danke für einen weiteren Teil. :-)

Portrait von JdD_JS
  • 29.10.2014 - 14:09

Ich finde die Einwand-Vorwegnahme gut, dass Tabellen zu unrecht verpönt sind. Als ich noch blutiger Anfänger war, traute ich mich wegen dieser verbreiteten Meinung nicht, meine Daten tabellarisch darzustellen. Hier wird auf den Unterschied der Verwendung aufmerksam gemacht. Danke dafür.

Portrait von pallasathena
Portrait von Domingo
  • 29.10.2014 - 13:12

Übersichtlich und verständlich dargestellt.

Portrait von Luther_Sloan
  • 29.10.2014 - 12:30

Danke für das Tutorial und deine Mühen. Grundlagen kann man immer wieder gebrauchen - egal ob als Neueinsteiger oder zum Wiederholen nach längerer Abstinenz vom Webdesign.

Portrait von renate_C
  • 29.10.2014 - 12:28

Ich bedanke mich für das gute Tutorial.

Portrait von runman
  • 29.10.2014 - 12:24

Danke für das Tut. Super.

Portrait von Caesarion2004
  • 29.10.2014 - 12:23

Vielen Dank für die Dateien und die guten Erklärungen.

Portrait von pallasathena
Portrait von Caesarion2004
  • 24.10.2014 - 21:37

Vielen Dank für den weiteren sehr informativen Teil samt Datei.

Portrait von Kundentest
  • 24.10.2014 - 20:14

Herzlichen Dank für den weiteren Teil.

x
×
×
teststefan