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 Element Attributes
I HTML5 bruker elementet de globale attributter og ett annet attribut:. Og det har endret seg til bare å ha verdien av 1 eller tomt (dvs. border = ""). Hvis du vil endre bredden på grensen, bør du bruke border-bredde CSS eiendom.
Se nedenfor for å lære 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
paddingeiendom på bordetTDogTHelementer. - - Bruk CSS-egenskapen
kant-avstandpå bordet. - Bruk CSS-stiler
border-farge: svart;ogborder-stylepå bordet. - Bruk CSS-stiler
border-farge: svart;ogborder-stylepå de aktuelle elementene i bordet. - -I stedet bør du beskrive bordets struktur i en
Bildeteksteller sett hele bordet i enFIGURog beskriver det i aFIGCAPTION. Alternativt kan du forenkle bordets struktur slik at ingen forklaring er nødvendig. - - Bruk CSS
breddeeiendom.
Og ett attributt som ble avskrevet i HTML 4.01 og også utdatert i HTML5.
Lær mer om HTML 4.01 TABLE-attributter.
rette inn- Bruk CSSmargineiendom i stedet.
Det finnes også flere attributter som ikke er en del av noen HTML-spesifikasjon. Bruk disse attributter hvis du vet at nettleserne du støtter kan håndtere dem, og du bryr deg ikke om gyldig HTML.
- - Bruk CSS-egenskapen
bakgrunnsfargei stedet. grensefarge- Bruk CSS-egenskapengrensefargei stedet.bordercolorlight- Bruk CSS-egenskapengrensefargei stedet.bordercolordark- Bruk CSS-egenskapengrensefargei stedet.kolonner-Det er ikke noe alternativ til dette attributtet.høyde- Bruk CSS-egenskapenhøydei stedet.- - Bruk CSS-egenskapen
margini stedet. - - Bruk CSS-egenskapen
margini stedet. - - Bruk CSS-egenskapen
white-spacei stedet. - - Bruk CSS-egenskapen
vertical-aligni stedet.
Lær mer om nettleserspesifikke TABLE-attributter.
HTML5 TABLE Element Attributes
Som nevnt ovenfor er det bare ett attributt, utover de globale attributter, som er gyldig på en HTML5 BORD element: grense.
De grense Attributt brukes til å definere en kant rundt hele bordet og alle cellene i den. Det var noen spørsmål om det ville bli inkludert i HTML5-spesifikasjonen, men det forble fordi det ga informasjon om tabellstrukturen, utover bare stilimplikasjoner.
For å legge til grense attributt, du angir verdien til 1 hvis det er en grense og tomt (eller la av attributtet) hvis det ikke er det. De fleste nettlesere vil også støtte 0 uten grense og noen annen heltallverdi (2, 3, 30, 500, etc) for å angi grensenes bredde i piksler, men dette er foreldet i HTML5. I stedet bør du bruke CSS-grensesnittegenskaper for å definere grensebredden og andre stilarter.
For å lage et bord med en grense, skriv:
border = "1" >
Dette er et bord med en grense
Det er HTML 4.01-attributter som er foreldet i HTML5. Hvis du planlegger å skrive HTML 4.01-dokumenter, kan du lære dem, ellers kan du ignorere dem. De fleste av disse attributter har alternativer, beskrevet ovenfor.
Vi beskriver egenskapene til elementet som er gyldige i HTML5 (og HTML 4.01). Dette beskriverBORD attributter som er gyldige i HTML 4.01, men er foreldet i HTML5. Hvis du fremdeles skriver HTML 4.01-dokumenter, kan du bruke disse attributter, men de fleste av dem har alternativer som gjør sidene dine mer fremtidssikrede for når du flytter til HTML5.
Valid HTML 4.01 Attributter
Attributtet vi beskrev ovenfor. Den eneste forskjellen i HTML 4.01 fra HTML5 er at du kan angi et helt heltall (0, 1, 2, 15, 20, 200, etc.) for å definere bredden på grensen i piksler.
For å bygge et bord med en 5px-kant, skriv:
<> border = "5" > Denne tabellen har en 5px-kantlinje.
Se et eksempel på to bord med grenser.
Attributtet definerer mengden mellomrom mellom cellegrenser og innholdet i cellen. Standard er to piksler. Settcellpadding til0 hvis du ikke vil ha mellomrom mellom innhold og grenser.
For å sette celleputer til 20, skriv:
<> cellpadding = "20" > Denne tabellen har en cellpadding av 20. Cell grenser vil bli skilt med 20 piksler.
Se et eksempel på et bord med cellpadding
Attributtet definerer mengden mellomrom mellom tabellcellene og celleinnholdet. Somcellpadding, standard er satt til to piksler, så du må sette den til0 hvis du ikke vil ha en celleavstand.
For å legge celleavstand til et bord, skriv:
<> cellspacing = "20" > Denne tabellen har en cellspacing av 20. Celler vil bli separert med 20 piksler.
Se et bord med cellespace
Attributtet identifiserer hvilke deler av grensen som omgir utsiden av et bord, synlig.Du kan ramme bordet på alle fire sider, en side, topp og bunn, venstre og høyre eller ingen.
Her er HTML for en tabell med kun venstre kantlinje:
Ramme = "LHS" >
Dette bordet vil ha bare den venstre side innrammet.
Og et annet eksempel med bunnrammen:
ramme = "under" >
Dette bordet har en ramme på bunnen.
Sjekk ut noen bord med rammer
Attributtet ligner påramme attributt, bare det påvirker grensene rundt tabellens celler. Du kan stille regler på alle cellene, mellom kolonner, mellom grupper somTBODY ogTFOOT eller ingen.
For å bygge et bord med linjer bare mellom radene, skriv:
regler = "rader" >
Dette 4x4 bordet har radene ikke kolonner skissert med reglerattributt.
Og en annen med linjer mellom kolonnene:
regler = "kolonner" >
Dette er et bord hvor i kolonner er fremhevet
Her er et eksempel på et bord med regler
Attributtet gir informasjon om tabellen for skjermlesere og andre brukeragenter som kan ha problemer med å lese tabeller. For å brukesammendrag attributt, skriver du en kort beskrivelse av tabellen og legger den som verdien av attributtet. Sammendraget vises ikke på nettsiden i de fleste vanlige nettlesere.
Slik skriver du et enkelt bord med et sammendrag:
<> summary = "Dette er et eksempelbord som inneholder fyllinformasjon. Formålet med denne tabellen er å vise et sammendrag." > kolonne 1 rad 1 kolonne 2 rad 1 kolonne 1 rad 2 kolonne 2 rad 2
Se et bord med et sammendrag
Attributtet definerer bredden på tabellen i piksler eller i prosent av beholderelementet. Hvisbredde er ikke satt, vil tabellen ta opp kun så mye plass som det må vise innholdet, med en maksimal bredde som er bredden på overordnet elementet.
For å bygge et bord med en bestemt bredde i piksler, skriv:
<> width = "300" > Denne tabellen er 80% av bredden på beholderen den er i.
Og for å bygge et bord med en bredde som er en prosentandel av overordnet element, skriv:
<> width = "80%" > Denne tabellen er 80% av bredden på beholderen den er i.
Se et eksempel på et bord med en bredde
Utdatert HTML 4.01 TABLE Attribut
Det er en attributt avBORD element som er utdatert i HTML 4.01 og utdatert i HTML5:rette inn. Med denne attributtet kan du angi hvor bordet skal være plassert på siden i forhold til teksten som ligger ved siden av den. Denne attributtet har blitt utdatert i HTML 4.01, og du bør unngå å bruke den. I stedet bør du bruke CSS-egenskapen ellermargin-left: auto; ogmargin-høyre: auto; stiler. Deflyte eiendom gir deg et resultat som er nærmere hvarette inn Attributtet er gitt, men det kan påvirke måten resten av sidens innhold viser. Demargin-høyre: auto; ogmargin-left: auto; er hva W3C anbefaler som et alternativ.
Her er et utdatert eksempel ved hjelp avrette inn Egenskap:
<> align = "right" > Denne tabellen er rettjustert Tekst flyter rundt den til venstre
Se et utdatert eksempel ved hjelp avrette inn Egenskap.
Og for å få den samme effekten med gyldig (ikke-avskrevet) HTML, skriv:
<> style = "float: right;" > Denne tabellen er rettjustert Tekst flyter rundt den til venstre
Følgende forklarerBORD attributter som ikke er en del av en HTML-spesifikasjon.
Den forrige informasjonen beskriver attributter av HTML-elementet som er gyldige i HTML 4.01, men er foreldet i HTML5.
Det følgende beskriverBORD attributter som ikke er gyldige i en 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 er heller ikke støttet i moderne nettlesere eller har alternativer som er mer standardkompatible.
Vi anbefaler ikke å bruke disse attributter på HTML-tabellene dine.
Attributtet er et gammelt attributt som ble inkludert før CSS ble godt støttet. Den lar deg endre bakgrunnsfargen på bordet. Du kan angi et fargenavn eller en heksadesimal kode. Denne egenskapen fungerer fortsatt i mange nettlesere, men for fremtidssikret HTML, bør du ikke bruke den, og bruk CSS i stedet.
Det bedre alternativet til dette attributtet er stilegenskapen.
For å endre bakgrunnsfargen på et bord, skriv:
<> style = "background-color: #ccc;" > Denne tabellen har en grå bakgrunn
Ligner påbgcolor attributt,grensefarge attributt lar deg endre farge på attributtet. Denne attributtet støttes bare av Internet Explorer. I stedet bør du bruke egenskapen for grensefargestil.
For å endre fargen på bordets grense, skriv:
style = "border-color: red;" >
Denne tabellen har en rød kant.
Debordercolorlight ogbordercolordark Attributter ble inkludert i Internet Explorer, slik at du kan lage en 3D-ramme rundt bordet ditt. Men fra og med IE8 og opp, støttes dette bare i IE7 Standards Mode og Quirks Mode. Microsoft sier at disse egenskapene ikke lenger støttes.
For en kort stund, denkolonner attributt påBORD element ble foreslått for å hjelpe nettleserne å vite hvor mange kolonner et bord hadde. Forutsetningen var at dette ville bidra til å øke hastigheten på gjengivelsen av store tabeller. Men det ble bare implementert av Internet Explorer, og fra og med IE8 og opp, støttes dette bare i IE7 Standards Mode og Quirks Mode.
Fordi det er abredde attributt (foreldet i HTML5) mange antok at det var enhøyde attributt for tabeller også. Men fordi tabellene samsvarer med bredden på innholdet eller den definerte bredden i CSS ellerbredde attributt, høyden kunne ikke begrenses. Så i stedet tillot nettleserehøyde Tilordne å definere minimumshøyde på tabellen. Hvis bordet var høyere enn den høyden, ville det vise seg høyere. Men du bør bruke eiendommen
Med CSShøyde eiendom du kan begrense høyden hvis du også bruker CSS-egenskapen til å definere hva som skjer med overskytende innhold.
For å sette minimum høyde på et bord, skriv:
<> style = "height: 30em;" > Dette bordet er minst 30 cm høyt.
De to attributter og lagt til plass rundt venstre / høyre side (vspace) og topp / bunn (vspace) på bordet. Du bør bruke stilegenskapen i stedet.
For å angi vertikalt mellomrom til 20 piksler og det horisontale rommet til 40 piksler, skriv:
<> style = "margin: 20px 40px;" Denne tabellen har en vspace på 20 piksler og en hspace på 40 piksler.
Attributtet er en boolesk attribut som definerer om innholdet i tabellen skal vikle i kanten av foreldreelementet eller -vinduet eller tvinge horisontal rulling. I stedet bør du definere innpakningsegenskapene til hver tabellcelle ved hjelp av CSS-egenskapen.
For å lage en kolonne med mye tekst ikke vikle, 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 vikle til neste linje, men i stedet tvinge nettleservinduet til å rulle horisontalt for å se alt innholdet.
Til slutt definerer attributten hvordan innholdet i hver celle skal justere 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 legge merke til effekten av denne stilen med mindre cellens innhold er mindre enn ledig plass som er opprettet av andre større celler.
For å tvinge en celle til å justere til bunnen (i stedet for midten som standard), skriv:
Denne cellen er lengre enn resten, og det vil 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.
