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

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 </tr> 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>

<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

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"

Bild von Martin Sedlmeier

Um vorweg Spaltenbreiten vorzugeben, kann man noch sowas machen.

<table border="1">
  <colgroup width="200" span="3"></colgroup>
  <tr>
    <td>1. Zeile, 1. Spalte</td>
    <td>1. Zeile, 2. Spalte</td>
    <td>1. Zeile, 3. Spalte</td>
  </tr>
  <!-- usw. andere Zeilen der Tabelle -->
</table>

 

oder sowas

 

<table border="1">
<colgroup>
<col width="80">
<col width="100">
<col width="320">
</colgroup>
<tr>
<td>1. Zeile, 1. Spalte</td>
<td>1. Zeile, 2. Spalte</td>
<td>1. Zeile, 3. Spalte</td>
</tr>
<!-- usw. andere Zeilen der Tabelle -->
</table>

Diese Infos kann man auch in die <td>s reinschreiben. Sowas macht höchstens bei Monstertabellen mit 100 Spalten Sinn, welche dann an sich aber keinen Sinn machen.

----------------------------------------------------------------------------------------

Unterm Strich: Blödsinn, aber es gibts halt.

Bild von Martin Sedlmeier

Damit kann man per CSS die Tabellenköpfe und Füße einheitlich formatieren.

<table border="1">
<thead>
  <tr>
    <td>Berlin</td>
    <td>Hamburg</td>
    <td>M&uuml;nchen</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</tbody>
<tfoot>...</tfoot>

</table>

Ich habe das Satzfragment (Man kann in HTML Tabellen definieren, um tabellarische Daten darzustellen,)  "oder um Text und Grafik schön anzuordnen" gelöscht, da Tabellen ausschließlich für tabellarisch darzustellende Daten da sind. Grafiken oder Text "schön anzuordnen" ist eine reine Design- bzw. Layoutsache und damit Aufgabe von CSS. Tabellen sollen und dürfen für sowas nicht missbraucht werden, da hier wieder eine Mischung von Layout und Content stattfindet.

ganz meiner meinung!

Professionelles Webdesign verwendet keine Tables außer für den vorgesehen Zweck:

Eine Tabelle im Inhaltsbereich darzustellen.

 

Ich persönlich rate auch davon ab Width und Height, Text-Align, Border und Background im Table zu definieren. Also diese Styles im HTML zu definieren.

Das ist eigentlich nicht zeitgemäß und sollte über externes CSS definiert werden. Allein der Übersichtlichkeit halber. Lieber Klassen im Table vergeben.

Wichtig ist hier in erster Linie:

Das System mit Col- und Rowspan begreifen und korrekt anwenden können. Damit rechne ich in der Prüfung.