HTML-tabelattributter giver dig meget mere kontrol over HTML-tabeller. Der er mange attributter til rådighed for tabeller for at gøre dem mere interessante og ændre udseendet af din side.
HTML TABLE Element Attributes
I HTML5 bruger elementet de globale attributter og en anden attribut:. Og det er ændret til kun at have værdien af 1 eller tom (dvs. border = ""). Hvis du vil ændre bredden af grænsen, skal du bruge border-width CSS ejendom.
Se nedenfor for at lære om de gyldige HTML5-tabelattributter.
Der er også flere attributter, der er en del af HTML 4.01-specifikationen, der er blevet forældet i HTML5:
- Brug CSS
polstringejendom på bordetTDogTHelementer. - - Brug CSS-ejendommen
border-spacingpå bordet. - Brug CSS-stilarter
border-farve: sort;ogborder-stylepå bordet. - Brug CSS-stilarter
border-farve: sort;ogborder-stylepå de relevante elementer i bordet. - -I stedet skal du beskrive bordets struktur i en
BILLEDTEKSTeller sæt hele bordet i enFIGURog beskriver det i aFIGCAPTION. Alternativt kan du forenkle bordets struktur, så der ikke er nogen forklaring. - Brug CSS
breddeejendom.
Og en attribut, der blev udskrevet i HTML 4.01 og også forældet i HTML5.
Få mere at vide om HTML 4.01 TABLE attributterne.
tilpasseBrug CSSmargenejendom i stedet.
Der er også flere attributter, der ikke er en del af en HTML-specifikation. Brug disse attributter, hvis du ved, at de browsere, du understøtter, kan håndtere dem, og du er ligeglad med gyldig HTML.
- - Brug CSS-ejendommen
baggrundsfarvei stedet. bordercolor- Brug CSS-ejendommenborder-colori stedet.bordercolorlight- Brug CSS-ejendommenborder-colori stedet.bordercolordark- Brug CSS-ejendommenborder-colori stedet.cols-Der er ikke noget alternativ til denne attribut.højde- Brug CSS-ejendommenhøjdei stedet.- - Brug CSS-ejendommen
margeni stedet. - - Brug CSS-ejendommen
margeni stedet. - - Brug CSS-ejendommen
hvidt rumi stedet. - - Brug CSS-ejendommen
vertical-aligni stedet.
Få mere at vide om de Browser-specifikke TABLE-attributter.
HTML5 TABLE Element Attributes
Som nævnt ovenfor er der kun én egenskab ud over de globale attributter, der er gyldig på en HTML5 BORD element: grænse.
Det grænse attribut bruges til at definere en grænse rundt i hele tabellen og alle cellerne i den. Der var et spørgsmål om, hvorvidt det ville indgå i HTML5-specifikationen, men det var fordi det gav oplysninger om bordstrukturen, ud over simpelthen stilimplikationer.
For at tilføje grænse attribut, du indstiller værdien til 1 hvis der er en grænse og tom (eller forlade attributten), hvis det ikke er tilfældet. De fleste browsere vil også støtte 0 uden grænser og enhver anden heltalsværdi (2, 3, 30, 500 osv.) for at angive grænsens bredde i pixels, men dette er forældet i HTML5. I stedet skal du bruge CSS grænsestil egenskaber til at definere grænsebredden og andre stilarter.
For at oprette et bord med en grænse, skriv:
border = "1" >
Dette er et bord med en kant
Der er HTML 4.01 attributter, der er forældede i HTML5. Hvis du planlægger at skrive HTML 4.01-dokumenter, kan du lære dem, ellers kan du ignorere dem. De fleste af disse attributter har alternativer, der er beskrevet ovenfor.
Vi beskriver attributterne til elementet, der er gyldige i HTML5 (og HTML 4.01). Dette beskriverBORD attributter, der er gyldige i HTML 4.01, men er forældede i HTML5. Hvis du stadig skriver HTML 4.01-dokumenter, kan du bruge disse attributter, men de fleste af dem har alternativer, der gør dine sider mere fremtidssikrede, når du flytter til HTML5.
Valid HTML 4.01 Attributter
Den egenskab, vi beskrev ovenfor. Den eneste forskel i HTML 4.01 fra HTML5 er, at du kan angive et helt heltal (0, 1, 2, 15, 20, 200 osv.) For at definere bredden af grænsen i pixels.
For at opbygge et bord med en 5px grænse, skriv:
<> border = "5" > Denne tabel har en 5px grænse.
Se et eksempel på to borde med grænser.
Attributten definerer mængden af mellemrum mellem cellegrænser og indholdet af cellen. Standard er to pixels. Indstilcellpadding til0 hvis du ikke ønsker mellemrum mellem indhold og grænser.
For at indstille cellepolstringen til 20, skriv:
<> cellpadding = "20" > Denne tabel har en cellpadding af 20. Cellegrænser adskilles med 20 pixels.
Se et eksempel på et bord med celleplader
Attributten definerer mængden af mellemrum mellem tabelcellerne og celleindholdet. Synes godt omcellpadding, er standardindstillingen sat til to pixels, så du skal indstille den0 hvis du ikke ønsker nogen celleafstand.
For at tilføje celleafstand til et bord, skriv:
<> cellspacing = "20" > Denne tabel har en cellspacing af 20. Celler vil blive adskilt med 20 pixels.
Se en tabel med celleafstand
Attributten identificerer, hvilke dele af grænsen der omgiver en tabels udside, vil blive synlige.Du kan ramme dit bord på alle fire sider, en side, top og bund, venstre og højre eller ingen.
Her er HTML for en tabel med kun den venstre side grænse:
frame = "lhs" >
Denne tabel vil have kun den venstre side indrammet.
Og et andet eksempel med bundrammen:
ramme = "nedenfor" >
Denne tabel har en ramme på bunden.
Tjek nogle borde med rammer
Attributet ligner påramme attribut, kun det påvirker grænserne omkring bordets celler. Du kan indstille regler på alle celler, mellem kolonner, mellem grupper somtbody ogtfoot eller ingen.
At bygge et bord med kun linjer mellem rækkerne, skriv:
regler = "rækker" >
Denne 4x4 bord har rækkerne ikke kolonner skitseret med regler attribut.
Og en anden med linjer mellem kolonnerne:
regler = "cols" >
Dette er et bord hvor er kolonner er fremhævet
Her er et eksempel på et bord med regler
Attributten indeholder oplysninger om bordet til skærmlæsere og andre brugeragenter, der kan have problemer med at læse tabeller. At brugeResumé attribut, du skriver en kort beskrivelse af tabellen og sætter den som værdien af attributten. Resuméet vises ikke på websiden i de fleste standardwebbrowsere.
Sådan skriver du et simpelt bord med et resumé:
<> summary = "Dette er en prøve tabel, der indeholder fyldstofinformation. Formålet med denne tabel er at demonstrere et resumé." > kolonne 1 række 1 kolonne 2 række 1 kolonne 1 række 2 kolonne 2 række 2
Se et bord med et resumé
Attributten definerer bordets bredde i enten pixel eller som en procentdel af beholderelementet. Hvisbredde er ikke indstillet, vil bordet kun optage så meget plads som det er nødvendigt at vise indholdet med en maksimal bredde det samme som bredden af overordnet element.
For at opbygge et bord med en bestemt bredde i pixels, skriv:
<> width = "300" > Denne tabel er 80% af bredden af beholderen den er i.
Og for at opbygge et bord med en bredde, der er en procentdel af overordnet element, skriv:
<> width = "80%" > Denne tabel er 80% af bredden af beholderen den er i.
Se et eksempel på et bord med en bredde
Uddateret HTML 4.01 TABLE Egenskab
Der er en egenskab afBORD element, der er udskrevet i HTML 4.01 og forældet i HTML5:tilpasse. Denne egenskab lader dig angive, hvor tabellen skal placeres på siden i forhold til den tekst, der ligger ved siden af den. Denne attribut er blevet udskrevet i HTML 4.01, og du bør undgå at bruge den. I stedet skal du bruge CSS-ejendommen ellermargen-venstre: auto; ogmargin-højre: auto; stilarter. Detflyde ejendom giver dig et resultat der er tættere på hvadtilpasse attribut, men det kan påvirke den måde, hvorpå resten af sideindholdet vises. Detmargin-højre: auto; ogmargen-venstre: auto; er hvad W3C anbefaler som et alternativ.
Her er et udskrevet eksempel ved hjælp aftilpasse attribut:
<> align = "right" > Denne tabel er lige justeret Tekst flyder rundt om det til venstre
Se et udskrevet eksempel ved hjælp aftilpasse attribut.
Og for at få den samme effekt med gyldig (ikke-afskrevet) HTML, skriv:
<> style = "float: højre;" > Denne tabel er lige justeret Tekst flyder rundt om det til venstre
Det følgende forklarerBORD attributter, der ikke er en del af en HTML-specifikation.
De tidligere oplysninger beskriver attributter af HTML-elementet, der er gyldige i HTML 4.01, men er forældede i HTML5.
Det følgende beskriverBORD attributter, der ikke er gyldige i en gældende specifikation. Hvis du er ligeglad med, om dine sider validerer, og dine brugere bruger en browser, der understøtter disse elementer, kan du bruge disse elementer. Men de fleste af dem er heller ikke understøttet i moderne browsere eller har alternativer, der er mere standardkompatible.
Vi anbefaler ikke at bruge disse attributter på dine HTML-tabeller.
Attributten er en gammel attribut, der var inkluderet, før CSS blev bredt støttet. Det giver dig mulighed for at ændre baggrundsfarven på bordet. Du kan indstille et farvenavn eller en hexadecimal kode. Denne egenskab fungerer stadig i mange browsere, men for fremtidssikret HTML skal du ikke bruge den og bruge CSS i stedet.
Det bedre alternativ til denne attribut er stilegenskaben.
For at ændre baggrundsfarven på et bord, skriv:
<> style = "background-color: #ccc;" > Denne tabel har en grå baggrund
Ligner påbgcolor attributten, denbordercolor attribut gør det muligt at ændre attributtenes farve. Denne attribut understøttes kun af Internet Explorer. I stedet skal du bruge egenskaben for grænsekleurstile.
For at ændre farven på bordets bord, skriv:
style = "border-color: red;" >
Denne tabel har en rød kant.
Detbordercolorlight ogbordercolordark Attributter blev inkluderet i Internet Explorer, så du kan oprette en 3D-ramme rundt om bordet. Men fra og med IE8 og op, understøttes dette kun i IE7 Standards Mode og Quirks Mode. Microsoft siger, at disse egenskaber ikke længere understøttes.
For en kort tid, dencols attribut påBORD element blev foreslået for at hjælpe browsere vide, hvor mange kolonner et bord havde. Forudsætningen var, at dette ville medvirke til at fremskynde udgivelsen af store tabeller. Men det blev kun implementeret af Internet Explorer, og fra og med IE8 og op, understøttes dette kun i IE7 Standards Mode og Quirks Mode.
Fordi der er enbredde attribut (forældet i HTML5) mange mennesker antog, at der var enhøjde attribut til tabeller også. Men fordi tabeller stemmer overens med bredden af deres indhold eller den definerede bredde i CSS ellerbredde attributten, højden kunne ikke begrænses. Så i stedet tillod browserehøjde attribut til at definere bordets minimumshøjde. Hvis bordet var højere end denne højde, ville det vise højere. Men du skal bruge ejendommen
Med CSShøjde ejendom du kan begrænse højden, hvis du også bruger CSS-ejendommen til at definere, hvad der sker med overskydende indhold.
For at indstille minimumshøjden på et bord, skriv:
<> style = "height: 30em;" > Denne tabel er mindst 30 ems høj.
De to attributter og tilføjet plads omkring venstre / højre side (hspace) og top / bottom (vspace) af bordet. Du skal bruge stilegenskabet i stedet.
For at indstille det vertikale rum til 20 pixels og det vandrette rum til 40 pixels, skriv:
<> style = "margin: 20px 40px;" Denne tabel har en vspace på 20 pixels og en hspace på 40 pixels.
Attributten er en boolsk attribut, der definerer om indholdet af tabellen skal vikle i kanten af overordnet element eller vindue eller tvinge vandret rullning. I stedet skal du definere indpakningsegenskaberne for hver tabelcelle ved hjælp af CSS-egenskaben.
For at lave en kolonne med en masse tekst ikke wrap, skriv:
<> style = "white-space: nowrap;" > Dette er en kolonne med et ton indhold. Men selvom den er bredere end beholderen, skal teksten ikke pakkes til den næste linje, men i stedet tvinge browservinduet til at rulle vandret for at se alt indhold.
Endelig definerer attributten, hvordan indholdet af hver celle skal justeres lodret i cellen. I stedet for denne ugyldige attribut skal du bruge CSS-egenskaben på hver celle, du vil ændre justeringen af. Du vil ikke bemærke virkningerne af denne stil, medmindre celleindholdet er mindre end det ledige rum skabt af andre større celler.
For at tvinge en celle til at justere til bunden (i stedet for midten som standard), skriv:
Denne celle er længere end resten og så vil tvinge højden til at være højere. Så du vil se, at den lodret justerede celle er justeret til bunden. <> style = "vertical-align: bottom;" > Indhold nederst. Indhold i midten.
