HTML-tabellattribut ger dig mycket mer kontroll över HTML-tabeller. Det finns många attribut tillgängliga för tabeller för att göra dem mer intressanta och ändra utseendet på din sida.
HTML-TABELL Elementattribut
I HTML5 elementet använder de globala attributen och ett annat attribut och det har ändrats till att bara ha värdet 1 eller tomt (dvs border = ""). Om du vill ändra bredden på gränsen bör du använda gränsbredden CSS-egendom.
Se nedan för att lära dig mer om giltiga HTML5-tabellattribut.
Det finns också flera attribut som ingår i HTML 4.01-specifikationen som har blivit föråldrad i HTML5:
- —Använd CSS-stoppningsegenskapen på bordets TD- och TH-element.
- —Använd CSS-egenskapens gränsavstånd på bordet.
- —Använd CSS-stilar kantfärg: svart; och kantstil på bordet.
- —Använd CSS-stilar kantfärg: svart; och gränssnitt på lämpliga delar av bordet.
- —Istället bör du beskriva tabellens struktur i en CAPTION eller placera hela tabellen i en FIGUR och beskriva den i en FIGCAPTION. Alternativt kan du förenkla tabellens struktur så att ingen förklaring behövs.
- —Använd CSS-breddegenskapen.
Och ett attribut som utfasades i HTML 4.01 och också är föråldrat i HTML5.
- justera - Använd CSS-marginalegenskapen istället.
Det finns också flera attribut som inte ingår i någon HTML-specifikation. Använd dessa attribut om du vet att webbläsarna du stöder kan hantera dem och du inte bryr dig om giltig HTML.
- —Använd istället CSS-egenskapens bakgrundsfärg.
- bordercolor - Använd istället CSS-egenskapen border-color.
- bordercolorlight - Använd CSS-egenskapen border-color istället.
- bordercolordark - Använd CSS-egenskapen border-color istället.
- cols — Det finns inget alternativ till detta attribut.
- höjd - Använd CSS-egenskapens höjd istället.
- —Använd istället CSS-egenskapsmarginalen.
- — Använd istället CSS-egenskapen white-space.
- — Använd istället CSS-egenskapen lodrätt.
HTML5 TABLE Elementattribut
Som vi nämnde ovan finns det bara ett attribut, utöver de globala attributen, som är giltigt på ett HTML5 TABLE-element: gräns.
Gränsattributet används för att definiera en ram runt hela tabellen och alla celler i den. Det fanns en viss fråga om det skulle inkluderas i HTML5-specifikationen, men det förblev eftersom det gav information om tabellstrukturen, utöver bara stilkonsekvenser.
För att lägga till gränsattributet anger du värdet till 1 om det finns en gräns och tomt (eller lämnar attributet) om det inte finns. De flesta webbläsare stöder också 0 utan gränser och alla andra heltal (2, 3, 30, 500, etc.) för att deklarera gränsens bredd i pixlar, men detta är föråldrat i HTML5. Istället bör du använda CSS-gränssnittsegenskaper för att definiera kantbredd och andra stilar.
För att skapa en tabell med en kant, skriv:
border = "1">
Detta är ett bord med en gräns
Detta beskriver TABLE-attributen som är giltiga i HTML 4.01, men som är föråldrade i HTML5. Om du fortfarande skriver HTML 4.01-dokument kan du använda dessa attribut, men de flesta av dem har alternativ som gör dina sidor mer framtidssäkra för när du flyttar till HTML5.
Giltiga HTML 4.01-attribut
Attributet vi beskrev ovan. Den enda skillnaden i HTML 4.01 från HTML5 är att du kan ange valfritt heltal (0, 1, 2, 15, 20, 200 etc.) för att definiera bredden på gränsen i pixlar.
För att bygga ett bord med en 5 pixlar kant, skriv:
border = "5">
Denna tabell har en 5 pixlar kant.
Attributet definierar mängden utrymme mellan cellgränser och cellens innehåll. Standard är två pixlar. Ställ in cellfyllningen på 0 om du inte vill ha något mellanrum mellan innehållet och kanterna.
För att ställa in celldynan till 20, skriv:
cellpadding = "20">
Denna tabell har 20 celladdningar.
Cellgränser separeras med 20 pixlar.
Visa ett exempel på en tabell med cellfyllning.
Attributet definierar mängden utrymme mellan tabellcellerna och cellinnehållet. Liksom cellpadding är standardinställningen två pixlar, så du måste ställa in den på 0 om du inte vill ha något cellavstånd.
För att lägga till cellavstånd i en tabell, skriv:
cellspacing = "20">
Denna tabell har ett cellavstånd på 20.
Cellerna separeras med 20 pixlar.
Attributet identifierar vilka delar av gränsen som omger utsidan av en tabell som kommer att synas. Du kan ställa in ditt bord på alla fyra sidor, vilken sida som helst, upp och ned, vänster och höger eller ingen.
Här är HTML-koden för en tabell med endast den vänstra sidokanten:
frame = "lhs">
Det här bordet
kommer att ha
bara
vänster sida inramad.
Och ett annat exempel med den nedre ramen:
frame = "below">
Denna tabell har en ram på botten.
Kolla in några bord med ramar.
Attributet liknar attributet ram, bara det påverkar gränserna runt cellerna i tabellen. Du kan ställa in regler på alla celler, mellan kolumner, mellan grupper som TBODY och TFOOT eller ingen.
För att bygga en tabell med endast linjer mellan raderna, skriv:
regler = "rader">
Detta 4x4 bord har
raderna inte kolumner
beskrivs med
regler attribut.
Och en annan med linjer mellan kolumnerna:
regler = "cols">
Detta är
ett bord
där den
kolumner
är
markerad
De attribut ger information om tabellen för skärmläsare och andra användaragenter som kan ha problem med att läsa tabeller. För att använda sammanfattningsattributet skriver du upp en kort beskrivning av tabellen och anger den som värdet för attributet. Sammanfattningen visas inte på webbsidan i de flesta vanliga webbläsare.
Så här skriver du en enkel tabell med en sammanfattning:
summary = "Detta är en provtabell som innehåller fyllnadsinformation. Syftet med denna tabell är att visa en sammanfattning. ">
kolumn 1 rad 1.
kolumn 2 rad 1.
kolumn 1 rad 2.
kolumn 2 rad 2.
Attributet definierar bredden på tabellen i antingen pixlar eller som en procentandel av behållarelementet. Om bredden inte är inställd tar tabellen bara så mycket utrymme som den behöver för att visa innehållet, med en maximal bredd som samma som bredden på det överordnade elementet.
För att bygga en tabell med en viss bredd i pixlar, skriv:
width = "300">
Den här tabellen är 80% av behållarens bredd.
Och för att bygga en tabell med en bredd som är en procentandel av det överordnade elementet, skriv:
width = "80%">
Den här tabellen är 80% av behållarens bredd.
Föråldrad HTML 4.01 TABELLattribut
Det finns ett attribut för TABLE-elementet som är utfasat i HTML 4.01 och föråldrat i HTML5: align. Med detta attribut kan du ställa in var tabellen ska placeras på sidan i förhållande till texten bredvid den. Detta attribut har upphört att gälla i HTML 4.01, och du bör undvika att använda det. Istället bör du använda CSS-egenskapen eller marginalen till vänster: auto; och marginal-höger: auto; stilar. Float-egenskapen ger dig ett resultat som är närmare vad attributet align tillhandahöll, men det kan påverka hur resten av sidinnehållet visas. Marginalen till höger: auto; och marginal till vänster: auto; är vad W3C rekommenderar som ett alternativ.
Här är ett föråldrat exempel som använder attributet align:
align = "right">
Denna tabell är högerjusterad.
Text flyter runt den till vänster.
Och för att få samma effekt med giltig (ej utfasad) HTML, skriv:
style = "float: right;">
Denna tabell är högerjusterad.
Text flyter runt den till vänster.
Föråldrade TABELLattribut
Den tidigare informationen beskriver attributen för HTML-elementet som är giltiga i HTML 4.01 men är föråldrade i HTML5.
Följande beskriver TABLE-attribut som inte är giltiga i någon aktuell specifikation. Om du inte bryr dig om huruvida dina sidor valideras och att dina användare använder en webbläsare som stöder dessa element, kan du använda dessa element. Men de flesta av dem stöds antingen i moderna webbläsare eller har alternativ som är mer standardkompatibla.
Vi rekommenderar inte att du använder dessa attribut på dina HTML-tabeller.
Attributet är ett gammalt attribut som inkluderades innan CSS fick allmänt stöd. Det gör att du kan ändra tabellens bakgrundsfärg. Du kan ställa in ett färgnamn eller en hexadecimal kod. Det här attributet fungerar fortfarande i många webbläsare, men för framtidsskyddad HTML bör du inte använda den och istället använda CSS.
Det bättre alternativet till detta attribut är stilegenskapen.
För att ändra bakgrundsfärgen på en tabell, skriv:
stil = "bakgrundsfärg: #ccc;">
Denna tabell har en grå bakgrund.
På samma sätt som attributet bgcolor låter attributet bordercolor dig ändra färgen på attributet. Detta attribut stöds endast av Internet Explorer. Istället bör du använda egenskapen border-color style.
För att ändra färgen på bordets kant, skriv:
style = "border-color: red;">
Denna tabell har en röd kant.
Attributen bordercolorlight och bordercolordark inkluderades i Internet Explorer så att du kan skapa en 3D-ram runt ditt bord. Men från och med IE8 och uppåt stöds detta endast i IE7 Standards Mode och Quirks Mode. Microsoft säger att dessa egenskaper inte längre stöds.
Under en kort tid föreslogs attributet cols på TABLE-elementet för att hjälpa webbläsare att veta hur många kolumner en tabell hade. Utgångspunkten var att detta skulle hjälpa till att påskynda återgivningen av stora bord. Men det implementerades endast av Internet Explorer, och från och med IE8 och uppåt stöds detta endast i IE7-standardläge och quirks-läge.
Eftersom det finns ett breddattribut (föråldrat i HTML5) antog många att det också fanns ett höjdattribut för tabeller. Men eftersom tabeller överensstämmer med bredden på deras innehåll eller den definierade bredden i attributet CSS eller bredd, kunde höjden inte begränsas. Så istället tillät webbläsare attributet höjd att definiera tabellens minsta höjd. Om bordet var högre än den höjden skulle det visa sig högre. Men du bör använda fastigheten.
Med CSS-höjdegenskapen kan du begränsa höjden om du också använder CSS-egenskapen för att definiera vad som händer med överflödigt innehåll.
För att ställa in minsta höjd på ett bord, skriv:
stil = "höjd: 30 em;">
Denna tabell är minst 30 ems hög.
De två attributen och lagt till utrymme runt vänster / höger sida (hspace) och topp / botten (vspace) av tabellen. Du bör använda stilegenskapen istället.
För att ställa in det vertikala utrymmet till 20 pixlar och det horisontella utrymmet till 40 pixlar, skriv:
style = "margin: 20px 40px;"
Denna tabell har ett v-utrymme på 20 pixlar och ett h-utrymme på 40 pixlar.
Attributet är ett booleskt attribut som definierar om innehållet i tabellen ska lindas vid kanten av det överordnade elementet eller fönstret eller tvinga horisontell rullning. Istället bör du definiera inslagningsegenskaperna för varje tabellcell med CSS-egenskapen.
För att göra en kolumn med mycket text inte omslagen, skriv:
style = "white-space: nowrap;"> Detta är en kolumn med massor av innehåll. Men även om den är bredare än behållaren bör texten inte lindas till nästa rad utan istället tvinga webbläsarfönstret att rulla horisontellt för att se allt innehåll.
Slutligen definierar attributet hur innehållet i varje cell ska justeras vertikalt i cellen. I stället för detta ogiltiga attribut bör du använda CSS-egenskapen i varje cell du vill ändra justeringen av. Du kommer inte att märka effekterna av denna stil om inte cellens innehåll är mindre än det tillgängliga utrymmet som skapats av andra större celler.
För att tvinga en cell att anpassa sig till botten (snarare än mitten, som standard), skriv:
Den här cellen är längre än resten och kommer att tvinga höjden att bli högre. Så du kommer att se att den vertikalt inriktade cellen är inriktad mot botten.
style = "vertical-align: bottom;"> Innehåll längst ner.
Innehåll i mitten.