Elementattributen 'TABEL' gebruiken (HTML)

click fraud protection

HTML-tabelkenmerken geven u veel meer controle over HTML-tabellen. Er zijn veel attributen beschikbaar voor tabellen om ze interessanter te maken en het uiterlijk van uw pagina te veranderen.

HTML TABLE Elementattributen

In HTML5 het element gebruikt de globale attributen en een ander attribuut en het is gewijzigd om alleen de waarde 1 of leeg te hebben (d.w.z. border=""). Als u de breedte van de rand wilt wijzigen, moet u de randbreedte gebruiken CSS-eigenschap.

Zie hieronder voor meer informatie over de geldige HTML5-tabelkenmerken.

Er zijn ook verschillende attributen die deel uitmaken van de HTML 4.01-specificatie die achterhaald is in HTML5:

  • —Gebruik de CSS-opvullingseigenschap op de TD- en TH-elementen van de tabel.
  • —Gebruik de CSS-eigenschap border-spatiëring op de tabel.
  • —Gebruik CSS-stijlen randkleur: zwart; en border-stijl op tafel.
  • —Gebruik CSS-stijlen randkleur: zwart; en randstijl op de juiste elementen van de tafel.
  • —In plaats daarvan moet je de structuur van de tabel in een CAPTION beschrijven of de hele tabel in een FIGURE plaatsen en deze in een FIGCAPTION beschrijven. Als alternatief kunt u de structuur van de tabel vereenvoudigen, zodat er geen uitleg nodig is.
    instagram viewer
  • —Gebruik de CSS-eigenschap width.

En een attribuut dat in HTML 4.01 is verouderd en ook achterhaald is in HTML5.

  • align: gebruik in plaats daarvan de eigenschap CSS-marge.

Er zijn ook verschillende attributen die geen deel uitmaken van een HTML-specificatie. Gebruik deze kenmerken als u weet dat de browsers die u ondersteunt ze aankunnen en u niet om geldige HTML geeft.

  • —Gebruik in plaats daarvan de CSS-eigenschap background-color.
  • bordercolor—Gebruik in plaats daarvan de CSS-eigenschap border-color.
  • bordercolorlight—Gebruik in plaats daarvan de CSS-eigenschap border-color.
  • bordercolordark—Gebruik in plaats daarvan de CSS-eigenschap border-color.
  • cols—Er is geen alternatief voor dit attribuut.
  • hoogte: gebruik in plaats daarvan de CSS-eigenschap height.
  • —Gebruik in plaats daarvan de CSS-eigenschapsmarge.
  • —Gebruik in plaats daarvan de CSS-eigenschap witruimte.
  • —Gebruik in plaats daarvan de CSS-eigenschap vertical-align.

HTML5 TABLE Elementattributen

Zoals we hierboven vermeldden, is er slechts één attribuut, buiten de globale attributen, dat geldig is op een HTML5 TABLE-element: border.

Het border attribuut wordt gebruikt om een ​​rand te definiëren rond de hele tabel en alle cellen erin. Er was enige vraag of het zou worden opgenomen in de HTML5-specificatie, maar het bleef omdat het informatie verschafte over de tabelstructuur, meer dan alleen stijlimplicaties.

Om het randkenmerk toe te voegen, stelt u de waarde in op 1 als er een rand is en leeg (of laat u het kenmerk weg) als die er niet is. De meeste browsers ondersteunen ook 0 voor geen rand en elke andere integerwaarde (2, 3, 30, 500, enz.) om de breedte van de rand in pixels aan te geven, maar dit is achterhaald in HTML5. In plaats daarvan moet u CSS-randstijleigenschappen gebruiken om de randbreedte en andere stijlen te definiëren.

Om een ​​tabel met een rand te maken, schrijft u:

border="1">
Dit is een tafel met een rand
Dit beschrijft de TABLE-attributen die geldig zijn in HTML 4.01, maar verouderd zijn in HTML5. Als u nog steeds HTML 4.01-documenten schrijft, kunt u deze kenmerken gebruiken, maar de meeste hebben alternatieven die uw pagina's toekomstbestendiger maken voor als u overstapt op HTML5.

Geldige HTML 4.01-attributen

Het attribuut dat we hierboven beschreven. Het enige verschil in HTML 4.01 van HTML5 is dat je elk geheel geheel getal (0, 1, 2, 15, 20, 200, etc.) kunt specificeren om de breedte van de rand in pixels te definiëren.

Om een ​​tabel met een rand van 5px te maken, schrijft u:

border="5">

Deze tabel heeft een rand van 5px.

Het attribuut definieert de hoeveelheid ruimte tussen celranden en de inhoud van de cel. De standaardwaarde is twee pixels. Stel de cellpadding in op 0 als u geen spatie tussen de inhoud en randen wilt.

Om de celopvulling in te stellen op 20, schrijft u:

