HTML-Tabellenattribute geben Ihnen viel mehr Kontrolle über HTML-Tabellen. Für Tabellen stehen viele Attribute zur Verfügung, um sie interessanter zu gestalten und das Aussehen Ihrer Seite zu ändern.
HTML TABLE-Elementattribute
In HTML5 verwendet das Element die globalen Attribute und ein weiteres Attribut:. Und es hat sich geändert, um nur den Wert von zu haben 1 oder leer (d. h. border = ""). Wenn Sie die Breite des Rahmens ändern möchten, verwenden Sie die Rahmenbreite CSS-Eigenschaft
Nachfolgend finden Sie Informationen zu den gültigen HTML5-Tabellenattributen.
Es gibt auch einige Attribute, die Teil der HTML 4.01-Spezifikation sind, die in HTML5 veraltet ist:
- - Verwenden Sie das CSS
PolsterungEigenschaft auf dem TischTDundTHElemente. - - Verwenden Sie die CSS-Eigenschaft
Randabstandauf den Tisch. - -Verwenden Sie CSS-Stile
Randfarbe: schwarz;undGrenzstilauf den Tisch. - -Verwenden Sie CSS-Stile
Randfarbe: schwarz;undGrenzstilauf die entsprechenden Elemente der Tabelle. - - Stattdessen sollten Sie die Struktur der Tabelle in a beschreiben
BILDBESCHRIFTUNGoder legen Sie die gesamte Tabelle in eineZAHLund beschreiben es in einemABBILDUNG. Alternativ können Sie den Aufbau der Tabelle vereinfachen, sodass keine Erklärung erforderlich ist. - - Verwenden Sie das CSS
BreiteEigentum.
Und ein Attribut, das in HTML 4.01 nicht mehr empfohlen wurde und in HTML5 ebenfalls veraltet ist.
Erfahren Sie mehr über die HTML 4.01-TABLE-Attribute.
ausrichten- Verwenden Sie das CSSSpannestattdessen Eigentum.
Es gibt auch mehrere Attribute, die nicht Bestandteil einer HTML-Spezifikation sind. Verwenden Sie diese Attribute, wenn Sie wissen, dass die von Ihnen unterstützten Browser mit ihnen umgehen können und Sie keinen Wert auf gültiges HTML legen.
- - Verwenden Sie die CSS-Eigenschaft
Hintergrundfarbestattdessen. Randfarbe- Verwenden Sie die CSS-EigenschaftRandfarbestattdessen.bordercolorlight- Verwenden Sie die CSS-EigenschaftRandfarbestattdessen.bordercolordark- Verwenden Sie die CSS-EigenschaftRandfarbestattdessen.Cols- Zu diesem Attribut gibt es keine Alternative.Höhe- Verwenden Sie die CSS-EigenschaftHöhestattdessen.- - Verwenden Sie die CSS-Eigenschaft
Spannestattdessen. - - Verwenden Sie die CSS-Eigenschaft
Spannestattdessen. - - Verwenden Sie die CSS-Eigenschaft
Leerraumstattdessen. - - Verwenden Sie die CSS-Eigenschaft
vertikal ausrichtenstattdessen.
Erfahren Sie mehr über die browserspezifischen TABLE-Attribute.
HTML5-TABLE-Elementattribute
Wie bereits erwähnt, gibt es neben den globalen Attributen nur ein Attribut, das für HTML5 gültig ist TABELLE Element: Rand.
Das Rand Attribut wird verwendet, um einen Rahmen um die gesamte Tabelle und alle darin enthaltenen Zellen zu definieren. Es gab einige Fragen, ob es in der HTML5-Spezifikation enthalten sein würde, aber es blieb bestehen, da es Informationen über die Tabellenstruktur enthielt, die über die Style-Implikationen hinausgehen.
Hinzufügen Rand Attribut setzen Sie den Wert auf 1 Wenn es einen Rahmen gibt und leer ist (oder das Attribut weglassen), falls nicht vorhanden. Die meisten Browser unterstützen auch 0 für keinen Rahmen und einen anderen ganzzahligen Wert (2, 3, 30, 500 usw.), um die Breite des Rahmens in Pixeln anzugeben, dies ist jedoch in HTML5 veraltet. Verwenden Sie stattdessen CSS-Rahmenstil-Eigenschaften, um die Rahmenbreite und andere Stile zu definieren.
Um eine Tabelle mit einem Rahmen zu erstellen, schreiben Sie:
border = "1" >
Dies ist eine Tabelle mit einer Grenze
Es gibt HTML 4.01-Attribute, die in HTML5 veraltet sind. Wenn Sie HTML 4.01-Dokumente erstellen möchten, können Sie sie lernen, andernfalls können Sie sie ignorieren. Die meisten dieser Attribute haben Alternativen, die oben beschrieben wurden.
Wir beschreiben die Attribute des Elements, die in HTML5 (und HTML 4.01) gültig sind. Dies beschreibt dieTABELLE Attribute, die in HTML 4.01 gültig sind, in HTML5 jedoch veraltet sind. Wenn Sie weiterhin HTML 4.01-Dokumente schreiben, können Sie diese Attribute verwenden. Die meisten davon verfügen jedoch über 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 ganze ganze Zahl (0, 1, 2, 15, 20, 200 usw.) angeben können, um die Breite des Rahmens in Pixel zu definieren.
Um eine Tabelle mit einem 5px-Rahmen zu erstellen, schreiben Sie:
<> border = "5" > Diese Tabelle hat eine 5px-Grenze.
Sehen Sie sich ein Beispiel für zwei Tabellen mit Rahmen an.
Das Attribut definiert den Abstand zwischen den Zellenrändern und dem Inhalt der Zelle. Der Standardwert ist zwei Pixel. Stellen Sie das einZellpolsterung zu0 wenn Sie keinen Abstand zwischen Inhalt und Rändern haben möchten.
Um den Zellenabstand auf 20 zu setzen, schreiben Sie:
<> Zellauffüllung = "20" > Diese Tabelle hat eine Zellpolsterung von 20. Die Zellengrenzen werden um 20 Pixel voneinander getrennt.
Zeigen Sie ein Beispiel für eine Tabelle mit Zellauffüllung an
Das Attribut definiert den Abstand zwischen den Tabellenzellen und dem Zelleninhalt. MögenZellpolsterungDie Standardeinstellung ist zwei Pixel. Sie müssen sie also festlegen0 wenn Sie keinen Zellenabstand wünschen.
Um einen Zellenabstand zu einer Tabelle hinzuzufügen, schreiben Sie:
<> Zellabstand = "20" > Diese Tabelle hat eine Zellabstand von 20. Zellen werden um 20 Pixel getrennt.
Sehen Sie sich eine Tabelle mit Cellspacing an
Das Attribut gibt an, welche Teile des Rahmens, der die Außenseite einer Tabelle umgibt, sichtbar sind.Sie können Ihren Tisch auf allen vier Seiten, auf jeder Seite, oben und unten, links und rechts oder ohne Rahmen gestalten.
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 = "unter" >
Dieser Tisch hat an der Unterseite einen Rahmen.
Schauen Sie sich einige Tabellen mit Frames an
Das Attribut ähnelt demRahmen Attribut, betrifft nur die Rahmen um die Zellen der Tabelle. Sie können Regeln für alle Zellen, zwischen Spalten und zwischen Gruppen festlegen, zTBODY undTFOOT oder keine.
Um eine Tabelle mit Zeilen nur zwischen den Zeilen zu erstellen, schreiben Sie:
rules = "Zeilen" >
Dieser 4x4 Tisch hat die Zeilen nicht Spalten mit dem umrissen Regelattribut.
Und noch einer mit Zeilen zwischen den Spalten:
rules = "cols" >
Das ist ein Tisch bei dem die Säulen sind hervorgehoben
Hier ist ein Beispiel für eine Tabelle mit Regeln
Das Attribut enthält Informationen zur Tabelle für Bildschirmleseprogramme und andere Benutzerprogramme, die möglicherweise Probleme beim Lesen von Tabellen haben. Um dieZusammenfassung Attribut 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 Informationen zum Füllstoff enthält. Der Zweck dieser Tabelle besteht darin, eine Zusammenfassung zu veranschaulichen." > Spalte 1 Reihe 1 Spalte 2 Reihe 1 Spalte 1 Reihe 2 Spalte 2 Reihe 2
Zeigen Sie eine Tabelle mit einer Zusammenfassung an
Das Attribut definiert die Breite der Tabelle in Pixel oder als Prozentsatz des Containerelements. Wenn dieBreite nicht gesetzt ist, nimmt die Tabelle nur so viel Platz in Anspruch, wie für die Anzeige des Inhalts erforderlich ist, wobei die maximale Breite der Breite des übergeordneten Elements entspricht.
Um eine Tabelle mit einer bestimmten Breite in Pixel zu erstellen, schreiben Sie:
<> width = "300" > Diese Tabelle ist 80% der Breite des Containers, in dem sie sich befindet.
Um eine Tabelle mit einer Breite zu erstellen, die einen Prozentsatz des übergeordneten Elements darstellt, schreiben Sie:
<> width = "80%" > Diese Tabelle ist 80% der Breite des Containers, in dem sie sich befindet.
Siehe ein Beispiel für eine Tabelle mit einer Breite
Veraltetes HTML 4.01 TABLE-Attribut
Es gibt ein Attribut desTABELLE Element, das in HTML 4.01 veraltet und in HTML5 veraltet ist:ausrichten. Mit diesem Attribut können Sie festlegen, wo sich die Tabelle relativ zu dem daneben stehenden Text auf der Seite befinden soll. Dieses Attribut wurde in HTML 4.01 nicht mehr unterstützt und sollte daher nicht verwendet werden. Verwenden Sie stattdessen die CSS-Eigenschaft oder dieRand links: auto; undRand rechts: auto; Stile. Dasschweben Eigenschaft gibt Ihnen ein Ergebnis, das näher an das istausrichten Attribut bereitgestellt, kann sich jedoch auf die Darstellung des restlichen Seiteninhalts auswirken. DasRand rechts: auto; undRand links: auto; Das empfiehlt das W3C als Alternative.
Hier ist ein veraltetes Beispiel mit derausrichten Attribut:
<> align = "right" > Diese Tabelle ist richtig ausgerichtet Text fließt um ihn herum nach links
Sehen Sie ein veraltetes Beispiel mit derausrichten Attribut.
Um den gleichen Effekt mit gültigem (nicht veraltetem) HTML-Code zu erzielen, schreiben Sie:
<> style = "float: right;" > Diese Tabelle ist richtig ausgerichtet Text fließt um ihn herum nach links
Das Folgende erklärtTABELLE Attribute, die nicht Bestandteil einer HTML-Spezifikation sind.
In den vorherigen Informationen werden Attribute des HTML-Elements beschrieben, die in HTML 4.01 gültig sind, in HTML5 jedoch veraltet sind.
Das Folgende beschreibtTABELLE Attribute, die in keiner aktuellen Spezifikation gültig sind. Wenn Sie sich nicht darum kümmern, ob Ihre Seiten gültig sind und Ihre Benutzer einen Browser verwenden, der diese Elemente unterstützt, können Sie diese Elemente verwenden. Die meisten von ihnen werden jedoch in modernen Browsern entweder nicht unterstützt oder haben Alternativen, die den Standards entsprechen.
Wir empfehlen nicht, diese Attribute zu verwenden in Ihren HTML-Tabellen.
Das Attribut ist ein altes Attribut, das enthalten war, bevor CSS weitgehend 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 Stileigenschaft.
Um die Hintergrundfarbe einer Tabelle zu ändern, schreiben Sie:
<> style = "Hintergrundfarbe: #ccc;" > Diese Tabelle hat einen grauen Hintergrund
Ähnlich wiebgcolor Attribut, dasRandfarbe Attribut lässt Sie die Farbe des Attributs ändern. Dieses Attribut wird nur von Internet Explorer unterstützt. Verwenden Sie stattdessen die Randfarbe-Stileigenschaft.
Um die Farbe des Tabellenrahmens zu ändern, schreiben Sie:
style = "border-color: red;" >
Diese Tabelle hat einen roten Rand.
Dasbordercolorlight undbordercolordark Der Internet Explorer enthält Attribute, mit denen Sie einen 3D-Rahmen um Ihren Tisch erstellen können. Ab IE8 und höher wird dies jedoch nur im IE7-Standardmodus und im Quirks-Modus unterstützt. Microsoft gibt an, dass diese Eigenschaften nicht mehr unterstützt werden.
Für eine kurze Zeit dieCols Attribut auf dieTABELLE Element wurde vorgeschlagen, damit Browser wissen, wie viele Spalten eine Tabelle hatte. Die Prämisse war, dass dies das Rendern großer Tabellen beschleunigen würde. Es wurde jedoch nur von Internet Explorer implementiert, und ab IE8 wird dies nur im IE7-Standardmodus und im Quirks-Modus unterstützt.
Weil es einen gibtBreite Attribut (in HTML5 veraltet) Viele Leute haben davon ausgegangen, dass es einHöhe Attribut auch für Tabellen. Aber weil Tabellen der Breite ihres Inhalts oder der definierten Breite im CSS entsprechen oderBreite Attribut kann die Höhe nicht eingeschränkt werden. Stattdessen erlaubten Browser dasHöhe Attribut, um die minimale Höhe der Tabelle zu definieren. Wenn der Tisch größer als diese Höhe wäre, würde er größer angezeigt werden. Sie sollten aber die Immobilie nutzen
Mit dem CSSHöhe Eigenschaft Sie können die Höhe einschränken, wenn Sie die CSS-Eigenschaft verwenden, um zu definieren, was mit übermäßigem Inhalt geschieht.
Um die minimale Höhe für eine Tabelle festzulegen, schreiben Sie:
<> style = "height: 30em;" > Dieser Tisch ist mindestens 30 ems hoch.
Die beiden Attribute und zusätzlicher Platz um die linke / rechte Seite (hspace) und oben / unten (vspace) des Tisches. Sie sollten stattdessen die style-Eigenschaft verwenden.
Um den vertikalen Abstand auf 20 Pixel und den horizontalen Abstand auf 40 Pixel festzulegen, schreiben Sie:
<> style = "Marge: 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 des übergeordneten Elements umbrochen werden soll oder einen horizontalen Bildlauf erzwingen soll. Stattdessen sollten Sie die Umbruchseigenschaften jeder Tabellenzelle mithilfe der CSS-Eigenschaft definieren.
Um eine Spalte mit viel Text zu erstellen, die nicht umbrochen wird, schreiben Sie:
<> style = "white-space: nowrap;" > Dies ist eine Spalte mit einer Menge Inhalt. Aber selbst wenn es breiter als der Container ist, sollte der Text nicht in die nächste Zeile umgebrochen werden, sondern erzwingt, dass das Browserfenster horizontal verschoben wird, um den gesamten Inhalt anzuzeigen.
Schließlich definiert das Attribut, wie der Inhalt jeder Zelle innerhalb der Zelle vertikal 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 erzeugt wird.
Um zu erzwingen, dass sich eine Zelle am unteren Rand ausrichtet (statt standardmäßig in der Mitte), schreiben Sie:
Diese Zelle ist länger als der Rest und zwingt daher dazu, die Höhe zu erhöhen. Sie werden also sehen, dass die vertikal ausgerichtete Zelle nach unten ausgerichtet ist. <> style = "vertical-align: bottom;" > Inhalt unten. Inhalt in der Mitte.
