HTML-tabellattributter gir deg mye mer kontroll over HTML-tabeller. Det er mange attributter tilgjengelig for tabeller for å gjøre dem mer interessante og endre utseendet på siden din.
HTML TABLE Elementattributter
I HTML5 elementet bruker de globale attributtene og ett annet attributt, og det har endret seg til kun å ha verdien 1 eller tom (dvs. border = ""). Hvis du vil endre bredden på grensen, bør du bruke kantbredden CSS-eiendom.
Se nedenfor for å lære mer om de gyldige HTML5-tabellattributtene.
Det er også flere attributter som er en del av HTML 4.01-spesifikasjonen som har blitt foreldet i HTML5:
- —Bruk CSS-polstringsegenskapen på bordets TD- og TH-elementer.
- —Bruk CSS-egenskapens kantavstand på bordet.
- —Bruk CSS-stiler kantfarge: svart; og kantstil på bordet.
- —Bruk CSS-stiler kantfarge: svart; og kantstil på de aktuelle elementene i tabellen.
- —I stedet for bør du beskrive strukturen til tabellen i en TEKST eller sette hele tabellen i en FIGUR og beskrive den i en FIGCAPTION. Alternativt kan du forenkle strukturen til tabellen slik at det ikke er behov for forklaring.
- —Bruk CSS-breddeegenskapen.
Og ett attributt som ble utfaset i HTML 4.01 og også er foreldet i HTML5.
- juster - Bruk CSS margin-egenskapen i stedet.
Det er også flere attributter som ikke er en del av noen HTML-spesifikasjon. Bruk disse attributtene hvis du vet at nettleserne du støtter kan håndtere dem, og du ikke bryr deg om gyldig HTML.
- —Bruk i stedet CSS-egenskapens bakgrunnsfarge.
- bordercolor — Bruk CSS-egenskapen border-color i stedet.
- bordercolorlight - Bruk CSS-egenskapen border-color i stedet.
- bordercolordark — Bruk CSS-egenskapen border-color i stedet.
- cols — Det er ikke noe alternativ til denne attributtet.
- høyde - Bruk CSS-egenskapshøyden i stedet.
- —Bruk i stedet CSS-eiendomsmarginen.
- —Bruk i stedet CSS-egenskapen white-space.
- —Bruk i stedet CSS-egenskapen vertikalt.
HTML5 TABLE Elementattributter
Som vi nevnte ovenfor, er det bare ett attributt, utover de globale attributtene, som er gyldig på et HTML5 TABLE-element: border.
Grenseattributtet brukes til å definere en ramme rundt hele tabellen og alle cellene i den. Det var noen spørsmål om det ville være inkludert i HTML5-spesifikasjonen, men det forble fordi det ga informasjon om tabellstrukturen, utover bare stilimplikasjoner.
For å legge til grenseattributtet, setter du verdien til 1 hvis det er en kantlinje og tom (eller slipper attributtet) hvis det ikke er det. De fleste nettlesere støtter også 0 uten grenser, og andre verdier (2, 3, 30, 500 osv.) For å erklære bredden i piksler, men dette er foreldet i HTML5. I stedet bør du bruke egenskaper for CSS-kantstil for å definere kantbredden og andre stiler.
For å lage en tabell med en kant, skriv:
border = "1">
Dette er et bord med en kant
Dette beskriver TABLE-attributtene som er gyldige i HTML 4.01, men som er foreldet i HTML5. Hvis du fremdeles skriver HTML 4.01-dokumenter, kan du bruke disse attributtene, men de fleste av dem har alternativer som vil gjøre sidene dine mer fremtidssikrede for når du flytter til HTML5.
Gyldige HTML 4.01-attributter
Attributtet vi beskrev ovenfor. Den eneste forskjellen i HTML 4.01 fra HTML5 er at du kan spesifisere et hvilket som helst heltall (0, 1, 2, 15, 20, 200 osv.) For å definere bredden på rammen i piksler.
For å bygge et bord med en 5px-kant, skriv:
border = "5">
Denne tabellen har en 5px-kant.
Attributtet definerer mengden plass mellom cellegrenser og innholdet i cellen. Standard er to piksler. Sett cellestoppet til 0 hvis du ikke vil ha mellomrom mellom innholdet og kantene.
For å sette cellepolstringen til 20, skriv:
cellpadding = "20">
Denne tabellen har en cellestopp på 20.
Cellekanter skilles med 20 piksler.
Vis et eksempel på en tabell med cellefylling.
Attributtet definerer mengden plass mellom tabellcellene og celleinnholdet. Som cellpadding er standard satt til to piksler, så du må sette den til 0 hvis du ikke vil ha noe celleavstand.
For å legge til celleavstand i en tabell, skriv:
cellspacing = "20">
Denne tabellen har et celleavstand på 20.
Cellene vil være atskilt med 20 piksler.
Attributtet identifiserer hvilke deler av grensen rundt utsiden av et bord som vil være synlige. Du kan ramme inn bordet på alle fire sider, hvilken som helst side, topp og bunn, venstre og høyre eller ingen.
Her er HTML-koden for en tabell med bare venstre sidekant:
frame = "lhs">
Denne tabellen
vil ha
bare den
venstre side innrammet.
Og et annet eksempel med bunnrammen:
frame = "below">
Denne tabellen har en ramme i bunnen.
Sjekk ut noen bord med rammer.
Attributtet ligner på rammeattributtet, bare det påvirker kantene rundt cellene i tabellen. Du kan sette regler på alle cellene, mellom kolonner, mellom grupper som TBODY og TFOOT eller ingen.
For å bygge en tabell med bare linjer mellom radene, skriv:
regler = "rader">
Dette 4x4 bordet har
radene ikke kolonner
skissert med
regler attributt.
Og en annen med linjer mellom kolonnene:
regler = "cols">
Dette er
et bord
hvor i
kolonner
er
fremhevet
De attributt gir informasjon om tabellen for skjermlesere og andre brukeragenter som kan ha problemer med å lese tabeller. For å bruke sammendragsattributtet skriver du opp en kort beskrivelse av tabellen og setter den som verdien av attributtet. Sammendraget vises ikke på websiden i de fleste vanlige nettlesere.
Slik skriver du en enkel tabell med et sammendrag:
summary = "Dette er en eksempletabell som inneholder informasjon om fyllstoff. Formålet med denne tabellen er å demonstrere et sammendrag. ">
kolonne 1 rad 1.
kolonne 2 rad 1.
kolonne 1 rad 2.
kolonne 2 rad 2.
Attributtet definerer bredden på tabellen i enten piksler eller som en prosentandel av containerelementet. Hvis bredden ikke er angitt, tar tabellen bare så mye plass som den trenger for å vise innholdet, med en maksimal bredde som bredden på det overordnede elementet.
For å bygge en tabell med en bestemt bredde i piksler, skriv:
width = "300">
Denne tabellen er 80% av bredden på beholderen den er i.
Og for å bygge en tabell med en bredde som er en prosentandel av det overordnede elementet, skriv:
bredde = "80%">
Denne tabellen er 80% av bredden på beholderen den er i.
Utdatert HTML 4.01 TABLE-attributt
Det er ett attributt for TABLE-elementet som er utfaset i HTML 4.01 og foreldet i HTML5: align. Dette attributtet lar deg angi hvor tabellen skal være på siden i forhold til teksten ved siden av den. Dette attributtet er utfaset i HTML 4.01, og du bør unngå å bruke det. I stedet bør du bruke CSS-egenskapen eller marg-venstre: auto; og margin-høyre: auto; stiler. Flyteegenskapen gir deg et resultat som er nærmere det justeringsattributtet som ble gitt, men det kan påvirke måten resten av sideinnholdet vises på. Margen til høyre: auto; og margin til venstre: auto; er det W3C anbefaler som et alternativ.
Her er et foreldet eksempel ved bruk av attributtet align:
align = "right">
Denne tabellen er riktig justert.
Tekst flyter rundt den til venstre.
Og for å få den samme effekten med gyldig (ikke utfaset) HTML, skriv:
style = "float: right;">
Denne tabellen er riktig justert.
Tekst flyter rundt den til venstre.
Foreldte TABLE-attributter
Den forrige informasjonen beskriver attributtene til HTML-elementet som er gyldige i HTML 4.01, men som er foreldet i HTML5.
Det følgende beskriver TABLE-attributter som ikke er gyldige i noen gjeldende spesifikasjon. Hvis du ikke bryr deg om sidene dine validerer og brukerne bruker en nettleser som støtter disse elementene, kan du bruke disse elementene. Men de fleste av dem støttes enten ikke i moderne nettlesere eller har alternativer som er mer standardkompatible.
Vi anbefaler ikke å bruke disse attributtene på HTML-tabellene.
Attributtet er et gammelt attributt som ble inkludert før CSS ble støttet bredt. Det lar deg endre bakgrunnsfargen på tabellen. Du kan angi et fargenavn eller en heksadesimal kode. Denne egenskapen fungerer fremdeles i mange nettlesere, men for fremtidssikret HTML, bør du ikke bruke den, og bruke CSS i stedet.
Det bedre alternativet til dette attributtet er stilegenskapen.
For å endre bakgrunnsfargen på en tabell, skriv:
stil = "bakgrunnsfarge: #ccc;">
Denne tabellen har en grå bakgrunn.
I likhet med bgcolor-attributtet lar bordercolor-attributtet deg endre fargen på attributtet. Dette attributtet støttes bare av Internet Explorer. I stedet bør du bruke egenskapen border-color style.
For å endre fargen på bordets kant, skriv:
style = "border-color: red;">
Denne tabellen har en rød kant.
Attributtene bordercolorlight og bordercolordark ble inkludert i Internet Explorer, slik at du kan lage en 3D-kant rundt bordet ditt. Fra og med IE8 og oppover støttes dette bare i IE7 standardmodus og Quirks Mode. Microsoft oppgir at disse egenskapene ikke lenger støttes.
I kort tid ble cols-attributtet på TABLE-elementet foreslått for å hjelpe nettlesere å vite hvor mange kolonner en tabell hadde. Forutsetningen var at dette ville bidra til å øke gjengivelsen av store bord. Imidlertid ble den bare implementert av Internet Explorer, og fra og med IE8 og oppover støttes dette bare i IE7 standardmodus og quirks-modus.
Fordi det er et breddeattributt (foreldet i HTML5) antok mange at det også var et høydeattributt for tabeller. Men fordi tabeller samsvarer med bredden på innholdet eller den definerte bredden i CSS- eller breddeattributtet, kunne høyden ikke begrenses. I stedet tillot nettlesere høydeattributtet å definere minimumshøyden på tabellen. Hvis bordet var høyere enn den høyden, ville det vises høyere. Men du bør bruke eiendommen.
Med CSS høydeegenskapen kan du begrense høyden hvis du også bruker CSS-egenskapen til å definere hva som skjer med overflødig innhold.
For å sette minimumshøyden på et bord, skriv:
stil = "høyde: 30 em;">
Denne tabellen er minst 30 ems høy.
De to attributtene og lagt til plass rundt venstre / høyre side (hspace) og topp / bunn (vspace) på bordet. Du bør bruke stilegenskapen i stedet.
For å sette det vertikale rommet til 20 piksler og det horisontale rommet til 40 piksler, skriv:
style = "margin: 20px 40px;"
Denne tabellen har et v-rom på 20 piksler og et h-rom på 40 piksler.
Attributtet er et boolsk attributt som definerer om innholdet i tabellen skal vikles ved kanten av det overordnede elementet eller vinduet eller tvinge vannrett rulling. I stedet bør du definere innpakningsegenskapene til hver tabellcelle ved hjelp av CSS-egenskapen.
For å lage en kolonne med mye tekst som ikke pakkes inn, skriv:
style = "white-space: nowrap;"> Dette er en kolonne med massevis av innhold. Men selv om den er bredere enn beholderen, bør teksten ikke vikles til neste linje, men tvinge nettleservinduet til å bla vannrett for å se alt innholdet.
Til slutt definerer attributtet hvordan innholdet i hver celle skal justeres vertikalt i cellen. I stedet for dette ugyldige attributtet, bør du bruke CSS-egenskapen på hver celle du vil endre justeringen av. Du vil ikke merke effekten av denne stilen med mindre celleinnholdet er mindre enn den tilgjengelige plassen som er opprettet av andre større celler.
For å tvinge en celle til å justere seg til bunnen (i stedet for midten, som standard), skriv:
Denne cellen er lengre enn resten, og vil derfor tvinge høyden til å bli høyere. Så du vil se at den vertikalt justerte cellen er justert til bunnen.
style = "vertical-align: bottom;"> Innhold nederst.
Innhold i midten.