HTML-tabelattributen geven u veel meer controle over HTML-tabellen. Er zijn veel kenmerken beschikbaar voor tabellen om ze interessanter te maken en het uiterlijk van uw pagina te veranderen.
HTML TABEL Elementattributen
In HTML5 gebruikt het element de algemene kenmerken en een ander kenmerk:. En het is veranderd om alleen de waarde van te hebben 1 of leeg (d.w.z. border = ""). Als u de breedte van de rand wilt wijzigen, gebruikt u de grensbreedte CSS-eigenschap.
Zie hieronder voor meer informatie over de geldige HTML5-tabelattributen.
Er zijn ook verschillende kenmerken die deel uitmaken van de HTML 4.01-specificatie die verouderd is geworden in HTML5:
- - Gebruik de CSS
vullingeigendom op de tafelsTDenTHelementen. - - Gebruik de CSS-eigenschap
border-spacingop de tafel. - -Gebruik CSS-stijlen
randkleur: zwart;enborder-styleop de tafel. - -Gebruik CSS-stijlen
randkleur: zwart;enborder-styleop de juiste elementen van de tabel. - - In plaats daarvan moet u de structuur van de tabel in a beschrijven
ONDERSCHRIFTof zet de hele tabel in eenFIGUURen het beschrijven in aFIGCAPTION. Als alternatief kunt u de structuur van de tabel vereenvoudigen, zodat er geen uitleg nodig is. - - Gebruik de CSS
breedteeigendom.
En een kenmerk dat in HTML 4.01 was verouderd en ook verouderd is in HTML5.
Meer informatie over de HTML 4.01 TABLE Attributen.
richten- Gebruik de CSSmargeeigendom in plaats daarvan.
Er zijn ook verschillende kenmerken die geen deel uitmaken van een HTML-specificatie. Gebruik deze kenmerken als u weet dat de browsers die u ondersteunt deze kunnen verwerken en dat u niet om geldige HTML geeft.
- - Gebruik de CSS-eigenschap
Achtergrond kleurin plaats daarvan. rand kleur- Gebruik de CSS-eigenschaprand kleurin plaats daarvan.bordercolorlight- Gebruik de CSS-eigenschaprand kleurin plaats daarvan.bordercolordark- Gebruik de CSS-eigenschaprand kleurin plaats daarvan.cols-Er is geen alternatief voor dit kenmerk.hoogte- Gebruik de CSS-eigenschaphoogtein plaats daarvan.- - Gebruik de CSS-eigenschap
margein plaats daarvan. - - Gebruik de CSS-eigenschap
margein plaats daarvan. - - Gebruik de CSS-eigenschap
witte ruimtein plaats daarvan. - - Gebruik de CSS-eigenschap
vertical-alignin plaats daarvan.
Meer informatie over de browser-specifieke TABLE Attributen.
HTML5 TABLE Elementattributen
Zoals we hierboven vermeldden, is er slechts één kenmerk, naast de algemene kenmerken, dat geldig is in een HTML5 TAFEL element: grens.
De grens attribuut wordt gebruikt om een rand rond de hele tabel en alle cellen erin te definiëren. Er was een vraag over of het zou worden opgenomen in de HTML5-specificatie, maar het bleef omdat het informatie over de tabelstructuur verschafte, meer dan alleen implicaties voor de stijl.
Om de. Toe te voegen grens attribuut, u stelt de waarde in op 1 als er een rand is en leeg (of laat het attribuut weg) als dat niet het geval is. De meeste browsers ondersteunen ook 0 voor geen grens, en een andere integerwaarde (2, 3, 30, 500, enz.) om de breedte van de rand in pixels te declareren, maar dit is verouderd in HTML5. Gebruik in plaats daarvan CSS-stijlstijleigenschappen 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
Er zijn HTML 4.01-kenmerken die verouderd zijn in HTML5. Als u HTML 4.01-documenten wilt schrijven, kunt u deze leren, anders kunt u ze negeren. De meeste van deze attributen hebben alternatieven, hierboven beschreven.
We beschrijven de kenmerken van het element die geldig zijn in HTML5 (en HTML 4.01). Dit beschrijft deTAFEL kenmerken 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 toekomstbestendig maken wanneer u naar HTML5 gaat.
Valid HTML 4.01 Attributes
Het kenmerk dat we hierboven hebben beschreven. Het enige verschil in HTML 4.01 van HTML5 is dat u een geheel geheel getal (0, 1, 2, 15, 20, 200, etc.) kunt opgeven om de breedte van de rand in pixels te definiëren.
Om een tabel met een 5px-rand te maken, schrijft u:
<> border = "5" > Deze tabel heeft een 5px-rand.
Bekijk een voorbeeld van twee tabellen met randen.
Het kenmerk definieert de hoeveelheid ruimte tussen celranden en de inhoud van de cel. De standaardinstelling is twee pixels. Stel decellpadding naar0 als u geen spatie wilt tussen de inhoud en randen.
Om de celopvulling in te stellen op 20, schrijft u:
<> cellpadding = "20" > Deze tabel heeft een cellpadding van 20. Celranden worden gescheiden door 20 pixels.
Bekijk een voorbeeld van een tabel met cellpadding
Het kenmerk definieert de hoeveelheid ruimte tussen de tabelcellen en de celinhoud. Net zoalscellpadding, de standaardwaarde is ingesteld op twee pixels, dus u moet deze instellen op0 als je geen celafstand wilt.
Als u ruimte tussen cellen aan een tabel wilt toevoegen, schrijft u het volgende:
<> cellspacing = "20" > Deze tabel heeft een cellspacing van 20. Cellen worden gescheiden door 20 pixels.
Zie een tabel met cellspacing
Het attribuut identificeert welke delen van de rand rondom de buitenkant van een tabel zichtbaar zullen zijn.U kunt uw tafel aan alle vier zijden, elke zijkant, boven en onder, links en rechts of geen, inlijsten.
Hier is de HTML voor een tabel met alleen de linkerzijrand:
kader = "ls" >
Deze tafel zal hebben alleen de linkerkant ingelijst.
En nog een voorbeeld met het onderste frame:
kader = "onder" >
Deze tafel heeft een kader aan de onderkant.
Bekijk enkele tabellen met frames
Het kenmerk is vergelijkbaar met demontuur kenmerk, alleen heeft dit invloed op de randen rond de cellen van de tabel. Je kunt regels instellen voor alle cellen, tussen kolommen, tussen groepen zoalsTBODY enTFOOT of geen.
Als u een tabel wilt maken met alleen regels tussen de rijen, schrijft u:
regels = "rijen" >
Deze 4x4-tafel heeft de rijen niet kolommen geschetst met de regels attribuut.
En een andere met lijnen tussen de kolommen:
regels = "cols" >
Dit is een tafel waar de kolommen zijn gemarkeerd
Hier is een voorbeeld van een tabel met regels
Het kenmerk biedt informatie over de tabel voor schermlezers en andere user-agents die problemen hebben met het lezen van tabellen. Om de te gebruikensamenvatting attribuut, noteer een korte beschrijving van de tabel en zet die als de waarde van het attribuut. De samenvatting wordt niet weergegeven op de webpagina in de meeste standaard webbrowsers.
Hier leest u hoe u een eenvoudige tabel met een samenvatting schrijft:
<> summary = "Dit is een voorbeeldtabel die informatie over de opvulling 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
Bekijk een tabel met een samenvatting
Het kenmerk definieert de breedte van de tabel in pixels of als een percentage van het containerelement. Als hetbreedte is niet ingesteld, de tabel neemt alleen zoveel ruimte in beslag als nodig is om de inhoud weer te geven, met een maximale breedte hetzelfde als de breedte van het bovenliggende element.
Als u een tabel met een specifieke breedte in pixels wilt maken, schrijft u:
<> width = "300" > Deze tabel is 80% van de breedte van de container waarin deze zich bevindt.
En om een tabel te bouwen met een breedte die een percentage van het bovenliggende element is, schrijft u:
<> width = "80%" > Deze tabel is 80% van de breedte van de container waarin deze zich bevindt.
Bekijk een voorbeeld van een tabel met een breedte
Verouderde HTML 4.01 TABLE Attribuut
Er is een attribuut van deTAFEL element dat is verouderd in HTML 4.01 en verouderd is in HTML5:richten. Met dit kenmerk kunt u instellen waar de tabel zich op de pagina moet bevinden ten opzichte van de tekst ernaast. Dit kenmerk is verouderd in HTML 4.01 en moet daarom worden voorkomen. Gebruik in plaats daarvan de CSS-eigenschap of demarge links: auto; enmarge-rechts: auto; stijlen. Devlotter eigenschap geeft u een resultaat dat dichter ligt bij wat hetrichten gegeven, maar dit kan van invloed zijn op de manier waarop de rest van de pagina-inhoud wordt weergegeven. Demarge-rechts: auto; enmarge links: auto; zijn wat de W3C aanbeveelt als een alternatief.
Hier is een verouderd voorbeeld met derichten attribuut:
<> align = "right" > Deze tabel is rechts uitgelijnd Tekst stroomt eromheen naar links
Zie een verouderd voorbeeld met behulp van derichten attribuut.
En om hetzelfde effect te krijgen met geldige (niet-verouderde) HTML, schrijft u:
<> style = "float: right;" > Deze tabel is rechts uitgelijnd Tekst stroomt eromheen naar links
Het volgende verklaartTAFEL kenmerken die geen deel uitmaken van een HTML-specificatie.
De vorige informatie beschrijft kenmerken van het HTML-element die geldig zijn in HTML 4.01 maar verouderd zijn in HTML5.
Het volgende beschrijftTAFEL attributen die niet geldig zijn in enige huidige specificatie. Als u er niet om geeft of uw pagina's worden gevalideerd en uw gebruikers een browser gebruiken die deze elementen ondersteunt, dan kunt u deze elementen gebruiken. Maar de meeste zijn niet-ondersteund in moderne browsers of hebben alternatieven die meer voldoen aan de standaarden.
We raden af deze kenmerken te gebruiken op uw HTML-tabellen.
Het kenmerk is een oud kenmerk dat was opgenomen voordat CSS algemeen 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 HTML die in de toekomst is beveiligd, moet u het niet gebruiken en in plaats daarvan CSS gebruiken.
Het betere alternatief voor dit kenmerk is de eigenschap style.
Als u de achtergrondkleur van een tabel wilt wijzigen, schrijft u:
<> style = "background-color: #ccc;" > Deze tabel heeft een grijze achtergrond
Vergelijkbaar met debgcolor attribuut, derand kleur attribuut laat je de kleur van het attribuut veranderen. Dit kenmerk wordt alleen ondersteund door Internet Explorer. Gebruik in plaats daarvan de eigenschap border-colour style.
Ga als volgt te werk om de kleur van de rand van uw tabel te wijzigen:
style = "border-color: red;" >
Deze tafel heeft een rode rand.
Debordercolorlight enbordercolordark attributen 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 Mode. Microsoft verklaart dat deze eigenschappen niet langer worden ondersteund.
Voor een korte tijd, decols attribuut op deTAFEL element is voorgesteld om browsers te helpen weten hoeveel kolommen een tabel had. Het uitgangspunt was dat dit de weergave van grote tabellen zou 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 isbreedte attribuut (verouderd in HTML5) veel mensen dachten dat er een washoogte kenmerk voor tabellen ook. Maar omdat tabellen voldoen aan de breedte van hun inhoud of de gedefinieerde breedte in de CSS ofbreedte attribuut, de hoogte kon niet worden beperkt. In plaats daarvan hebben browsers het toegestaanhoogte attribuut om de minimumhoogte van de tafel te definiëren. Als de tafel langer zou zijn dan die hoogte, zou deze groter worden weergegeven. Maar u zou de eigenschap moeten gebruiken
Met de CSShoogte eigenschap kunt u de hoogte beperken als u de CSS-eigenschap ook gebruikt om te definiëren wat er gebeurt met overtollige inhoud.
Om de minimumhoogte in een tabel in te stellen, schrijft u:
<> style = "height: 30em;" > Deze tabel is minstens 30 ems hoog.
De twee attributen en extra ruimte rond de linker- / rechterkant (hspace) en boven / onder (vspace) van de tafel. Gebruik in plaats daarvan de eigenschap style.
Om de verticale ruimte in te stellen op 20 pixels en de horizontale ruimte op 40 pixels, schrijft u:
<> style = "margin: 20px 40px;" Deze tabel heeft een vspace van 20 pixels en een hspace van 40 pixels.
Het kenmerk is een boolean-kenmerk dat bepaalt of de inhoud van de tabel moet worden ingevoegd aan de rand van het bovenliggende element of venster of horizontaal scrollen moet forceren. In plaats daarvan moet u de wrappingkenmerken van elke tabelcel definiëren met behulp van de CSS-eigenschap.
Om een kolom met veel tekst niet in te pakken te maken, schrijft u:
<> style = "white-space: nowrap;" > Dit is een kolom met een hoop inhoud. Maar zelfs als het breder is dan de container, zou de tekst niet naar de volgende regel moeten gaan, 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 in de cel moet worden uitgelijnd. In plaats van dit ongeldige kenmerk moet u de CSS-eigenschap gebruiken voor elke cel waarvan u de uitlijning wilt wijzigen. U merkt de effecten van deze stijl niet, tenzij de inhoud van de cel kleiner is dan de beschikbare ruimte die door andere, grotere cellen wordt gecreëerd.
Om een cel te dwingen om uit te lijnen met de onderkant (in plaats van het midden, als standaardinstelling), schrijf je:
Deze cel is langer dan de rest en zal dus de hoogte groter maken. U zult dus zien dat de verticaal uitgelijnde cel is uitgelijnd met de onderkant. <> style = "vertical-align: bottom;" > Inhoud onderaan. Inhoud in het midden.
