HTML Tabellen erstellen und designen
Tabellen werden oft gebraucht, aber viel zu oft falsch ausgezeichnet und verwendet, in diesem Tutorial erstellen wir eine Auswertungstabelle zu einem Sportfest. Als erstes sehen sie alle Tags die für eine Tabelle benötigt werden.
Tags
In dieser Tabelle sehen Sie alle benötigten Tags für eine korrekt Ausgezeichnete Tabelle:
| Tag | Beschreibung |
|---|---|
| <table> | Leitet eine Tabelle ein |
| <th> | Bildet den Spaltenkopf und dient damit als Überschrift der jeweiligen Kolumne |
| <tr> | Leitet eine neue Tabellenzeile ein |
| <td> | Leitet ein neues Feld ein, in dem die Daten eingegeben werden können |
HTML Tabelle erstellen
Nun wollen wir aber auch eine Tabelle erstellen. Als Beispiel Inhalt verwenden die Ergebnisse eines Jugendsportfestes in Sportdorf. Teilnehmer waren 5 Kinder namens Karl, Peter, Hans, Max und Moritz. Alle nahmen an den Disziplinen Werfen, Sprinten und Weitsprung teil. Für jede Disziplin konnte man bis zu 100 Punkte bekommen, wer am Ende die Höchste Gesamtpunktzahl hatte war der Gewinner.
Benötigt werden die Spalten Platzierung, Name, Werfen Punktzahl, Sprinten Punktzahl, Weitsprung Punktzahl und Gesamtpunktzahl, dafür legen wir nun die Tabelle an und öffnen die erste Reihe mit <tr>.
<table>
<tr>
</tr>
</table>
In diese erste Reihe werden nun die Spaltennamen mit <th> hinzugefügt. Für jede Spalte wird <th> neu geöffnet und geschlossen.
<table>
<tr>
<th>Platzierung</th>
<th>Name</th>
<th>Werfen Punktzahl</th>
<th>Sprinten Punktzahl</th>
<th>Weitsprung Punktzahl</th>
<th>Gesamtpunktzahl</th>
</tr>
</table>
Nun können die Teilnehmer eingetragen werden, wir sortieren sie nach der Platzierung. Für jede Person fügen wir eine Reihe hinzu. In dieser Zeile öffnen und schließen wir die Felder mit <td>. Es werden insgesamt sechs Felder benötigt (Platzierung, Name, Werfen Punktzahl, Sprinten Punktzahl, Weitsprung Punktzahl und Gesamtpunktzahl). Als erstes fügen wir aufgrund der Übersichtlichkeit nur eine Person hinzu.
<table>
<tr>
<th>Platzierung</th>
<th>Name</th>
<th>Werfen Punktzahl</th>
<th>Sprinten Punktzahl</th>
<th>Weitsprung Punktzahl</th>
<th>Gesamtpunktzahl</th>
</tr>
<tr>
<td>1.</td>
<td>Hans</td>
<td>97</td>
<td>76</td>
<td>93</td>
<td>266</td>
</tr>
</table>
Der Code mag jetzt vielleicht etwas verwirrend wirken ist jedoch nach längerer Betrachtung logisch. Jedes <tr> beginnt eine neue Reihe (table row) und die Elemente zwischen <tr> und </tr> werden nebeneinander angeordnet. Startet man eine zweite table row wird diese unter der ersten angeordnet. Das erste Feld aus Reihe eins ist genau über dem Feld eins aus Reihe zwei, das zweite Feld aus Reihe eins ist genau über Feld zwei aus Reihe zwei und so weiter...
Nun können wir die anderen vier Personen auch noch hinzufügen. Für jede Person eine neues <tr> und für jedes Feld ein neues <td>.
<table>
<tr>
<th>Platzierung</th>
<th>Name</th>
<th>Werfen Punktzahl</th>
<th>Sprinten Punktzahl</th>
<th>Weitsprung Punktzahl</th>
<th>Gesamtpunktzahl</th>
</tr>
<tr>
<td>1.</td>
<td>Hans</td>
<td>97</td>
<td>76</td>
<td>93</td>
<td>266</td>
</tr>
<tr>
<td>2.</td>
<td>Max</td>
<td>100</td>
<td>70</td>
<td>89</td>
<td>259</td>
</tr>
<tr>
<td>3.</td>
<td>Moritz</td>
<td>65</td>
<td>99</td>
<td>80</td>
<td>244</td>
</tr>
<tr>
<td>4.</td>
<td>Karl</td>
<td>40</td>
<td>87</td>
<td>92</td>
<td>219</td>
</tr>
<tr>
<td>5.</td>
<td>Peter</td>
<td>52</td>
<td>73</td>
<td>67</td>
<td>192</td>
</tr>
</table>
Für die meisten Besucher ist die Auszeichnung in Ordnung, da es aber das Ziel sein sollte alle zu Frieden und eine Barrierefrei Website zu betreiben müssen wir noch drei Attribute hinzufügen. Die Attribute helfen Screenreadern (Vorlesebrowser für Sehbehinderte) den Quellcode besser zu verstehen und dem Nutzer weitere Informationen bereit zustellen, die er aufgrund seines Handicaps nicht sieht
Das Attribut id wird nur für <th> verwendet und kann eine beliebige Zeichenfolge seien. headers="" wird verwendet um eine logische Verknüpfung mit dem Kopffeld (&th;th>) zu erstellen. Zwischen den beiden " steht die id der jeweiligen Überschrift der Spalte mit der das Feld verknüpft werden soll. headers wird nur bei <td> verwendet. Neben diesen Attributen fügen wir noch summary innerhalb des <table> Elementes hinzu. Mit summary können Sie den Inhalt in wenigen Worten für Screenreader zusammenfassen.
<table summary="Ergebnisse des Jugendsportfestes in Sportdorf">
<tr>
<th id="platzierung">Platzierung</th>
<th id="name">Name</th>
<th id="werfen">Werfen Punktzahl</th>
<th id="sprinten">Sprinten Punktzahl</th>
<th id="springen">Weitsprung Punktzahl</th>
<th id="punkte">Gesamtpunktzahl</th>
</tr>
<tr>
<td headers="platzierung">1.</td>
<td headers="name">Hans</td>
<td headers="werfen">97</td>
<td headers="sprinten">76</td>
<td headers="springen">93</td>
<td headers="punkte">266</td>
</tr>
<tr>
<td headers="platzierung">2.</td>
<td headers="name">Max</td>
<td headers="werfen">100</td>
<td headers="sprinten">70</td>
<td headers="springen">89</td>
<td headers="punkte">259</td>
</tr>
<tr>
<td headers="platzierung">3.</td>
<td headers="name">Moritz</td>
<td headers="werfen">65</td>
<td headers="sprinten">99</td>
<td headers="springen">80</td>
<td headers="punkte">244</td>
</tr>
<tr>
<td headers="platzierung">4.</td>
<td headers="name">Karl</td>
<td headers="werfen">40</td>
<td headers="sprinten">87</td>
<td headers="springen">92</td>
<td headers="punkte">219</td>
</tr>
<tr>
<td headers="platzierung">5.</td>
<td headers="name">Peter</td>
<td headers="werfen">52</td>
<td headers="sprinten">73</td>
<td headers="springen">67</td>
<td headers="punkte">192</td>
</tr>
</table>
Die Tabelle ist nun fertig ausgezeichnet. Unter diesem Link können Sie sich das Ergebnis anschauen. Die Tabelle ist nicht sehr schön, aber korrekt ausgezeichnet, und Valide. Im zweiten Teil dieses Tutorials können Sie lernen wie man mit CSS eine Tabelle designed. Natürlich ist es möglich das Design mit Design-Attributen wie width oder height zu machen, aber die Verwendung von Attributen entspricht, seit dem es CSS gibt, nicht mehr den Standards, da HTML eine Auszeichnungssprache ist.
Tabellen Designen mit CSS
Nun können wir mit der Wunderwaffe CSS das Design machen. Dafür legen wir eine Datei mit dem Namen styles.css an, fügen den Kopfbereich in der HTML Datei hinzu und machen einen Verweis zur CSS Datei, dazu bekommt Reihe zwei und drei der Tabelle die Klasse grey.
So sieht die HTML Datei zur Zeit aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML Tabelle mit Wettkampfergebnissen</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<meta name="robots content="index,follow" />
<meta name="description" content="Ergebnisse des Jugenwettkampfes in Sportdorf" />
</head>
<body>
<table summary="Ergebnisse des Jugendsportfestes in Sportdorf">
<tr>
<th id="platzierung">Platzierung</th>
<th id="name">Name</th>
<th id="werfen">Werfen Punktzahl</th>
<th id="sprinten">Sprinten Punktzahl</th>
<th id="springen">Weitsprung Punktzahl</th>
<th id="punkte">Gesamtpunktzahl</th>
</tr>
<tr>
<td headers="platzierung">1.</td>
<td headers="name">Hans</td>
<td headers="werfen">97</td>
<td headers="sprinten">76</td>
<td headers="springen">93</td>
<td headers="punkte">266</td>
</tr>
<tr class="grey">
<td headers="platzierung">2.</td>
<td headers="name">Max</td>
<td headers="werfen">100</td>
<td headers="sprinten">70</td>
<td headers="springen">89</td>
<td headers="punkte">259</td>
</tr>
<tr>
<td headers="platzierung">3.</td>
<td headers="name">Moritz</td>
<td headers="werfen">65</td>
<td headers="sprinten">99</td>
<td headers="springen">80</td>
<td headers="punkte">244</td>
</tr>
<tr class="grey">
<td headers="platzierung">4.</td>
<td headers="name">Karl</td>
<td headers="werfen">40</td>
<td headers="sprinten">87</td>
<td headers="springen">92</td>
<td headers="punkte">219</td>
</tr>
<tr>
<td headers="platzierung">5.</td>
<td headers="name">Peter</td>
<td headers="werfen">52</td>
<td headers="sprinten">73</td>
<td headers="springen">67</td>
<td headers="punkte">192</td>
</tr>
</table>
</body>
</html>
Der Doctype wurde festgelegt. Er legt die HTML Version fest und erlaubt oder verbietet so Tags oder Attribute. Es wurden auch verschiedene META Tags hinzugefügt, sie dienen alle, bis auf einem der die Westeuropäischen Zeichen erlaubt, dem Suchmaschinen Ranking. <title> legt den Titel der Website fest der in der Taskleiste, in den Tabs, oder der Chronik zu sehen ist. Der Titel sollte das Thema der Seite kurz zusammenfassen.
Das Design einer Tabelle kann ganz individuell seien, in diesem Tutorial zeigen wir Ihnen nur eine Möglichkeit wie es aussehen könnte.
Die Tabelle ist zurzeit sehr an den Browserrand gequetscht, um dies zu ändern geben wir der Tabelle in der CSS Datei den Wert margin : 20px. Diese Angabe sorgt für einen 20px Außenabstand auf allen Seiten. In den meisten Browsern ist cellspacing vordefiniert, die Zellen werden so auseinander gedrückt, was später mit einem farbigen Rand nicht schön aussieht. Verhindern können wir dies mit border-collapse : collapse;.
table {
border-collapse : collapse;
margin: 20px;
}
Nun widmen wir uns der Kopfzeile (<th>). Sie soll einen Abstand von 5 Pixeln auf allen Seiten bekommen, dies geschieht mit padding : 5px;. Um das alles zu verschönern bekommt <th> eine grün als Hintergrundfarbe und einen schwarzen, durchgezogenen, 1 Pixel Rand.
th {
border : 1px solid #000;
padding : 5px;
background-color : #5CFF5C;
}
Den Zellen wollen wir jetzt auch noch einen schwarzen, durchgezogenen, 1 Pixel Rahmen geben und ebenfalls einen 5px Innenabstand. Der Text innerhalb der Kästchen wird mit text-align : center; mittig zentriert.
td {
border: 1px solid #000;
padding : 5px;
text-align : center;
}
Den zwei Reihen den wir die Klasse grey gegeben haben bekommen einen dezenten grau Ton. Dies hilft dem Besucher beim betrachten nicht zu verrutschen.
tr.grey {
background-color : #EEEDEA;
}
Als leztes geben wir <th> noch einen hover Effekt, der bewirkt, dass beim herüber fahren der Maus sich die Farbe verändert. Auch dadurch bleibt der Leser leichter an der Richtigen Stelle.
tr:hover {
background-color : #D4D4CE;
}
Das ist der komplette CSS Code:
table {
border-collapse : collapse;
margin: 20px;
}
th {
border : 1px solid;
padding : 5px;
background-color : #5CFF5C;
}
td {
border: 1px solid;
padding : 5px;
text-align : center;
}
tr.grey {
background-color : #EEEDEA;
}
tr:hover {
background-color : #D4D4CE;
}Hier ist das Ergebnis dieses Tutorials
Letzte Aktualisierung: 02.03.10
Kommentare
Admin schrieb:20.4.2010 20:34 Uhr
@fabianb: Tut mir Leid, dass ich erst jetzt antworte. Ich werde am Wochenende das Tutorial aktualisieren.
@XXXXXX XXXXXX: Deine Frage ist sehr weit gespickt. Für eine korrekt Ausgezeichnete Website sind HTML und CSS erforderlich. Für eine proffessionelle Seite wird man um eine Serverseitige Skriptsprache, wie PHP, Perl oder Ruby, nicht rum kommen.
Zum lernen gibt es zahlreiche Tutorials im Internet, etwas Suchen und du wirst fündig. Ansonsten kann ich dir Lernbücher von dem Verlag "Gallieo Design" empfehlen.
Mit freundlichen Grüßen
Sönke
XXXXXX XXXXXX schrieb:17.4.2010 21:20 Uhr
Coole Website!!!!
Wie geht des???
Und so ne Kommentarleiste!
RESPEKT...
Simon schrieb:7.3.2010 21:59 Uhr
Sehr hilfreich, danke!
fabianb schrieb:1.3.2010 19:58 Uhr
Hallo,
Nun bei einer HTML Tabelle gibt es noch:
tfoot
thead
Solltest du evllt. auch noch erwähnen
Admin schrieb:28.2.2010 17:45 Uhr
Hinweise werden gerne Angenommen.
Vielen Dank skizZ. Ich habe das Tutorial gerade geupdatet. summary und headers wurde hinzugefügt.
MfG
skizZ schrieb:23.2.2010 13:39 Uhr
Weise doch noch zur Barrierefreiheit auf das summary="" Attribut hin.
Und evtl die Headers.
fabian.b schrieb:9.2.2010 19:29 Uhr
Du kannst echt gut Tutorials schreiben. Vielen dank hat mir geholfen! werde weiterhin deine Tutorials lesen !