Získat co nejvíce z tabulek HTML naučením atributů tabulky
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 změnila se pouze hodnota 1 nebo prázdná (tj. Hranice = ""). Chcete-li změnit šířku ohraničení, použijte vlastnost CSS pro šířku ohraničení.
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 vlastnost vycpávky CSS na prvky tabulky TD a TH.
- - Použijte mezery mezi okraji vlastností CSS na tabulce.
- - Použití stylů CSS ohraničení-barva: černá; a hraniční styl na stole.
- - Použití stylů CSS ohraničení-barva: černá; a hraniční styl na příslušných prvcích tabulky.
- - Namísto toho byste měli popsat strukturu tabulky v CAPTION nebo dát celý tabulku na OBRÁZEK a popsat jej v OBRÁZEK. Alternativně byste mohli zjednodušit strukturu tabulky tak, aby nebylo třeba vysvětlit.
- - Použijte vlastnost šířky CSS.
A jeden atribut, který byl v HTML 4.01 zastaralý a v HTML5 je zastaralý.
Další informace o atributech tabulky HTML 4.01.
- zarovnat - Místo toho použije vlastnost okraje CSS.
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.
- - místo toho použijte barvu pozadí CSS.
- bordercolor - místo toho použijte barvu vlastností CSS.
- bordercolorlight - místo toho použijte barvu vlastností CSS.
- bordercolordark - místo toho použijte barvu vlastností CSS.
- cols -Není zde žádná alternativa k tomuto atributu.
- height - místo toho použijte výšku vlastností CSS.
- -Místo toho použijte okraj vlastností CSS.
- -Místo toho použijte okraj vlastností CSS.
- - místo toho použijte vlastnost CSS white-space.
- - Použijte místo toho vlastnost CSS vertikální zarovnání.
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ý na elementu HTML5 TABLE: border.
Atribut ohraničení se používá k definování ohraničení 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.
Chcete-li přidat atribut hranice, nastavte hodnotu na hodnotu 1, pokud existuje rámeček a prázdný (nebo ponechte atribut), pokud neexistuje. Většina prohlížečů bude také podporovat hodnotu 0 bez hranic a libovolnou celočíselnou hodnotu (2, 3, 30, 500 atd.) Pro deklaraci šířky hranice v pixelech, ale v HTML5 je 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" >
Jedná se o tabulku 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 popisuje atributy TABLE, 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 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. Pokud chcete, aby mezi obsahem a okrajem nebyl žádný prostor, nastavte poklepání na buňku na hodnotu 0.
Chcete-li nastavit polstrování buněk na 20, napište:
cellpadding = "20" >
Tato tabulka má kódování buňky 20.
Okraje 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. Stejně jako buzení v buňce je výchozí hodnota nastavena na dva pixely, takže je nutné nastavit hodnotu 0, pokud nemáte žádné rozmezí buněk.
Chcete-li přidat tabulku mezi buňky, napište:
cellspacing = "20" >
Tato tabulka má buňkový prostor 20.
Buňky budou odděleny o 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
bude mít
pouze
rám vlevo.
A další příklad se spodním rámcem:
rám = "dolů" >
Tato tabulka obsahuje rámeček v dolní části.
Podívejte se na některé stoly s rámečky
Atribut je podobný atributu rámce, pouze to ovlivňuje okraje kolem buněk tabulky. Můžete nastavit pravidla pro všechny buňky, mezi sloupci, mezi skupiny jako TBODY a TFOOT nebo žádné.
Chcete-li vytvořit tabulku s řádky pouze mezi řádky, napište:
pravidla = "řádky" >
Tato tabulka 4x4 má
řádky ne sloupce
načrtnuté pomocí
atribut pravidla.
A další s čarami mezi sloupy:
pravidla = "cols" >
Toto je
tabulka
kde
sloupce
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. Chcete-li použít souhrnný atribut, napište krátký 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 obsahující informace o výplní. Úč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. Není-li šířka 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 tabulky = "300" >
Tato tabulka je 80% šířky kontejneru, ve kterém je vložen.
A postavit tabulku se šířkou, která je procentní podíl nadřazeného prvku, napište:
< šířka tabulky = "80%" >
Tato tabulka je 80% šířky kontejneru, ve kterém je vložen.
Viz příklad tabulky se šířkou
Zastaraný atribut HTML 4.01 TABLE
Existuje jeden atribut prvku TABLE, který je zastaralý v HTML 4.01 a zastaralý v HTML5: zarovnání . 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 nebo levý okraj: auto; a margin-right: auto; stylů. Vlastnost float vám dává výsledek, který je bližší tomu, který poskytuje atribut align, ale může ovlivnit způsob zobrazení zbývající části stránky. Okrajová pravice: auto; a margin-left: auto; jsou to, co W3C doporučuje jako alternativu.
Zde je zastaralý příklad s použitím atributu align:
align = "right" >
Tato tabulka je zarovnána správně
Text proudí kolem něj doleva
Zobrazte zastaralý příklad pomocí atributu Zarovnat.
A abychom získali stejný efekt s platným (nepodporovaným) kódem HTML, napište:
style = "float: right;" >
Tato tabulka je zarovnána správně
Text proudí kolem něj doleva
Následující vysvětluje atributy tabulky, 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ásledující popisuje atributy tabulky, 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 ve svých HTML tabulkách.
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ě jako atribut bgcolor, atribut bordercolor 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 = "barva ohraničení: červená;" >
Tato tabulka má červený rámeček.
Atributy bordercolorlight a bordercolordark byly zahrnuty do aplikace Internet Explorer a umožnily vám vytvořit 3D okraj kolem vašeho stolu. 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 to byl přidán atribut cols na prvek TABLE, který pomáhá 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 atribut šířky (zastaralý v HTML5), mnozí lidé předpokládali, že existuje i atribut výšky pro tabulky. Ale protože tabulky odpovídají šířce jejich obsahu nebo definované šířky v atributu CSS nebo šířky, výška nemohla být omezena. Takže místo toho prohlížeče umožnily atribut height definovat 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 vlastností výšky CSS můžete omezit výšku, pokud používáte také vlastnost CSS, abyste definovali, co se stane s jakýmkoli nadbytečným obsahem.
Chcete-li nastavit minimální výšku na tabulku, napište:
style = "výška: 30m;" >
Tato tabulka je nejméně 30ms vysoká.
Dva atributy a přidaný prostor kolem levé / pravé strany (hspace) a horní / dolní (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, nýbrž namísto toho, aby se okno prohlížeče pohybovalo horizontálně, 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 tím vynucuje 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.
Obsah uprostřed.