cellpadding="20">

Deze tafel heeft een cellpadding van 20.

Celranden worden gescheiden door 20 pixels.

Bekijk een voorbeeld van een tabel met cellpadding.

Het attribuut definieert de hoeveelheid ruimte tussen de tabelcellen en de celinhoud. Net als bij cellpadding is de standaard ingesteld op twee pixels, dus u moet deze op 0 instellen als u geen celafstand wilt.

Om celafstand aan een tabel toe te voegen, schrijft u:

cellpacing="20">

Deze tabel heeft een celafstand van 20.

Cellen worden gescheiden door 20 pixels.

Het attribuut geeft aan welke delen van de rand rond de buitenkant van een tabel zichtbaar zullen zijn. U kunt uw tafel aan alle vier de zijden omlijsten, elke zijde, boven en onder, links en rechts, of geen.

Hier is de HTML voor een tabel met alleen de linkerrand:

frame="lhs">
Deze tafel
zal hebben
alleen de
linkerkant ingelijst.
En nog een voorbeeld met het onderste frame:

frame="hieronder">
Deze tafel heeft een frame aan de onderkant.
Bekijk enkele tafels met frames.

Het attribuut is vergelijkbaar met het frame-attribuut, alleen heeft het invloed op de randen rond de cellen van de tabel. U kunt regels instellen voor alle cellen, tussen kolommen, tussen groepen zoals TBODY en TFOOT of geen.

Om een ​​tabel te bouwen met alleen lijnen tussen de rijen, schrijft u:

regels = "rijen">
Deze 4x4 tafel heeft
de rijen niet kolommen
geschetst met de
regels attribuut.
En nog een met lijnen tussen de kolommen:

regels = "cols">
Dit is
een tafel
waar de
kolommen
zijn
gemarkeerd
De attribuut geeft informatie over de tabel voor schermlezers en andere user agents die mogelijk problemen hebben met het lezen van tabellen. Om het samenvattingsattribuut te gebruiken, schrijft u een korte beschrijving van de tabel op en stelt u die in als de waarde van het kenmerk. Het overzicht wordt in de meeste standaardwebbrowsers niet weergegeven op de webpagina.

Hier leest u hoe u een eenvoudige tabel met een samenvatting schrijft:

samenvatting="Dit is een voorbeeldtabel die vulinformatie bevat. Het doel van deze tabel is om een ​​samenvatting te demonstreren.">

kolom 1 rij 1.

kolom 2 rij 1.

kolom 1 rij 2.

kolom 2 rij 2.

Het attribuut definieert de breedte van de tabel in pixels of als een percentage van het containerelement. Als de breedte niet is ingesteld, neemt de tabel slechts zoveel ruimte in beslag als nodig is om de inhoud weer te geven, met een maximale breedte die gelijk is aan de breedte van het bovenliggende element.

Om een ​​tabel te bouwen met een specifieke breedte in pixels, schrijft u:

breedte = "300">

Deze tafel is 80% van de breedte van de container waarin deze zich bevindt.

En om een ​​tabel te bouwen met een breedte die een percentage is van het bovenliggende element, schrijft u:

breedte = "80%">

Deze tafel is 80% van de breedte van de container waarin deze zich bevindt.

Verouderd HTML 4.01 TABLE-kenmerk

Er is één attribuut van het TABLE-element dat verouderd is in HTML 4.01 en verouderd is in HTML5: align. Met dit kenmerk kunt u instellen waar de tabel op de pagina moet worden geplaatst ten opzichte van de tekst ernaast. Dit kenmerk is verouderd in HTML 4.01, en u moet het gebruik ervan vermijden. Gebruik in plaats daarvan de CSS-eigenschap of de margin-left: auto; en marge-rechts: auto; stijlen. De eigenschap float geeft u een resultaat dat dichter bij het align-attribuut ligt, maar het kan van invloed zijn op de manier waarop de rest van de pagina-inhoud wordt weergegeven. De marge-rechts: auto; en marge-links: auto; zijn wat de W3C aanbeveelt als alternatief.

Hier is een verouderd voorbeeld met het kenmerk align:

align="right">

Deze tabel is rechts uitgelijnd.

Tekst stroomt eromheen naar links.

En om hetzelfde effect te krijgen met geldige (niet-verouderde) HTML, schrijft u:

style="float: rechts;">

Deze tabel is rechts uitgelijnd.

Tekst stroomt eromheen naar links.

Verouderde TABEL-attributen

De vorige informatie beschrijft attributen van het HTML-element die geldig zijn in HTML 4.01 maar verouderd zijn in HTML5.

Hieronder worden TABLE-kenmerken beschreven die niet geldig zijn in de huidige specificatie. Als het u niet uitmaakt of uw pagina's valideren en uw gebruikers een browser gebruiken die deze elementen ondersteunt, dan kunt u deze elementen gebruiken. Maar de meeste worden ofwel niet ondersteund in moderne browsers of hebben alternatieven die meer voldoen aan de normen.

