HTML-Tabellen

Man kann in HTML Tabellen definieren, um tabellarische Daten darzustellen, oder um Text und Grafik schön anzuordnen. Allerdings sollte man auf die Layoutgestaltung mit Tabellen verzichten (siehe barrierefreies Webdesign).

Beispiel:

<table>

<tr>

<td>Print</td>
<td>Digital</td>

</tr>

</table>


Erläuterung

Wie in HTML üblich gibt es bei dem Tabellenaufbau einen Start- und einen End-Tag mit dem der Beginn und das Ende beim auslesen der Datei beschrieben werden.

<table> Start-Tag
</table> End-Tag

Diese Tabelle hat normalerweise einen Rahmen (border), will man diesen unsichtbar machen muss man border="0" angeben. Möchte man einen dickeren Rahmen kann man natürlich auch Werte eingeben (1= normaler Rahmen, 2, 3, ...) Ohne Rahmen sähe es eingebunden dann folgendermaßen aus:

<table border="0">

 

tr-Tag

<tr> leitet eine neue Tabellenzeile ein (tr = table row = Tabellenzeile). Im Anschluss daran werden die Zellen (Spalten) der betreffenden Reihe definiert <td>Print</td> (td = table data = Tabellendaten). Am Ende einer Tabellenzeile wird ein abschließendes Tag notiert </tr> .


td-Tag oder/und th-Tag

Eine Tabelle kann Kopfzellen und gewöhnliche Datenzellen enthalten.
Text in Kopfzellen wird hervorgehoben (meist fett und zentriert ausgerichtet). 

<th> leitet eine Kopfzelle ein (th = table header = Tabellenkopf)

<td> leitet eine normale Datenzelle  (td = table data = Tabellendaten)

Der Inhalt einer Zelle wird jeweils hinter dem Tag notiert (in diesem Beispiel "Print" und "Digital")

Obwohl die zugehörigen End-Tags </th> bzw. </td> offiziell optional sind, ist dringend zu empfehlen, sie immer und in jedem Fall zu notieren (in XHTML beispielsweise sind Schluss-Tags generell vorgeschrieben). 

 

Aufbaubeispiel (s.o. nur diesmal mit zwei Zeilen)

Das unten stehende Beispiel siehtT wie folgt aus:
Eine Tabelle mit einem normalen Rahmen, in der ersten Zeile stünden Print & Digital in fett (als Überschrift/Header <th>) und darunter in normaler Schrift (<td>) CMYK und RGB:

Print      Digital
CMYK    RGB

<table border="1">

<tr>
<th>Print</th>
<th>Digital</th> 
</tr>

<tr>
<td>CMYK</td>
<td>RGB</td>
</tr>

</table>

Desweiteren lassen sich natürlich auch Größe der Tabelle sowie Textanordnung in der Tabelle definieren siehe  Quelle: http://de.selfhtml.org/html/tabellen/aufbau.htm

 

Colspan & Rowspan

Durch Colspan (Anzahl der Spalten) lässt sich erreichen, dass sich eine Zelle  über mehrere Spalten hinweg erstreckt (colspan = column span = Spalten spannen).

In unserem Beispiel sähe das so aus, wenn die Überschrift "Farbräume" über beiden Spalten ("CMYK" und "RGB") stehen soll.

         Farbräume
      
CMYK    RGB

<table border="1">

<tr>
<th colspan="2">Farbräume</th>
</tr>

<tr>
<td>CMYK</td>
<td>RGB</td>
</tr>

</table>

Durch colspan="2" geben wir an über wieviele Spalten sich die Zeile "Farbräume" erstrecken soll. Da wir 2 Spalten haben, also die 2.

 

Durch Rowspan (Anzahl der Zeilen) lässt sich erreichen, dass eine Zelle in einer Spalte sich über mehrere Zeilen erstreckt (rowspan = Zeilen spannen).

Zurück zu unserem Beispiel:

                      CMYK
Farbräume     
                      RGB

<table border="1">

<tr>
<th rowspan="2">Farbräume</th>
<td>CMYK</td>
</tr>

<tr>
<td>RGB</td>
</tr>

</table>

Wie man sieht, wird immer der Zelle, die sich über andere Spalten oder Zeilen erstrecken soll, das jeweilige Attribut zugeschrieben.

Quelle: http://de.selfhtml.org/html/tabellen/zellen_verbinden.htm

Bewertung: 
0
Bisher keine Bewertung

Kommentare

Bild von Thomas Hagenhofer

Hallo,

 

habe den Beitrag mal in die Wikiseite selbst übernommen. Kann jede/r Nutzer/in selbst machen über "Bearbeiten".

Viele Grüße

Thomas

Projektmitarbeiter "Mediencommunity 2.0"