HTML Tabellen erstellen
Hier können Sie ganz bequem und einfach den HTML Code einer HTML Tabelle erstellen lassen. Füllen Sie dazu unten die angegebenen Felder aus.
HTML-Tabellen erstellen
Man fragt sich, wie kam das Design früher auf die Homepages? In der Regel über Tabellen, die nicht zu sehen sind. Tabellen, die sichtbar sind kann man einfacher verstehen.
HTML Tabellen werden heutzutage noch öfters verwendet, wenn die Inhalte sinnvoll in Tabellen gezeigt werden können, das heißt wenn man auch im alltägliches Leben eine Tabelle dafür verwenden würde. Beispielsweise für Fahrpläne oder Zugauskunft. HTML Tabellen werden bei aktiven HTML-Einsatz nicht mehr für das Design genutzt.
HTML Tabellen erstellen – Tabellenaufbau
Tabellen bestehen aus Reihen und Spalten. Diese werden schrittweise aufgebaut bis hin zu einer kompletten Tabelle.
Für eine Tabelle werden immer auf jeden Fall drei verschiedene HTML-TAGs benötigt. Diese HTML-Befehle heißen:
table und tr sowie td
Basis ist der HTML-TAG table. Damit beginnt jede Tabelle und mit dem entsprechenden END-TAG endet diese. Beide müssen gesetzt werden, da sonst bei fehlendem END-TAG der IE nur die halbfertige Tabelle darstellt, und der Netscape je nachdem welche Version man benutzt gar nichts anzeigt.
Beim Inhalt in Tabelle sind Fehler zu vermeiden.
UM die Übersichtlichkeit zu erhalten und um Probleme zu umgehen, sollte der Code besonders bei Tabellen sauber sein. Zur besseren Übersicht sollte man mit Einrückungen arbeiten.
Die einzelnen Zellen sollte man zu Beginn am besten durchnummerieren wenn man mit einer Tabelle arbeitet und beim HTML-TAG table auch nicht vergessen das Attribut border setzen, wie folgt: table border=“1″
Sie können in HTML Tabellen erklären, um Daten tabellarisch aufzuzeigen, oder um Text und Grafik optisch besser am Bildschirm zu gestalten. Tabellen wurden zur Darstellung tabellarischer Daten geschaffen und sind in der Praxis des Web-Designs nicht mehr wegzudenken, besonders als Grundgestaltungsmittel für Seiten-Layouts. Manche möchten so gut es geht von gestalterischen Aufgaben befreien, jedoch sind die Abgrenzungen zwischen Struktur und Gestaltung nicht immer so einfach. Die perfekte Verteilung von Information auf einer Web-Seite ist durchaus ein Punkt der Strukturierung, und zugleich ein Aspekt der Gestaltung. Nur die Optik betrachtet lässt sich also vom Grundsatz her unterscheiden zwischen Tabellen, die Gitternetzlinien haben und für tabellarische Daten perfekt sind, und Tabellen mit unsichtbaren Gitternetzlinien, die man blinde Tabellen nennt und für mehrspaltige Texte oder für die Verteilung von Inhalten auf einer Web-Seite praktisch verwendet werden.
Vordefinierte Spalten
Aus den definierten Zeilen und Spalten wird automatisch die Darstellung einer Tabelle erstellt. Ein Web-Browser hat es etwas schwer, die Darstellung rechtzeitig zu errechnen. Die gesamte Tabelle muss zuerst einlesen werden, bevor man irgendetwas von der Tabelle davon darstellen kann. Bei großen Tabellen kann das zu optisch nicht schönen leeren Bildschirminhalten während des Seitenaufbaus führen.
HTML 4.0 verfügt über eine Syntax, um dem Browser gleich am Start der Tabelle mitzuteilen, wie viele Spalten die Tabelle hat, und wie breit diese Spalten sind. Der Browser kann somit die Tabelle schneller aufbauen, das heißt er kann schon Teile der Tabelle anzeigen, bevor die gesamte Tabelle eingelesen ist. Ältere Browser übersehen diese Angaben absichtlich und Netscape-Browser können erst ab der Version 6 exakt mit den Beispielen umgehen.
Häufig gestellte Fragen
Wie sieht eine HTML Tabelle aus?
Die Elemente einer HTML Tabelle
Häufig gestellte Fragen
Was ist eine HTML Tabelle?
Die Tabelle ist eines der gestalterischen Elemente, die einem Webdesigner zur Verfügung stehen, um den angezeigten Inhalt besser strukturieren zu können. So können hiermit beispielsweise tabellarische Daten dargestellt werden, aber auch andere Elemente in einem tabellarischen Gitter dargestellt werden. Man unterscheidet dabei zwischen Tabellen mit sichtbaren Gitternetzlinien, die tatsächlich für die ursprünglich vorgesehene Nutzung als Daten-Tabelle eingesetzt werden - und Tabellen ohne sichtbare Linien, die bei der individuellen Strukturierung der gestalterischen Elemente auf der Webseite helfen. Diese sogenannten "blinden Tabellen" können dabei helfen, Elemente unterschiedlichster Größe mit Leichtigkeit nebeneinander bzw. untereinander anzuordnen.
Wie sieht eine HTML Tabelle aus?
Eine HTML Tabelle ist etwas anders aufgebaut, als man es sich möglicherweise von Anwendung wie Excel vorstellen könnte. Innerhalb eines HTML-Tabellen Objektes werden eine bis mehrere Tabellenzeilen definiert, innerhalb derer wiederum eine oder mehrere Spalten hinzugefügt werden. Diese Beschreibung der Spalten muss für jede weitere Reihe wiederholt werden. Die Einträge in einer HTML Spalte, ob Text, Bilder oder andere Elemente, werden dazu zwischen die einzelnen Spaltenelemente eingefügt.
Die gesamte Beschreibung einer Tabelle in HTML findet zwischen den beiden Tags <table> und </table> statt. Jede Tabellenreihe, die der Tabelle hinzugefügt werden soll wird daraufhin mit <tr> und abschließend </tr> definiert.
Die einzelnen Spalten der Tabelle werden jeweils erneut innerhalb des tr-Elements definiert. Je nachdem, ob Spalten einer Kopfzeile hinzugefügt werden, oder normale Spaltenelemente, kommen hierbei unterschiedliche Tags zur Anwendung. Spalten in Kopfzeilen werden mit <th> und </th> angewiesen, gewöhnliche Spalten mit <tr> und </tr>.
Jegliche Elemente, die innerhalb der einzelnen Felder platziert werden sollen, müssen also im table-Element, im richtigen tr-Abschnitt, im richtigen td-Tag eingefügt werden. Beachten Sie dabei, dass die erste Tabellenreihe vorgibt, wie viele Spalten die Tabelle hat. Sollten in einer späteren Reihe weniger td-Elemente zu finden sein, werden die fehlenden Spalten als Freiräume angezeigt. Bessere ist es dabei ein leeres td-Element einzubauen.
Die Elemente einer HTML Tabelle
Wie auch bei anderen HTML-Elementen, kann die Tabelle mit Attributen verändert werden. Die Struktur sieht dann in etwa so aus: <table attribut1 = "wert1" attribut2 = "wert2">.
border:
Wer eine Tabelle mit einem klaren Gitter haben will, sollte das Attribut "border" auf "1" setzen. Für blinde Tabellen - der Standardwert, reicht es dieses Attribut zu ignorieren. Zu Gunsten besserer Lesbarkeit, bietet es sich aber an, border = "0" zu schreiben.
summary:
Dieses Attribut gibt einen kurzen Überblick über die Tabelle und Struktur und ist dafür gedacht, von speziellen Lesegeräten für Blinde aufgegriffen zu werden. Die Vorlese- oder Braille-Geräte werden dabei das HTML-Dokument gezielt nach diesen Attributen durchsuchen und dem Nutzer vorlesen bzw. anzeigen.
align:
Dieses Attribut gibt die Position der Tabelle im Bezug auf das Dokument an. Mögliche Werte sind "left", "center" und "right" - Heutzutage sollte dies aber mit CSS-Anweisungen durchgeführt werden.
width:
Dieses Attribut spezifiziert die gewünschte Breite der gesamten Tabelle. Der Wert kann sowohl absolut in Pixeln angegeben werden (Bsp: "100") oder in Prozent der Dokumentenbreite (Bsp: 50%).
onclick, onmouseup, onmouseover:
Wie alle HTML-Elemente können auch Tabellen auf Tastatur-, oder Mausereignisse reagieren. Der Wert dieser Attribute sollte eine vorher im Dokument beschriebene JavaScript-Funktion sein, die so mit Hilfe dieses Ereignisses aufgerufen wird.
Zwei wichtige Attribute einer HTML Spalte
Auch die einzelnen Tabelleneinträge können unterschiedliche wichtige Attribute erhalten.
rowspan:
Hiermit wird definiert, wie viele horizontale Spalten die damit beschriebene Spalte umfassen soll. Ist ein Wert für rowspan definiert, so ist es nicht weiter nötig die folgenden, dabei überdeckten, Elemente gesondert zu beschreiben.
colspan:
Diese Funktion ist ähnlich der rowspan-Funktion, mit dem Unterschied, dass hiermit mehrere Spalten in mehreren Reihen unterhalb des definierten Elements umfasst werden sollen. Diese Funktion kann zudem mit rowspan kombiniert werden.