HTML-tabelattributter giver dig meget mere kontrol over HTML-tabeller. Der er mange attributter tilgængelige for tabeller for at gøre dem mere interessante og ændre udseendet på din side.
HTML TABLE Element Attributter
I HTML5 elementet bruger de globale attributter og en anden attribut, og det er ændret til kun at have værdien 1 eller tom (dvs. border = ""). Hvis du vil ændre bredden på grænsen, skal du bruge kantbredden 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-polstringsegenskaben på bordets TD- og TH-elementer.
- —Brug CSS-egenskabens grænseafstand på bordet.
- —Brug CSS-stilarter kantfarve: sort; og kantstil på bordet.
- —Brug CSS-stilarter kantfarve: sort; og kantstil på de relevante elementer i bordet.
- —I stedet skal du beskrive strukturen på tabellen i en BILLEDEBILDE eller sætte hele tabellen i en FIGUR og beskrive den i en FIGCAPTION. Alternativt kan du forenkle tabellens struktur, så der ikke er behov for en forklaring.
- —Brug egenskaben CSS-bredde.
Og en attribut, der blev udfaset i HTML 4.01 og også er forældet i HTML5.
- juster - Brug i stedet CSS margin-egenskaben.
Der er også flere attributter, der ikke er en del af nogen HTML-specifikation. Brug disse attributter, hvis du ved, at de browsere, du understøtter, kan håndtere dem, og du ikke er ligeglad med gyldig HTML.
- —Brug i stedet CSS-egenskabens baggrundsfarve.
- bordercolor - Brug CSS-egenskabens kantfarve i stedet.
- bordercolorlight - Brug i stedet CSS-egenskabens kantfarve.
- bordercolordark — Brug i stedet CSS-egenskabens kantfarve.
- cols — Der er intet alternativ til denne attribut.
- højde — Brug i stedet CSS-egenskabshøjden.
- —Brug i stedet CSS-ejendomsmargenen.
- —Brug i stedet CSS-egenskaben hvid-plads.
- —Brug i stedet CSS-ejendommen lodret.
HTML5 TABLE Element Attributter
Som vi nævnte ovenfor, er der kun en attribut ud over de globale attributter, der er gyldig på et HTML5 TABLE-element: border.
Grænseattributten bruges til at definere en ramme omkring hele tabellen og alle cellerne i den. Der var noget spørgsmål om, hvorvidt det ville blive inkluderet i HTML5-specifikationen, men det forblev, fordi det gav oplysninger om bordstrukturen ud over blot stilimplikationer.
For at tilføje kantattributten skal du indstille værdien til 1, hvis der er en kant og tom (eller udelade attributten), hvis den ikke er. De fleste browsere understøtter også 0 uden kant og enhver anden heltal (2, 3, 30, 500 osv.) Til at erklære kantens bredde i pixels, men dette er forældet i HTML5. I stedet bør du bruge egenskaber for CSS-kantstil til at definere kantbredden og andre typografier.
For at oprette en tabel med en kant skal du skrive:
border = "1">
Dette er et bord med en kant
Dette beskriver TABLE-attributter, der er gyldige i HTML 4.01, men som 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 vil gøre dine sider mere fremtidssikrede, når du flytter til HTML5.
Gyldige HTML 4.01-attributter
Den attribut, vi beskrev ovenfor. Den eneste forskel i HTML 4.01 fra HTML5 er, at du kan angive et hvilket som helst heltal (0, 1, 2, 15, 20, 200 osv.) For at definere bredden af rammen i pixels.
For at oprette et bord med en 5 px-kant skal du skrive:
border = "5">
Denne tabel har en 5 pixel kant.
Attributten definerer mængden af plads mellem cellegrænser og celleindholdet. Standard er to pixels. Indstil celleudfyldningen til 0, hvis du ikke ønsker noget mellemrum mellem indholdet og kanterne.
For at indstille cellepolstringen til 20, skriv:
cellpadding = "20">
Denne tabel har en cellpadding på 20.
Cellegrænser adskilles med 20 pixels.
Se et eksempel på en tabel med cellepadding.
Attributten definerer mængden af plads mellem tabelcellerne og celleindholdet. Ligesom cellpadding er standard indstillet til to pixels, så du skal indstille den til 0, hvis du ikke ønsker nogen celleafstand.
For at tilføje celleafstand til en tabel, skriv:
cellspacing = "20">
Denne tabel har et celleafstand på 20.
Celler adskilles med 20 pixels.
Attributten identificerer, hvilke dele af grænsen, der omgiver ydersiden af en tabel, der vil være synlige. Du kan indramme dit bord på alle fire sider, hvilken som helst side, top og bund, venstre og højre eller ingen.
Her er HTML-koden til en tabel med kun venstre sidekant:
frame = "lhs">
Denne tabel
vil have
kun den
venstre side indrammet.
Og et andet eksempel med bundrammen:
frame = "below">
Denne tabel har en ramme i bunden.
Tjek nogle tabeller med rammer.
Attributten ligner rammeattributten, kun den påvirker grænserne omkring cellerne i tabellen. Du kan indstille regler på alle celler, mellem kolonner, mellem grupper som TBODY og TFOOT eller ingen.
For at oprette en tabel med kun linjer mellem rækkerne, skriv:
regler = "rækker">
Dette 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
Det attribut giver information om tabellen til skærmlæsere og andre brugeragenter, der kan have problemer med at læse tabeller. For at bruge resumeattributten skriver du en kort beskrivelse af tabellen og sætter den som værdien af attributten. Resumeet vises ikke på websiden i de fleste standardwebbrowsere.
Sådan skriver du en simpel tabel med et resumé:
summary = "Dette er en eksempeltabel, der indeholder oplysninger om fyldstof. Formålet med denne tabel er at demonstrere et resume. ">
kolonne 1 række 1.
kolonne 2 række 1.
kolonne 1 række 2.
kolonne 2 række 2.
Attributten definerer bredden på tabellen i enten pixels eller som en procentdel af containerelementet. Hvis bredden ikke er indstillet, optager tabellen kun så meget plads, som den har brug for til at vise indholdet, med en maksimal bredde, der er den samme som bredden på det overordnede element.
For at oprette en tabel med en bestemt bredde i pixels skal du skrive:
width = "300">
Denne tabel er 80% af bredden på den container, den er i.
Og for at oprette en tabel med en bredde, der er en procentdel af det overordnede element, skriv:
width = "80%">
Denne tabel er 80% af bredden på den container, den er i.
Forældet HTML 4.01 TABLE Attribut
Der er en attribut for TABEL-elementet, der er udfaset i HTML 4.01 og forældet i HTML5: align. Denne attribut giver dig mulighed for at indstille, hvor tabellen skal placeres på siden i forhold til teksten ved siden af den. Denne attribut er udfaset i HTML 4.01, og du bør undgå at bruge den. I stedet skal du bruge egenskaben CSS eller margen til venstre: auto; og margen-højre: auto; stilarter. Float-ejendommen giver dig et resultat, der er tættere på, hvad linjeattributten leverede, men det kan påvirke den måde, hvorpå resten af sideindholdet vises. Margen-højre: auto; og margen til venstre: auto; er, hvad W3C anbefaler som et alternativ.
Her er et forældet eksempel ved hjælp af attributten align:
align = "right">
Denne tabel er højrejusteret.
Tekst flyder omkring den til venstre.
Og for at få den samme effekt med gyldig (ikke-udfaset) HTML, skriv:
style = "float: right;">
Denne tabel er højrejusteret.
Tekst flyder omkring den til venstre.
Forældede TABELattributter
De tidligere oplysninger beskriver attributter for HTML-elementet, der er gyldige i HTML 4.01, men som er forældede i HTML5.
Det følgende beskriver TABLE-attributter, der ikke er gyldige i nogen aktuel specifikation. Hvis du ikke er ligeglad med, om dine sider valideres, og dine brugere bruger en browser, der understøtter disse elementer, kan du bruge disse elementer. Men de fleste af dem understøttes enten ikke 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 blev medtaget, før CSS blev bredt understøttet. Det giver dig mulighed for at ændre baggrundsfarven på tabellen. Du kan indstille et farvenavn eller en hexadecimal kode. Denne attribut fungerer stadig i mange browsere, men til fremtidssikret HTML bør du ikke bruge den og i stedet bruge CSS.
Det bedre alternativ til denne attribut er stilegenskaben.
Hvis du vil ændre baggrundsfarven på en tabel, skal du skrive:
style = "baggrundsfarve: #ccc;">
Denne tabel har en grå baggrund.
Svarende til attributten bgcolor giver attributten bordercolor dig mulighed for at ændre farve på attributten. Denne attribut understøttes kun af Internet Explorer. I stedet skal du bruge egenskaben border-color style.
For at ændre farven på dit bords kant skal du skrive:
style = "border-color: red;">
Denne tabel har en rød kant.
Attributterne bordercolorlight og bordercolordark blev inkluderet i Internet Explorer for at give dig mulighed for at oprette en 3D-kant omkring dit bord. Fra og med IE8 og opefter understøttes dette kun i IE7 standardtilstand og Quirks Mode. Microsoft siger, at disse egenskaber ikke længere understøttes.
I kort tid blev cols-attributten på TABLE-elementet foreslået for at hjælpe browsere med at vide, hvor mange kolonner en tabel havde. Udgangspunktet var, at dette ville hjælpe med at fremskynde gengivelsen af store borde. Det blev dog kun implementeret af Internet Explorer, og fra og med IE8 og opefter understøttes dette kun i IE7 Standardtilstand og Quirks-tilstand.
Da der er en breddeattribut (forældet i HTML5), antog mange mennesker, at der også var en højdeattribut for tabeller. Men fordi tabeller svarer til bredden på deres indhold eller den definerede bredde i attributten CSS eller bredde, kunne højden ikke begrænses. Så i stedet tillod browsere højdeattributten at definere bordets mindste højde. Hvis bordet var højere end den højde, ville det vise sig højere. Men du skal bruge ejendommen.
Med egenskaben CSS-højde kan du begrænse højden, hvis du også bruger CSS-egenskaben 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 / bund (vspace) af tabellen. Du skal bruge stilegenskaben i stedet.
For at indstille det lodrette mellemrum til 20 pixels og det vandrette rum til 40 pixels, skriv:
style = "margin: 20px 40px;"
Denne tabel har et v-rum på 20 pixels og et h-rum på 40 pixels.
Attributten er en boolsk attribut, der definerer, om indholdet af tabellen skal vikles ved kanten af det overordnede element eller vindue eller tvinge vandret rulning. I stedet skal du definere indpakningsegenskaberne for hver tabelcelle ved hjælp af CSS-egenskaben.
For at få en kolonne med meget tekst, der ikke ombrydes, skal du skrive:
style = "white-space: nowrap;"> Dette er en kolonne med masser af indhold. Men selvom den er bredere end beholderen, bør teksten ikke vikles til den næste linje, men i stedet tvinge browservinduet til at rulle vandret for at se alt indholdet.
Endelig definerer attributten, hvordan indholdet af hver celle skal justeres lodret inden i cellen. I stedet for denne ugyldige attribut skal du bruge CSS-egenskaben i hver celle, du vil ændre justeringen af. Du bemærker ikke virkningerne af denne stil, medmindre celleindholdet er mindre end det ledige rum, der er oprettet af andre større celler.
For at tvinge en celle til at justere sig til bunden (snarere end midten, som standard), skriv:
Denne celle er længere end resten og vil derfor 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.