We raden het gebruik van deze kenmerken niet aan op uw HTML-tabellen.

Het attribuut is een oud attribuut dat werd opgenomen voordat CSS breed werd ondersteund. Hiermee kunt u de achtergrondkleur van de tabel wijzigen. U kunt een kleurnaam of een hexadecimale code instellen. Dit kenmerk werkt nog steeds in veel browsers, maar voor toekomstbestendige HTML moet u het niet gebruiken en in plaats daarvan CSS gebruiken.

Het betere alternatief voor dit attribuut is de stijleigenschap.

Om de achtergrondkleur van een tabel te wijzigen, schrijft u:

style="achtergrondkleur: #ccc;">

Deze tafel heeft een grijze achtergrond.

Net als bij het attribuut bgcolor, kunt u met het attribuut bordercolor de kleur van het attribuut wijzigen. Dit kenmerk wordt alleen ondersteund door Internet Explorer. In plaats daarvan moet u de stijleigenschap border-color gebruiken.

Om de kleur van de rand van uw tabel te wijzigen, schrijft u:

style="border-color: red;">
Deze tafel heeft een rode rand.
De attributen bordercolorlight en bordercolordark zijn opgenomen in Internet Explorer zodat u een 3D-rand rond uw tafel kunt maken. Vanaf IE8 en hoger wordt dit echter alleen ondersteund in IE7 Standards Mode en Quirks-modus. Microsoft stelt dat deze eigenschappen niet langer worden ondersteund.

Voor een korte tijd werd het cols attribuut op het TABLE-element voorgesteld om browsers te helpen weten hoeveel kolommen een tabel had. Het uitgangspunt was dat dit de weergave van grote tabellen zou helpen versnellen. Het werd echter alleen geïmplementeerd door Internet Explorer en vanaf IE8 en hoger wordt dit alleen ondersteund in IE7 Standards Mode en Quirks Mode.

Omdat er een width-attribuut is (verouderd in HTML5) gingen veel mensen ervan uit dat er ook een height-attribuut voor tabellen was. Maar omdat tabellen voldoen aan de breedte van hun inhoud of de gedefinieerde breedte in het CSS- of width-attribuut, kon de hoogte niet worden beperkt. In plaats daarvan lieten browsers het kenmerk height de minimale hoogte van de tabel definiëren. Als de tafel groter was dan die hoogte, zou deze groter zijn. Maar je moet het pand gebruiken.

Met de CSS-eigenschap height kunt u de hoogte beperken als u ook de CSS-eigenschap gebruikt om te definiëren wat er gebeurt met overtollige inhoud.

Om de minimale hoogte op een tafel in te stellen, schrijft u:

style="hoogte: 30em;">

Deze tafel is minimaal 30 ems hoog.

De twee attributen en toegevoegde ruimte rond de linker-/rechterkant (hspace) en boven-/onderkant (vspace) van de tabel. U moet in plaats daarvan de eigenschap style gebruiken.

Om de verticale ruimte in te stellen op 20 pixels en de horizontale ruimte op 40 pixels, schrijft u:

style="marge: 20px 40px;"

Deze tabel heeft een vspace van 20 pixels en een hspace van 40 pixels.

Het attribuut is een booleaans attribuut dat definieert of de inhoud van de tabel zich moet omwikkelen aan de rand van het bovenliggende element of venster of horizontaal scrollen moet forceren. In plaats daarvan moet u de terugloopkenmerken van elke tabelcel definiëren met behulp van de CSS-eigenschap.

Om een ​​kolom met veel tekst niet terug te laten lopen, schrijft u:


style="white-space: nowrap;">Dit is een kolom met heel veel inhoud. Maar zelfs als het breder is dan de container, zou de tekst niet naar de volgende regel moeten lopen, maar in plaats daarvan het browservenster dwingen om horizontaal te scrollen om alle inhoud te zien.
Ten slotte definieert het attribuut hoe de inhoud van elke cel verticaal binnen de cel moet worden uitgelijnd. In plaats van dit ongeldige kenmerk, moet u de CSS-eigenschap gebruiken op elke cel waarvan u de uitlijning wilt wijzigen. U zult de effecten van deze stijl niet opmerken, tenzij de inhoud van de cel kleiner is dan de beschikbare ruimte die door andere, grotere cellen is gecreëerd.

Om een ​​cel te forceren om uit te lijnen met de onderkant (in plaats van het midden, standaard), schrijft u:


Deze cel is langer dan de rest en zal dus de hoogte dwingen groter te zijn. U zult dus zien dat de verticaal uitgelijnde cel is uitgelijnd met de onderkant.
style="vertical-align: bottom;">Inhoud onderaan.
Inhoud in het midden.

instagram story viewer