HTML-Tabellenattribute geben Ihnen viel mehr Kontrolle über HTML-Tabellen. Tabellen stehen viele Attribute zur Verfügung, um sie interessanter zu machen und das Aussehen Ihrer Seite zu ändern.
HTML TABLE-Elementattribute
Im HTML5 das Element verwendet die globalen Attribute und ein weiteres Attribut und es hat sich geändert, um nur den Wert 1 oder leer (d. h. border="") zu haben. Wenn Sie die Breite des Rahmens ändern möchten, sollten Sie die Rahmenbreite verwenden CSS-Eigenschaft.
Unten finden Sie Informationen zu den gültigen HTML5-Tabellenattributen.
Es gibt auch mehrere Attribute, die Teil der HTML 4.01-Spezifikation sind, die in HTML5 veraltet ist:
- —Verwenden Sie die CSS-Padding-Eigenschaft für die TD- und TH-Elemente der Tabelle.
- —Verwenden Sie die CSS-Eigenschaft border-spacing für die Tabelle.
- —Verwenden Sie CSS-Stile border-color: black; und Bordüre-Stil auf dem Tisch.
- —Verwenden Sie CSS-Stile border-color: black; und Rahmenstil auf die entsprechenden Elemente der Tabelle.
- —Stattdessen sollten Sie die Struktur der Tabelle in einer CAPTION beschreiben oder die gesamte Tabelle in eine FIGUR stellen und in einer FIGCAPTION beschreiben. Alternativ können Sie die Struktur der Tabelle vereinfachen, sodass keine Erklärung erforderlich ist.
- —Verwenden Sie die CSS-Eigenschaft width.
Und ein Attribut, das in HTML 4.01 veraltet war und in HTML5 ebenfalls veraltet ist.
- align – Verwenden Sie stattdessen die CSS-Margin-Eigenschaft.
Es gibt auch einige Attribute, die nicht Teil einer HTML-Spezifikation sind. Verwenden Sie diese Attribute, wenn Sie wissen, dass die von Ihnen unterstützten Browser damit umgehen können und Sie sich nicht um gültiges HTML kümmern.
- —Verwenden Sie stattdessen die CSS-Eigenschaft background-color.
- bordercolor – Verwenden Sie stattdessen die CSS-Eigenschaft border-color.
- bordercolorlight – Verwenden Sie stattdessen die CSS-Eigenschaft border-color.
- bordercolordark – Verwenden Sie stattdessen die CSS-Eigenschaft border-color.
- cols – Es gibt keine Alternative zu diesem Attribut.
- height – Verwenden Sie stattdessen die CSS-Eigenschaft height.
- —Verwenden Sie stattdessen den CSS-Eigenschaftsrand.
- —Verwenden Sie stattdessen das Leerzeichen der CSS-Eigenschaft.
- —Verwenden Sie stattdessen die CSS-Eigenschaft vertical-align.
HTML5 TABLE-Elementattribute
Wie oben erwähnt, gibt es neben den globalen Attributen nur ein Attribut, das für ein HTML5-TABLE-Element gültig ist: border.
Das Attribut border wird verwendet, um einen Rahmen um die gesamte Tabelle und alle darin enthaltenen Zellen zu definieren. Es gab einige Zweifel, ob es in die HTML5-Spezifikation aufgenommen werden würde, aber es blieb, weil es Informationen über die Tabellenstruktur lieferte, die über die reinen Stilimplikationen hinausgingen.
Um das Attribut border hinzuzufügen, setzen Sie den Wert auf 1, wenn ein Rahmen vorhanden ist, und leer (oder lassen Sie das Attribut weg), wenn er nicht vorhanden ist. Die meisten Browser unterstützen auch 0 für keinen Rahmen und jeden anderen ganzzahligen Wert (2, 3, 30, 500 usw.), um die Breite des Rahmens in Pixeln anzugeben, aber dies ist in HTML5 veraltet. Stattdessen sollten Sie CSS-Rahmenstileigenschaften verwenden, um die Rahmenbreite und andere Stile zu definieren.
Um eine Tabelle mit Rahmen zu erstellen, schreiben Sie:
border="1">
Dies ist eine Tabelle mit einem Rand
Dies beschreibt die TABLE-Attribute, die in HTML 4.01 gültig sind, aber in veraltet sind HTML5. Wenn Sie noch HTML 4.01-Dokumente schreiben, können Sie diese Attribute verwenden, aber die meisten von ihnen haben Alternativen, die Ihre Seiten zukunftssicherer machen, wenn Sie zu HTML5 wechseln.
Gültige HTML 4.01-Attribute
Das oben beschriebene Attribut. Der einzige Unterschied zwischen HTML 4.01 und HTML5 besteht darin, dass Sie eine beliebige ganze Zahl (0, 1, 2, 15, 20, 200 usw.) angeben können, um die Breite des Rahmens in Pixeln zu definieren.
Um eine Tabelle mit einem 5px-Rahmen zu erstellen, schreiben Sie:
border="5">
Diese Tabelle hat einen 5px-Rahmen.
Das Attribut definiert den Abstand zwischen Zellenrändern und dem Inhalt der Zelle. Der Standardwert beträgt zwei Pixel. Setzen Sie den Zellenabstand auf 0, wenn Sie keinen Abstand zwischen Inhalt und Rahmen wünschen.
Um den Zellenabstand auf 20 zu setzen, schreiben Sie:
cellpadding="20">
Diese Tabelle hat einen Zellenabstand von 20.
Zellenränder werden durch 20 Pixel getrennt.
Sehen Sie sich ein Beispiel für eine Tabelle mit Zellenauffüllung an.
Das Attribut definiert den Abstand zwischen den Tabellenzellen und dem Zellinhalt. Wie beim Zellenabstand ist der Standardwert auf zwei Pixel festgelegt, sodass Sie ihn auf 0 setzen müssen, wenn Sie keinen Zellenabstand wünschen.
Um Zellenabstände zu einer Tabelle hinzuzufügen, schreiben Sie:
cellpacing="20">
Diese Tabelle hat einen Zellenabstand von 20.
Zellen werden durch 20 Pixel getrennt.
Das Attribut gibt an, welche Teile des Rahmens, der die Außenseite einer Tabelle umgibt, sichtbar sind. Sie können Ihren Tisch an allen vier Seiten einrahmen, an einer beliebigen Seite, oben und unten, links und rechts oder ohne.
Hier ist der HTML-Code für eine Tabelle mit nur dem linken Seitenrand:
frame="lhs">
Dieser Tisch
werde haben
nur der
linke Seite gerahmt.
Und noch ein Beispiel mit dem unteren Rahmen:
frame="unten">
Dieser Tisch hat unten einen Rahmen.
Schauen Sie sich einige Tabellen mit Rahmen an.
Das Attribut ähnelt dem Frame-Attribut, wirkt sich jedoch auf die Ränder um die Zellen der Tabelle aus. Sie können Regeln für alle Zellen, zwischen Spalten, zwischen Gruppen wie TBODY und TFOOT oder keine festlegen.
Um eine Tabelle mit Zeilen nur zwischen den Zeilen zu erstellen, schreiben Sie:
rules="rows">
Dieser 4x4-Tisch hat
die Zeilen nicht Spalten
umrissen mit dem
Rules-Attribut.
Und noch einer mit Strichen zwischen den Spalten:
rules="cols">
Das ist
ein Tisch
bei dem die
Säulen
sind
hervorgehoben
Das Attribut liefert Informationen über die Tabelle für Bildschirmleseprogramme und andere Benutzerprogramme, die möglicherweise Probleme beim Lesen von Tabellen haben. Um das Summary-Attribut zu verwenden, schreiben Sie eine kurze Beschreibung der Tabelle und geben diese als Wert des Attributs an. Die Zusammenfassung wird in den meisten Standard-Webbrowsern nicht auf der Webseite angezeigt.
So schreiben Sie eine einfache Tabelle mit einer Zusammenfassung:
Summary="Dies ist eine Beispieltabelle, die Füllinformationen enthält. Der Zweck dieser Tabelle besteht darin, eine Zusammenfassung zu demonstrieren.">
Spalte 1 Zeile 1.
Spalte 2 Zeile 1.
Spalte 1 Zeile 2.
Spalte 2 Zeile 2.
Das Attribut definiert die Breite der Tabelle entweder in Pixeln oder als Prozentsatz des Containerelements. Wenn die Breite nicht festgelegt ist, nimmt die Tabelle nur so viel Platz ein, wie sie zum Anzeigen des Inhalts benötigt, wobei die maximale Breite der Breite des übergeordneten Elements entspricht.
Um eine Tabelle mit einer bestimmten Breite in Pixeln zu erstellen, schreiben Sie:
width="300">
Dieser Tisch hat 80 % der Breite des Containers, in dem er sich befindet.
Und um eine Tabelle mit einer Breite zu erstellen, die einem Prozentsatz des übergeordneten Elements entspricht, schreiben Sie:
width="80%">
Dieser Tisch hat 80 % der Breite des Containers, in dem er sich befindet.
Veraltetes HTML 4.01 TABLE-Attribut
Es gibt ein Attribut des TABLE-Elements, das in HTML 4.01 veraltet und in HTML5 veraltet ist: align. Mit diesem Attribut können Sie festlegen, wo sich die Tabelle auf der Seite relativ zum Text daneben befinden soll. Dieses Attribut ist in HTML 4.01 veraltet und Sie sollten es vermeiden. Stattdessen sollten Sie die CSS-Eigenschaft oder die margin-left verwenden: auto; und Rand rechts: auto; Stile. Die float-Eigenschaft liefert Ihnen ein Ergebnis, das dem des align-Attributs näher kommt, aber es kann sich auf die Anzeige des restlichen Seiteninhalts auswirken. Der rechte Rand: auto; und Rand-links: auto; sind, was das W3C als Alternative empfiehlt.
Hier ist ein veraltetes Beispiel mit dem align-Attribut:
align="right">
Diese Tabelle ist rechtsbündig.
Text fließt nach links um ihn herum.
Und um den gleichen Effekt mit gültigem (nicht veraltetem) HTML zu erzielen, schreiben Sie:
style="float: right;">
Diese Tabelle ist rechtsbündig.
Text fließt nach links um ihn herum.
Veraltete TABLE-Attribute
Die vorherigen Informationen beschreiben Attribute des HTML-Elements, die in HTML 4.01 gültig sind, aber in HTML5 veraltet sind.
Im Folgenden werden TABLE-Attribute beschrieben, die in keiner aktuellen Spezifikation gültig sind. Wenn es Ihnen egal ist, ob Ihre Seiten validiert werden und Ihre Benutzer einen Browser verwenden, der diese Elemente unterstützt, können Sie diese Elemente verwenden. Aber die meisten von ihnen werden in modernen Browsern entweder nicht unterstützt oder haben Alternativen, die standardkonformer sind.
Wir empfehlen nicht, diese Attribute zu verwenden auf Ihren HTML-Tabellen.
Das Attribut ist ein altes Attribut, das enthalten war, bevor CSS allgemein unterstützt wurde. Sie können die Hintergrundfarbe der Tabelle ändern. Sie können einen Farbnamen oder einen Hexadezimalcode festlegen. Dieses Attribut funktioniert immer noch in vielen Browsern, aber für zukunftssicheres HTML sollten Sie es nicht verwenden und stattdessen CSS verwenden.
Die bessere Alternative zu diesem Attribut ist die style-Eigenschaft.
Um die Hintergrundfarbe einer Tabelle zu ändern, schreiben Sie:
style="Hintergrundfarbe: #ccc;">
Diese Tabelle hat einen grauen Hintergrund.
Ähnlich wie beim Attribut bgcolor können Sie mit dem Attribut bordercolor die Farbe des Attributs ändern. Dieses Attribut wird nur von Internet Explorer unterstützt. Stattdessen sollten Sie die Eigenschaft border-color style verwenden.
Um die Farbe des Rands Ihrer Tabelle zu ändern, schreiben Sie:
style="border-color: red;">
Diese Tabelle hat einen roten Rand.
Die Attribute bordercolorlight und bordercolordark wurden in Internet Explorer aufgenommen, damit Sie einen 3D-Rahmen um Ihre Tabelle erstellen können. Dies wird jedoch ab IE8 und höher nur im IE7-Standardmodus und. unterstützt Macken-Modus. Microsoft gibt an, dass diese Eigenschaften nicht mehr unterstützt werden.
Für kurze Zeit wurde das Attribut cols für das TABLE-Element vorgeschlagen, um Browsern zu helfen, die Anzahl der Spalten einer Tabelle zu ermitteln. Die Prämisse war, dass dies das Rendern großer Tabellen beschleunigen würde. Dies wurde jedoch nur vom Internet Explorer implementiert und wird ab IE8 und höher nur im IE7-Standardmodus und im Quirks-Modus unterstützt.
Da es ein width-Attribut gibt (in HTML5 veraltet), gingen viele Leute davon aus, dass es auch ein height-Attribut für Tabellen gibt. Da Tabellen jedoch der Breite ihres Inhalts oder der im CSS- oder width-Attribut definierten Breite entsprechen, konnte die Höhe nicht eingeschränkt werden. Stattdessen erlaubten Browser dem Höhenattribut, die minimale Höhe der Tabelle zu definieren. Wenn die Tabelle höher als diese Höhe wäre, würde sie höher angezeigt. Aber Sie sollten die Eigenschaft nutzen.
Mit der CSS-Eigenschaft height können Sie die Höhe einschränken, wenn Sie auch die CSS-Eigenschaft verwenden, um zu definieren, was mit überschüssigem Inhalt passiert.
Um die Mindesthöhe auf einem Tisch festzulegen, schreiben Sie:
style="Höhe: 30em;">
Dieser Tisch ist mindestens 30 ems hoch.
Die beiden Attribute und der hinzugefügte Platz um die linke/rechte Seite (hspace) und oben/unten (vspace) der Tabelle. Sie sollten stattdessen die style-Eigenschaft verwenden.
Um den vertikalen Abstand auf 20 Pixel und den horizontalen Abstand auf 40 Pixel einzustellen, schreiben Sie:
style="margin: 20px 40px;"
Diese Tabelle hat einen vspace von 20 Pixeln und einen hspace von 40 Pixeln.
Das Attribut ist ein boolesches Attribut, das definiert, ob der Inhalt der Tabelle am Rand des übergeordneten Elements oder Fensters umbrochen oder horizontales Scrollen erzwungen werden soll. Stattdessen sollten Sie die Umbrucheigenschaften jeder Tabellenzelle mithilfe der CSS-Eigenschaft definieren.
Um eine Spalte mit viel Text nicht umbrechen zu lassen, schreiben Sie:
style="white-space: nowrap;">Dies ist eine Spalte mit einer Menge Inhalt. Aber selbst wenn er breiter als der Container ist, sollte der Text nicht in die nächste Zeile umbrechen, sondern das Browserfenster zwingen, horizontal zu scrollen, um den gesamten Inhalt anzuzeigen.
Schließlich definiert das Attribut, wie der Inhalt jeder Zelle vertikal innerhalb der Zelle ausgerichtet werden soll. Anstelle dieses ungültigen Attributs sollten Sie die CSS-Eigenschaft für jede Zelle verwenden, deren Ausrichtung Sie ändern möchten. Sie werden die Auswirkungen dieses Stils nicht bemerken, es sei denn, der Inhalt der Zelle ist geringer als der verfügbare Platz, der von anderen, größeren Zellen geschaffen wird.
Um zu erzwingen, dass eine Zelle nach unten ausgerichtet wird (und nicht standardmäßig in der Mitte), schreiben Sie:
Diese Zelle ist länger als der Rest und erzwingt daher eine höhere Höhe. Sie sehen also, dass die vertikal ausgerichtete Zelle nach unten ausgerichtet ist.
style="vertical-align: bottom;">Inhalt unten.
Inhalt in der Mitte.