Atributy tabulky HTML vám poskytují mnohem větší kontrolu nad tabulkami HTML. Existuje mnoho atributů, které jsou pro tabulky k dispozici, aby byly zajímavější a změnily vzhled stránky.
Atributy elementu HTML TABLE
V prvku HTML5 element používá globální atributy a jeden další atribut:. A to se změnilo pouze na hodnotu 1 nebo prázdné (tj. border = ""). Pokud chcete změnit šířku ohraničení, měli byste použít hranice šířky Vlastnost CSS.
Níže naleznete informace o platných atributech tabulek HTML5.
Existuje také několik atributů, které jsou součástí specifikace HTML 4.01, které se v HTML5 staly zastaralými:
- -Použijte CSS
polstrovánímajetek na stolechTDaTHPrvky. - - Použijte vlastnost CSS
mezery mezi okrajina stole. - -Použijte styly CSS
hraniční barva: černá;ahraniční stylna stole. - -Použijte styly CSS
hraniční barva: černá;ahraniční stylo příslušných prvcích tabulky. - - Místo toho byste měli popsat strukturu tabulky v a
TITULEKnebo dát celý stůl do aPOSTAVAa popisuje to vOBRÁZEK. Alternativně byste mohli zjednodušit strukturu tabulky tak, aby nebylo třeba vysvětlit. - -Použijte CSS
šířkavlastnictví.
A jeden atribut, který byl v HTML 4.01 zastaralý a v HTML5 je zastaralý.
Další informace o atributech tabulky HTML 4.01.
zarovnat-Použijte CSSokrajvlastnictví.
Existuje také několik atributů, které nejsou součástí žádné specifikace jazyka HTML. Použijte tyto atributy, pokud víte, že prohlížeče, které podporujete, je mohou zpracovávat a nezáleží na platném kódu HTML.
- - Použijte vlastnost CSS
barva pozadímísto toho. bordercolor- Použijte vlastnost CSShranice barvymísto toho.bordercolorlight- Použijte vlastnost CSShranice barvymísto toho.bordercolordarkark- Použijte vlastnost CSShranice barvymísto toho.cols-Toto atribut neexistuje.výška- Použijte vlastnost CSSvýškamísto toho.- - Použijte vlastnost CSS
okrajmísto toho. - - Použijte vlastnost CSS
okrajmísto toho. - - Použijte vlastnost CSS
bílý prostormísto toho. - - Použijte vlastnost CSS
vertikální zarovnánímísto toho.
Další informace o atributech TABULKA specifických pro prohlížeč.
Atributy elementu HTML5 TABLE
Jak jsme uvedli výše, existuje pouze jeden atribut, který přesahuje globální atributy, který je platný v HTML5 STŮL živel: okraj.
The okraj atribut se používá k definování hranice kolem celé tabulky a všech buněk v ní. Byla nějaká otázka, zda by to bylo zahrnuto v specifikaci HTML5, ale zůstalo to proto, že poskytovalo informace o struktuře tabulky, přesahující stylové důsledky.
Přidání okraj atribut nastavíte hodnotu na 1 pokud existuje okraj a prázdný (nebo ponechat atribut), pokud tomu tak není. Většina prohlížečů bude také podporovat 0 pro žádné ohraničení a jakoukoli jinou celočíselnou hodnotu (2, 3, 30, 500 atd.) deklarovat šířku ohraničení v pixelech, ale toto je v HTML5 zastaralé. Namísto toho byste měli použít vlastnosti stylu ohraničení CSS pro definování šířky okraje a dalších stylů.
Chcete-li vytvořit tabulku s okrajem, napište:
border = "1" >
Toto je tabulka s okrajem
V atributu HTML5 jsou zastaralé atributy HTML 4.01. Pokud plánujete psát dokumenty HTML 4.01, můžete je naučit, jinak je můžete ignorovat. Většina těchto atributů má alternativy popsané výše.
Popisujeme atributy prvku, které jsou platné v HTML5 (a HTML 4.01). Toto popisujeSTŮL atributy, které jsou platné v HTML 4.01, ale v HTML5 jsou zastaralé. Pokud stále píšete dokumenty HTML 4.01, můžete použít tyto atributy, ale většina z nich má alternativy, které budou vaše stránky více v budoucnosti chráněné, když se přesunete na HTML5.
Platné atributy HTML 4.01
Atribut, který jsme popsali výše. Jediný rozdíl v HTML 4.01 z HTML5 je, že můžete určit libovolné celé celé číslo (0, 1, 2, 15, 20, 200 atd.) A definovat šířku okraje v pixelech.
Chcete-li vytvořit tabulku s okrajem 5px, napište:
<> border = "5" > Tato tabulka má okraj 5px.
Viz příklad dvou tabulek s okraji.
Atribut definuje velikost prostoru mezi hranicemi buněk a obsahem buňky. Výchozí hodnota je dva pixely. Nastavcellpadding na0 pokud nebudete mít žádný prostor mezi obsahem a hranicemi.
Chcete-li nastavit polstrování buněk na 20, napište:
<> cellpadding = "20" > Tato tabulka má a cellpadding z 20. Okénky buněk budou odděleny o 20 pixelů.
Podívejte se na příklad tabulky s kódováním buňky
Atribut definuje velikost prostoru mezi buňkami tabulky a obsahem buňky. Jakocellpadding, výchozí hodnota je nastavena na dva pixely, takže je musíte nastavit0 pokud nechcete žádné rozmezí buněk.
Chcete-li přidat tabulku mezi buňky, napište:
<> cellspacing = "20" > Tato tabulka má a cellspacing z 20. Buňky se oddělí 20 pixelů.
Viz tabulka s buňkami
Atribut identifikuje, které části hranice vně tabulky budou viditelné.Stůl můžete stínit na všech čtyřech stranách, na jedné straně, na horní a dolní straně, doleva a doprava nebo na žádné.
Zde je HTML pro tabulku s levým okrajem:
frame = "lhs" >
Tato tabulka budu mít pouze lemovaná rám.
A další příklad se spodním rámcem:
rám = "dolů" >
Tato tabulka obsahuje rámeček na spodní straně.
Podívejte se na některé stoly s rámečky
Atribut je podobný atributurám atribut, ale ovlivňuje pouze hranice kolem buněk tabulky. Můžete nastavit pravidla pro všechny buňky, mezi sloupci, mezi skupiny jakoTBODY aTFOOT nebo žádné.
Chcete-li vytvořit tabulku s řádky pouze mezi řádky, napište:
pravidla = "řádky" >
Tato tabulka 4x4 má řádky ne sloupce načrtnuty s atribut pravidla.
A další s čarami mezi sloupy:
pravidla = "cols" >
Tohle je stůl Kde sloupců jsou zvýrazněno
Zde je příklad tabulky s pravidly
Atribut poskytuje informace o tabulce pro čtečky obrazovky a další uživatelské agenty, které by mohly mít problémy se čtením tabulek. Použitísouhrn atribut, napíšete stručný popis tabulky a dejte to jako hodnotu atributu. Souhrn se nezobrazí na webové stránce ve většině standardních webových prohlížečů.
Zde je návod, jak napsat jednoduchou tabulku se souhrnem:
<> summary = "Toto je ukázková tabulka, která obsahuje informace o výplni. Účelem této tabulky je ukázat souhrn." > sloupec 1 řádek 1 sloupec 2 řádek 1 sloupec 1 řádek 2 sloupec 2 řádek 2
Zobrazení tabulky se souhrnem
Atribut definuje šířku tabulky buď v pixelech nebo jako procento prvku kontejneru. Pokudšířka není nastavena, tabulka zaberá pouze tolik místa, kolik potřebuje k zobrazení obsahu, přičemž maximální šířka je stejná jako šířka nadřazeného prvku.
Chcete-li vytvořit tabulku se specifickou šířkou v pixelech, napište:
<> šířka = "300" > Tato tabulka je 80% šířky kontejneru.
A postavit tabulku se šířkou, která je procentní podíl nadřazeného prvku, napište:
<> šířka = "80%" > Tato tabulka je 80% šířky kontejneru.
Viz příklad tabulky se šířkou
Zastaraný atribut HTML 4.01 TABLE
Je zde jeden atributSTŮL element, který je zastaven v HTML 4.01 a zastaralý v HTML5:zarovnat. Tento atribut umožňuje nastavit, kde má být tabulka umístěna na stránce vzhledem k textu, který je vedle ní. Tento atribut byl zastaven ve formátu HTML 4.01 a neměl byste jej používat. Místo toho byste měli použít vlastnost CSS nebomargin-left: auto; amargin-right: auto; stylů. Theplovák vlastnost vám dává výsledek, který je blíže k tomu, cozarovnat ale může ovlivnit způsob zobrazení zbývající části obsahu stránky. Themargin-right: auto; amargin-left: auto; jsou to, co W3C doporučuje jako alternativu.
Zde je zastaralý příklad s použitím příkazuzarovnat atribut:
<> align = "right" > Tato tabulka je správně zarovnána Text kolem něj proudí doleva
Viz zastaralý příklad pomocízarovnat atribut.
A abychom získali stejný efekt s platným (nepodporovaným) kódem HTML, napište:
<> style = "float: right;" > Tato tabulka je správně zarovnána Text kolem něj proudí doleva
Následující vysvětlujeSTŮL atributy, které nejsou součástí žádné specifikace jazyka HTML.
Předchozí informace popisuje atributy prvku HTML, které jsou platné v HTML 4.01, ale v HTML5 jsou zastaralé.
Následuje popisSTŮL atributy, které nejsou platné v žádné aktuální specifikaci. Pokud se nestaráte o to, zda vaše stránky ověřují a že uživatelé používají prohlížeč, který podporuje tyto prvky, můžete tyto prvky použít. Většina z nich je však buď nepodporována v moderních prohlížečích, nebo mají alternativy, které vyhovují standardům.
Nedoporučujeme používat tyto atributy na vašich tabulkách HTML.
Atribut je starý atribut, který byl zahrnut předtím, než byl CSS široce podporován. Umožňuje změnit barvu pozadí tabulky. Můžete nastavit název barvy nebo hexadecimální kód. Tento atribut stále funguje ve velkém počtu prohlížečů, ale pro HTML chráněný v budoucnosti byste jej neměli používat a místo toho použijte CSS.
Lepší alternativou k tomuto atributu je vlastnost stylu.
Chcete-li změnit barvu pozadí tabulky, napište:
<> style = "barva pozadí: #ccc;" > Tato tabulka má šedé pozadí
Podobně jakobgcolor atribut,bordercolor atribut umožňuje změnit barvu atributu. Tento atribut podporuje pouze aplikace Internet Explorer. Místo toho byste měli použít vlastnost stylu barvy ohraničení.
Chcete-li změnit barvu hranice tabulky, napište:
style = "border-color: červená;" >
Tato tabulka má červený okraj.
Thebordercolorlight abordercolordarkark byly v aplikaci Internet Explorer zahrnuty atributy, které vám umožňují vytvořit 3D hranici kolem vaší tabulky. Nicméně, od IE8 a nahoru, to je podporováno pouze v IE7 Standards Mode a Quirks Mode. Společnost Microsoft uvádí, že tyto vlastnosti již nejsou podporovány.
Krátce na tocols atribut naSTŮL element byl navržen, aby pomohl prohlížečům vědět, kolik sloupců má tabulka. Předpokladem bylo, že to pomůže urychlit vykreslování velkých stolů. Byl však implementován pouze aplikací Internet Explorer a od verze IE8 a výše je podporována pouze v režimu IE7 Standards Mode a Quirks Mode.
Protože existuje ašířka atribut (zastaralý v HTML5) mnoho lidí předpokládalo, že existujevýška atribut pro tabulky také. Ale protože tabulky odpovídají šířce jejich obsahu nebo definované šířky v CSS nebošířka atribut, výška nemohla být omezena. Takže místo toho prohlížeče umožnilyvýška Atribut definuje minimální výšku tabulky. Pokud by stůl byl vyšší než výška, ukázala by se vyšší. Ale měli byste použít nemovitost
S CSSvýška vlastnost můžete omezit výšku, pokud používáte vlastnost CSS také definovat, co se stane s libovolným nadbytečným obsahem.
Chcete-li nastavit minimální výšku na tabulku, napište:
<> styl = "výška: 30cm;" > Tato tabulka je nejméně 30 ems vysoká.
Tyto dva atributy a přidaný prostor kolem levé / pravé strany (hspace) a horní / spodní (vspace) tabulky. Místo toho byste měli použít vlastnost stylu.
Pro nastavení vertikálního prostoru na 20 pixelů a horizontálního prostoru na 40 pixelů napište:
<> style = "margin: 20px 40px;" Tato tabulka má vspace 20 pixelů a hspace 40 pixelů.
Atribut je booleovský atribut, který definuje, zda má obsah tabulky zabalit na okraj rodičovského prvku nebo okna nebo vynutit horizontální posouvání. Namísto toho byste měli definovat vlastnosti obalu každé buňky tabulky pomocí vlastností CSS.
Chcete-li vytvořit sloupec s množstvím textu, který není zabalen, napište:
<> style = "white-space: nowrap;" > Toto je sloupec s množstvím obsahu. Ale i když je širší než kontejner, text by se neměl zabalit do dalšího řádku, ale místo toho násilím, aby se okno prohlížeče pohybovalo vodorovně, aby se zobrazil celý obsah.
Nakonec atribut definuje, jak by měl být obsah každé buňky vertikálně vyrovnán uvnitř buňky. Namísto tohoto neplatného atributu byste měli použít vlastnost CSS v každé buňce, kterou chcete změnit zarovnání. Nevšimnete si účinků tohoto stylu, pokud obsah buňky není menší než dostupný prostor vytvořený jinými většími buňkami.
Chcete-li vynutit buňku, aby se zarovnávala se spodní částí (spíše než uprostřed, jako výchozí), napište:
Tato buňka je delší než zbytek, a tak vynutí vyšší výšku. Takže uvidíte, že vertikálně vyrovnaná buňka je zarovnána dole. <> style = "vertikálně-zarovnat: spodní;" > Obsah v dolní části stránky. Obsah ve středu.
