HTML-Workshop: Let's go public...

Tabellen

Tabellen werden nicht nur für die klassische Darstellung tabellarischer Daten ein­gesetzt, sondern sind ein leistungsfähiges Mittel zur strukturierten Anordnung von beliebigen Inhalten in einem Seitenbereich.

Grundstruktur einer Tabelle

Eine Tabelle wird durch die Tags <table> ... </table> begonnen bzw. beendet. Damit man den Rahmen sieht, muss im öffnenden Tag eine Rahmendicke > 1 angegeben werden, z.B. <table border="1">, sonst wird der Rahmen nicht angezeigt (was häufig auch gewünscht ist...).

Innerhalb der Tabelle wird jede Zeile durch die Tags <tr> ... </tr> (engl. table row) eingeschlossen. Innerhalb jeder Zeile wiederum wird jede Zelle durch die Tags <td> ... </td> (engl. table data) eingeschlossen.

Ein Tabellentitel kann mit <caption align="bottom"> ... </caption> hinzugefügt werden. Er sollte direkt nach dem table-Tag folgen. Über das align-Attribut ist die Seite der Tabelle wählbar, an der der Titel angezeigt wird.

Möchte man in der ersten Zeile fett gedruckte Spaltenüberschriften (engl. table header) haben, benutzt man hierin einfach <th> ... </th> an Stelle der ent­sprechenden td-Tags.

Damit ergibt sich für eine 2x3-Tabelle folgende Grundstruktur: 
<table border="1">
   <caption> ... </caption> 
   <tr>
      <td> ... </td>
      <td> ... </td>
      <td> ... </td>
   </tr>
   <tr> 
      <td> ... </td>
      <td> ... </td>
      <td> ... </td>    
   </tr> 
</table>
Tabellentitel
1. Zeile,
1. Spalte 		1. Zeile,
2. Spalte 		1. Zeile,
3. Spalte
2. Zeile,
1. Spalte 		2. Zeile,
2. Spalte 		2. Zeile,
3. Spalte

Die Grösse der Tabellenzellen passt sich automatisch der Grösse des Inhalts an. Sollen einzelne Zellen der Tabelle leer bleiben, sollte hierin ein nicht komprimier­bares Leerzeichen (&nbsp;) stehen, damit jeder Browser dies richtig anzeigt.

Erstellt in eurem Projektverzeichnis eine neue HTML-Datei mit dem Namen
"tabellen.htm",
erzeugt hierin eine Tabelle in Grundform und experimentiert mit unter­schiedlichen Zeilen-/Spaltenanzahlen, Inhalten, Rahmenstärken, etc.

Farbe und Abstände

Eine Tabelle wie oben gezeigt sieht recht farblos aus und die Inhalte sind "an den Rand gequetscht". Dies werden wir jetzt ändern und Farbe sowie den Abstand zwischen Zellen (cellspacing) und den Innenabstand zwischen Inhalt und Zell­rahmen (cellpadding) einstellen.

Erweitert eure Datei "tabellen.htm" um die nachfolgend dargestellte Tabelle. Verwendet zur Erstellung die in der Tabelle gegebenen Informationen.
Den Abstand zwischen den Zellen kann man durch ein Attribut des <table>-Tag einstellen, hier:
cellspacing="10" 		Den Abstand zwischen dem Zell­inhalt und dem Zellrand kann man ebenfalls durch ein Attribut des <table>-Tag einstellen, hier:
cellpadding="10"
Die Hintergrundfarbe setzt man für die ganze Tabelle im <table>-Tag / für eine Zelle im <td>-Tag durch z.B.: bgcolor="blue" Die Schriftfarbe setzt man wie ge­wohnt mit der style-Anweisung im jeweiligen Tag, hier im <td>-Tag:
style="color: white;"

 

Größe, Ausrichtung und Zellverbund

In den bisherigen Tabellen passte sich die Grösse der Zellen und damit auch der ganzen Tabelle automatisch dem Umfang bzw. der Grösse des Inhalts an. Manchmal möchte man jedoch die Grösse der Tabelle unabhängig vom Inhalt vorgeben. Dies kann man mit Hilfe der (css) style-Anweisung erreichen, mit der man entsprechende Größenangaben festlegen kann. Dabei können sowohl relative (in Prozent) wie auch absolute Angaben (in Pixeln) gemacht werden.

Wenn eine Tabelle in der Breite nicht die ganze Seite füllt, kann man deren Ausrichtung auf der Seite durch ein weiteres Attribut des table-Tags vorgeben: align="center" richtet die Tabelle z.B. zentriert auf der Seite aus (left, right entsprechend).

Auch das Tabellenraster kann durch das Verbinden von einzelnen Zellen zu größeren Zellen an die jeweiligen Erfordernisse angepasst werden. Hierzu müssen in das gewünschte td-Tag für das zeilenweise Zusammenfassen eine rowspan-Anweisung und für das spaltenweise Zusammenfassen eine colspan-Anweisung eingefügt werden (s.u.).

style=
"width: 30%;"
 
rowspan="3"		 style="height: 100px;" k.A.
style="height: 60px;" colspan="2"
k.A. k.A.

Die Breite der obigen, zentriert auf der Seite dargestellten Tabelle wurde durch   die Anweisung style="width:70%;" im table-Tag auf 70% der verfügbaren Fenster­breite festgelegt.

Die Anweisung style="width:30%;" in einem td-Tag der ersten Spalte der Tabelle legt dagegen fest, dass diese 30% der gesamten Tabellenbreite ausmachen soll.

Alle weiteren Einstellungen sind in der Tabelle genannt.
Finde heraus, welche Dimension diese Tabelle hat und erzeuge selbst eine entsprechende Tabelle in deiner Datei "tabellen.htm".

 

  © K. Milzner, 2013 Tabellen  -  nicht nur für tabellarische Daten, sondern auch zur Strukturierung und Anordnung beliebiger Inhalte einer Seite...