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 TABLE Element Attributes
I HTML5 använder elementet de globala attributen och ett annat attribut:. Och det har ändrats för att bara ha värdet av 1 eller tomt (d.v.s. border = ""). Om du vill ändra bredden på gränsen ska du använda gränsbredd CSS-egenskapen.
Se nedan för att lära dig om de giltiga HTML5-tabellattributen.
Det finns också flera attribut som ingår i HTML 4.01-specifikationen som har blivit föråldrad i HTML5:
- -Utnyttja CSS
stoppningegendom på bordetTDochTHelement. - -Använd CSS-egenskapen
border-avståndpå bordet. - -Använd CSS-stilar
kantfärg: svart;ochborder-stylepå bordet. - -Använd CSS-stilar
kantfärg: svart;ochborder-stylepå de lämpliga elementen i tabellen. - -I stället bör du beskriva bordets struktur i en
RUBRIKeller lägg hela bordet i enFIGURoch beskriver den i aFIGCAPTION. Alternativt kan du förenkla bordets struktur så att ingen förklaring behövs. - -Utnyttja CSS
breddfast egendom.
Och ett attribut som avlägsnades i HTML 4.01 och är också föråldrat i HTML5.
Läs mer om HTML 4.01 TABLE attributen.
justera-Utnyttja CSSmarginalegendom istället.
Det finns också flera attribut som inte ingår i någon HTML-specifikation. Använd dessa attribut om du vet att de webbläsare du stöder kan hantera dem och du bryr dig inte om giltig HTML.
- -Använd CSS-egenskapen
bakgrundsfärgistället. gräns färg-Använd CSS-egenskapengräns färgistället.bordercolorlight-Använd CSS-egenskapengräns färgistället.bordercolordark-Använd CSS-egenskapengräns färgistället.cols-Det finns inget alternativ till det här attributet.höjd-Använd CSS-egenskapenhöjdistället.- -Använd CSS-egenskapen
marginalistället. - -Använd CSS-egenskapen
marginalistället. - -Använd CSS-egenskapen
white-spaceistället. - -Använd CSS-egenskapen
vertikal-alignistället.
Läs mer om de specifika TABLE-attributen för webbläsare.
HTML5 TABLE Element Attributes
Som vi nämnde ovan finns det bara ett attribut, utöver de globala attributen, som är giltigt på en HTML5 TABELL element: gräns.
De gräns attribut används för att definiera en kant runt hela tabellen och alla celler i den. Det fanns en fråga om huruvida det skulle ingå i HTML5-specifikationen, men det förblir eftersom det gav information om bordstrukturen, utöver helt enkelt stilimplikationer.
För att lägga till gräns attribut, du anger värdet till 1 om det finns en gräns och tom (eller lämna av attributet) om det inte finns det. De flesta webbläsare kommer också att stödja 0 för ingen kant och något annat heltal värde (2, 3, 30, 500, etc) för att deklarera gränsen 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 ett bord med en gräns, skriv:
border = "1" >
Detta är ett bord med en gräns
Det finns HTML 4.01-attribut som är föråldrade i HTML5. Om du planerar att skriva HTML 4.01-dokument kan du lära dig dem, annars kan du ignorera dem. De flesta av dessa attribut har alternativ som beskrivs ovan.
Vi beskriver attributen för det element som gäller i HTML5 (och HTML 4.01). Detta beskriverTABELL attribut som är giltiga i HTML 4.01, men är föråldrade i HTML5. Om du fortfarande skriver HTML 4.01-dokument kan du använda dessa attribut, men de flesta har alternativ som gör dina sidor mer framtidssäkrade när du flyttar till HTML5.
Valid HTML 4.01 Attribut
Attributet vi beskrev ovan. Den enda skillnaden i HTML 4.01 från HTML5 är att du kan ange ett 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 5px kant, skriv:
<> border = "5" > Denna tabell har en 5-sidig kant.
Se ett exempel på två bord med gränser.
Attributet definierar mängden utrymme mellan cellgränserna och innehållet i cellen. Standardvärdet är två pixlar. Ställ incellpadding till0 om du inte vill ha något mellanrum mellan innehåll och gränser.
För att ställa in cellplattan till 20, skriv:
<> cellpadding = "20" > Denna tabell har en cellpadding av 20. Cellgränserna kommer att separeras med 20 pixlar.
Visa ett exempel på ett bord med cellpadding
Attributet definierar mängden utrymme mellan tabellcellerna och cellinnehållet. Tycka omcellpaddingStandarden är inställd på två pixlar, så du måste ställa in den0 om du inte vill ha någon cellavstånd.
För att lägga till cellavstånd till ett bord skriver du:
<> cellspacing = "20" > Denna tabell har en cellspacing av 20. Cellerna kommer att separeras med 20 pixlar.
Se en tabell med cellutrymme
Attributet identifierar vilka delar av gränsen som omger utsidan av ett bord kommer att vara synliga.Du kan rama ditt bord på alla fyra sidor, någon sida, topp och botten, vänster och höger, eller ingen.
Här är HTML för en tabell med endast gränsen till vänster:
ram = "LHS" >
Det här bordet kommer att ha bara inramad vänster sida.
Och ett annat exempel med bottenramen:
ram = "nedan" >
Denna tabell har en ram längst ner.
Kolla in några bord med ramar
Attributet liknarram attribut, det påverkar bara gränserna runt bordets celler. Du kan ställa in regler på alla celler, mellan kolumner, mellan grupper somTBODY ochTFOOT eller ingen.
För att bygga ett bord med rader bara mellan raderna skriv:
regler = "rader" >
Detta 4x4 bord har raderna inte kolumner skisserad med regler attribut
Och en annan med linjer mellan kolumnerna:
regler = "cols" >
Detta är ett bord där det kolonner är markerad
Här är ett exempel på ett bord med regler
Attributet ger information om tabellen för skärmsläsare och andra användaragenter som kan ha problem med att läsa tabeller. Att användasammanfattning Attribut, du skriver upp en kort beskrivning av tabellen och sätter den som värdet på attributet. Sammanfattningen visas inte på webbsidan i de flesta vanliga webbläsare.
Så här skriver du ett enkelt bord med en sammanfattning:
<> summary = "Detta är en provtabell som innehåller fyllnadsinformation. Syftet med tabellen är att visa en sammanfattning." > kolumn 1 rad 1 kolumn 2 rad 1 kolumn 1 rad 2 kolumn 2 rad 2
Visa ett bord med en sammanfattning
Attributet definierar bordets bredd i antingen pixlar eller i procent av behållarelementet. Ombredd är inte inställd, kommer tabellen att ta upp så mycket utrymme som det behöver för att visa innehållet, med en maximal bredd som samma som bredden på moderelementet.
För att skapa ett bord med en viss bredd i pixlar skriver du:
<> width = "300" > Denna tabell är 80% av behållarens bredd.
Och för att bygga ett bord med en bredd som är en procentandel av moderelementet, skriv:
<> width = "80%" > Denna tabell är 80% av behållarens bredd.
Se ett exempel på ett bord med en bredd
Utdaterad HTML 4.01 TABLE Attribut
Det finns ett attribut avTABELL element som avlägsnas i HTML 4.01 och föråldrad i HTML5:justera. Med det här attributet kan du ange var tabellen ska placeras på sidan i förhållande till texten som ligger bredvid den. Detta attribut har avlägsnats i HTML 4.01, och du bör undvika att använda den. I stället bör du använda CSS-egenskapen ellermarginal-vänster: auto; ochmarginal-höger: auto; stilar. Deflyta egendom ger dig ett resultat som ligger närmare vadjustera attribut som tillhandahålls, men det kan påverka hur resten av sidinnehållet visas. Demarginal-höger: auto; ochmarginal-vänster: auto; är vad W3C rekommenderar som ett alternativ.
Här är ett förfallet exempel med hjälp avjustera attribut:
<> align = "right" > Denna tabell är rätt inriktad Text flyter runt det till vänster
Se ett utmatat exempel med hjälp avjustera attribut.
Och för att få samma effekt med giltig (icke-deprecerad) HTML, skriv:
<> style = "float: right;" > Denna tabell är rätt inriktad Text flyter runt det till vänster
Följande förklararTABELL attribut som inte ingår i någon HTML-specifikation.
Den tidigare informationen beskriver attribut för HTML-elementet som är giltiga i HTML 4.01 men är föråldrade i HTML5.
Följande beskriverTABELL attribut som inte är giltiga i någon aktuell specifikation. Om du inte bryr dig om dina sidor validerar och användarna använder en webbläsare som stöder dessa element kan du använda dessa element. Men de flesta av dem stöds antingen inte 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 stöddes allmänt. Det låter dig ändra bakgrundsfärgen på bordet. Du kan ange 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 använda CSS istället.
Det bättre alternativet till detta attribut är stilegenskapen.
För att ändra bakgrundsfärgen på ett bord skriver du:
<> style = "background-color: #ccc;" > Denna tabell har en grå bakgrund
Liknande tillbgcolor attribut,gräns färg attributet kan du ändra attributets färg. Det här attributet stöds endast av Internet Explorer. Istället bör du använda egenskapen för gränsvärldsstil.
För att ändra färgen på bordets bord, skriv:
style = "border-color: red;" >
Denna tabell har en röd kant.
Debordercolorlight ochbordercolordark attribut ingår i Internet Explorer så att du kan skapa en 3D-gräns runt bordet. Men från och med IE8 och uppåt stöds detta bara i IE7 Standards Mode och Quirks Mode. Microsoft säger att dessa egenskaper inte längre stöds.
För en kort tid, dencols attribut påTABELL element föreslogs för att hjälpa webbläsare att veta hur många kolumner ett bord hade. Förutsättningen var att detta skulle hjälpa till att påskynda rendering av stora bord. Men det implementerades bara av Internet Explorer, och från och med IE8 och uppåt stöds detta bara i IE7 Standards Mode och Quirks Mode.
Eftersom det finns abredd attribut (föråldrad i HTML5) många antog att det fanns enhöjd attribut för tabeller också. Men eftersom tabellerna överensstämmer med bredden på deras innehåll eller den definierade bredden i CSS ellerbredd attribut, höjden kunde inte begränsas. Så i stället tillåte webbläsarehöjd attribut att definiera minsta höjden på tabellen. Om bordet var högre än den höjden skulle det visa sig längre. Men du borde använda fastigheten
Med CSShöjd egendom du kan begränsa höjden om du också använder CSS-egenskapen för att definiera vad som händer med allt överskott.
För att ställa in minsta höjd på ett bord, skriv:
<> style = "height: 30em;" > Denna tabell är minst 30 cm hög.
De två attributen och extra utrymme runt vänster / höger sida (hspace) och topp / botten (vspace) av bordet. Du borde använda stilegenskapen i stä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 en vspace på 20 pixlar och en hspace på 40 pixlar.
Attributet är ett booleskt attribut som definierar om innehållet i tabellen ska vikas i kanten av moderelementet eller fönstret eller tvinga horisontell rullning. I stället bör du definiera wrappegenskaperna för varje tabellcell med hjälp av CSS-egenskapen.
Om du vill göra en kolumn med mycket text inte wrap, 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 vikas till nästa rad, men i stä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 inriktas vertikalt i cellen. Istället för det här ogiltiga attributet ska du använda CSS-egenskapen på varje cell som du vill ändra justeringen av. Du kommer inte märka effekterna av denna stil om inte cellens innehåll är mindre än tillgängligt utrymme som skapats av andra större celler.
För att tvinga en cell att röra sig till botten (i stället för mitten som standard) skriver du:
Denna cell är längre än resten och det kommer att tvinga höjden att vara högre. Så du kommer se att den vertikalt inriktade cellen är inriktad på botten. <> style = "vertical-align: bottom;" > Innehåll längst ner. Innehåll i mitten.
