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 Endtag mit dem der Beginn und das Ende beim auslesen der Datei beschrieben werden.

<table> Starttag
</table> Endtag

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> 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.

Eine Tabelle kann Kopfzellen und gewöhnliche Datenzellen enthalten.
Text in Kopfzellen wird hervorgehoben (meist fett und zentriert ausgerichtet). 
<th> leitet eine Kopfzelle ein, <td> eine normale Datenzelle (th = table header = Tabellenkopf, td = table data = Tabellendaten). Der Inhalt einer Zelle wird jeweils hinter dem Tag notiert. 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 Schlusstags generell vorgeschrieben). 

 

Dieser Aufbau sähe also wie folgt aus:

Eine Tabelle mit einem normalen Rahmen, in der ersten Zeile stünden Print & Digital und darunter CMYK und RGB:

Print      Digital
CMYK   RGB

<table border="1">

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

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

 

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

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"