Atributy tabulky HTML vám dávají mnohem větší kontrolu nad tabulkami HTML. Existuje mnoho atributů, které mají tabulky k dispozici, aby byly zajímavější a změnily vzhled vaší stránky.
Atributy prvku HTML TABLE
v HTML5 prvek používá globální atributy a jeden další atribut a změnil se tak, aby měl pouze hodnotu 1 nebo prázdný (tj. border = ""). Chcete-li změnit šířku ohraničení, měli byste použít šířku ohraničení Vlastnost CSS.
Níže se dozvíte o platných atributech tabulky HTML5.
Existuje také několik atributů, které jsou součástí specifikace HTML 4.01, která je v HTML5 zastaralá:
- —Použijte vlastnost CSS padding na prvcích TD a TH tabulky.
- —Použijte mezeru mezi vlastnostmi CSS na tabulce.
- —Use CSS styles border-color: black; a hraniční styl na stole.
- —Use CSS styles border-color: black; a styl ohraničení na příslušných prvcích tabulky.
- —Místo toho byste měli popsat strukturu tabulky CAPTION nebo umístit celou tabulku na OBRÁZEK a popsat ji v OBRÁZKU. Případně můžete zjednodušit strukturu tabulky, takže není třeba žádné vysvětlení.
- —Použijte vlastnost šířky CSS.
A jeden atribut, který byl zastaralý v HTML 4.01 a je také zastaralý v HTML5.
- Zarovnat - místo toho použijte vlastnost okraje CSS.
Existuje také několik atributů, které nejsou součástí žádné specifikace HTML. Tyto atributy použijte, pokud víte, že prohlížeče, které podporujete, je zvládnou a nestaráte se o platné HTML.
- —Místo toho použijte barvu pozadí vlastnosti CSS.
- bordercolor - místo toho použijte vlastnost CSS border-color.
- bordercolorlight - místo toho použijte vlastnost CSS border-color.
- bordercolordark - místo toho použijte vlastnost CSS border-color.
- cols - K tomuto atributu neexistuje žádná alternativa.
- výška - místo toho použijte výšku vlastnosti CSS.
- —Místo toho použijte okraj vlastnosti CSS.
- —Místo toho použijte prázdné místo vlastnosti CSS.
- —Místo toho použijte vlastnost CSS vertical-align.
Atributy prvku HTML5 TABLE
Jak jsme zmínili výše, nad globální atributy existuje pouze jeden atribut, který je platný pro prvek HTML5 TABLE: border.
Atribut border se používá k definování ohraničení kolem celé tabulky a všech buněk v ní. Existovala otázka, zda bude zahrnuta do specifikace HTML5, ale zůstala, protože poskytovala informace o struktuře tabulky nad rámec jednoduchých implikací stylu.
Chcete-li přidat atribut ohraničení, nastavíte hodnotu na 1, pokud existuje ohraničení, a prázdný (nebo ponecháte atribut mimo), pokud neexistuje. Většina prohlížečů také podporuje 0 pro žádné ohraničení a jakoukoli jinou celočíselnou hodnotu (2, 3, 30, 500 atd.), Která deklaruje šířku ohraničení v pixelech, ale v HTML5 je zastaralá. Místo toho byste měli použít vlastnosti stylu CSS ohraničení k definování šířky ohraničení a dalších stylů.
Chcete-li vytvořit tabulku s ohraničením, napište:
border = "1">
Toto je tabulka s ohraničením
Toto popisuje atributy TABLE, které jsou platné v HTML 4.01, ale jsou zastaralé HTML5. Pokud stále píšete dokumenty HTML 4.01, můžete tyto atributy použít, ale většina z nich má alternativy, díky nimž budou vaše stránky při přechodu na HTML5 lépe zabezpečeny pro budoucnost.
Platné atributy HTML 4.01
Atribut, který jsme popsali výše. Jediným rozdílem v HTML 4.01 od HTML5 je, že můžete určit celé celé číslo (0, 1, 2, 15, 20, 200 atd.) A definovat tak šířku ohraničení v pixelech.
Chcete-li vytvořit tabulku s ohraničením 5px, napište:
border = "5">
Tato tabulka má ohraničení 5px.
Atribut definuje velikost prostoru mezi okraji buňky a obsahem buňky. Výchozí nastavení jsou dva pixely. Pokud nechcete, aby mezi obsahem a okraji byla mezera, nastavte cellpadding na 0.
Chcete-li nastavit výplň buněk na 20, napište:
cellpadding = "20">
Tato tabulka má celulární hodnotu 20.
Okraje buňky budou odděleny 20 pixely.
Podívejte se na příklad tabulky s cellpadding.
Atribut definuje velikost prostoru mezi buňkami tabulky a obsahem buňky. Stejně jako cellpadding je výchozí hodnota nastavena na dva pixely, takže pokud nechcete mít mezery mezi buňkami, musíte ji nastavit na 0.
Chcete-li do tabulky přidat řádkování buněk, napište:
cellspacing = "20">
Tato tabulka má rozteč buněk 20.
Buňky budou odděleny 20 pixely.
Atribut určuje, které části ohraničení vnějšku tabulky budou viditelné. Svůj stůl můžete zarámovat na všech čtyřech stranách, na jedné straně, nahoře a dole, nalevo a napravo nebo vůbec.
Zde je HTML pro tabulku pouze s levým okrajem:
frame = "lhs">
Tato tabulka
budu mít
pouze
levá strana zarámovaná.
A další příklad se spodním rámem:
frame = "below">
Tento stůl má ve spodní části rám.
Podívejte se na některé tabulky s rámečky.
Atribut je podobný atributu frame, pouze ovlivňuje ohraničení kolem buněk tabulky. Můžete nastavit pravidla pro všechny buňky, mezi sloupci, mezi skupinami jako TBODY a TFOOT nebo žádnou.
Chcete-li vytvořit tabulku s řádky pouze mezi řádky, napište:
rules = "řádky">
Tento stůl 4x4 má
řádky, nikoli sloupce
nastínil s
atribut pravidel.
A další s řádky mezi sloupci:
rules = "cols">
Tohle je
stůl
Kde
sloupce
jsou
zvýrazněno
The atribut poskytuje informace o tabulce pro čtečky obrazovky a další uživatelské agenty, kteří by mohli mít potíže se čtením tabulek. Chcete-li použít souhrnný atribut, napíšete krátký popis tabulky a uvedete jej jako hodnotu atributu. Souhrn se ve většině standardních webových prohlížečů nezobrazí na webové stránce.
Zde je postup, jak napsat jednoduchou tabulku se souhrnem:
summary = "Toto je ukázková tabulka, která obsahuje informace o výplni. Účelem této tabulky je předvést souhrn. ">
sloupec 1 řádek 1.
sloupec 2 řádek 1.
sloupec 1 řádek 2.
sloupec 2 řádek 2.
Atribut definuje šířku tabulky buď v pixelech, nebo jako procento prvku kontejneru. Pokud šířka není nastavena, bude tabulka zabírat pouze tolik místa, kolik je potřeba k zobrazení obsahu, přičemž maximální šířka bude stejná jako šířka nadřazeného prvku.
Chcete-li vytvořit tabulku se specifickou šířkou v pixelech, napište:
width = "300">
Tato tabulka je 80% šířky kontejneru, ve kterém je.
Chcete-li vytvořit tabulku se šířkou, která je procentem nadřazeného prvku, napište:
width = "80%">
Tato tabulka je 80% šířky kontejneru, ve kterém je.
Zastaralý atribut HTML 4.01 TABLE
Existuje jeden atribut prvku TABLE, který je v HTML 4.01 zastaralý a v HTML5 zastaralý: align. Tento atribut umožňuje nastavit, kde má být tabulka na stránce umístěna vzhledem k textu, který je vedle ní. Tento atribut byl v HTML 4.01 zastaralý a měli byste se ho vyhnout. Místo toho byste měli použít vlastnost CSS nebo margin-left: auto; a margin-right: auto; styly. Vlastnost float vám dává výsledek, který je blíže tomu, co poskytl atribut align, ale může ovlivnit způsob, jakým se zobrazí zbytek obsahu stránky. Okraj vpravo: auto; a levý okraj: auto; jsou to, co W3C doporučuje jako alternativu.
Zde je zastaralý příklad pomocí atributu align:
align = "right">
Tato tabulka je zarovnána vpravo.
Text kolem něj proudí doleva.
Chcete-li získat stejný efekt s platným (nezastaralým) HTML, napište:
style = "float: right;">
Tato tabulka je zarovnána vpravo.
Text kolem něj proudí doleva.
Zastaralé atributy tabulky
Předchozí informace popisuje atributy prvku HTML, které jsou platné v HTML 4.01, ale v HTML5 jsou zastaralé.
Následující text popisuje atributy TABLE, které nejsou platné v žádné aktuální specifikaci. Pokud se nestaráte o to, zda vaše stránky ověřují a vaši uživatelé používají prohlížeč, který podporuje tyto prvky, můžete tyto prvky použít. Ale většina z nich je v moderních prohlížečích buď nepodporovaná, nebo má alternativy, které více vyhovují standardům.
Tyto atributy nedoporučujeme používat na vašich tabulkách HTML.
Atribut je starý atribut, který byl zahrnut před široce podporovaným CSS. Umožňuje změnit barvu pozadí tabulky. Můžete nastavit název barvy nebo hexadecimální kód. Tento atribut stále funguje v mnoha prohlížečích, ale pro budoucnost ověřené HTML byste jej neměli používat a místo toho použít CSS.
Lepší alternativou k tomuto atributu je vlastnost style.
Chcete-li změnit barvu pozadí tabulky, napište:
style = "background-color: #ccc;">
Tato tabulka má šedé pozadí.
Podobně jako atribut bgcolor umožňuje atribut bordercolor změnit barvu atributu. Tento atribut je podporován pouze prohlížečem Internet Explorer. Místo toho byste měli použít vlastnost stylu ohraničení barvy.
Chcete-li změnit barvu ohraničení tabulky, napište:
style = "border-color: red;">
Tato tabulka má červený okraj.
Atributy bordercolorlight a bordercolordark byly zahrnuty do aplikace Internet Explorer, aby vám umožnily vytvořit 3D ohraničení kolem vašeho stolu. Od verze IE8 a vyšší je to však podporováno pouze v IE7 Standards Mode a Režim Quirks. Společnost Microsoft uvádí, že tyto vlastnosti již nejsou podporovány.
Na krátkou dobu byl navržen atribut cols na prvku TABLE, aby pomohl prohlížečům zjistit, kolik sloupců měla tabulka. Předpokladem bylo, že to pomůže urychlit vykreslování velkých tabulek. Byl však implementován pouze prohlížečem Internet Explorer a od verze IE8 a vyšší je toto podporováno pouze v režimech IE7 Standards a Quirks Mode.
Protože existuje atribut width (v HTML5 zastaralý), mnoho lidí předpokládalo, že existuje atribut výšky i pro tabulky. Ale protože tabulky odpovídají šířce jejich obsahu nebo definované šířce v atributu CSS nebo width, nemohla být výška omezena. Prohlížeče tedy místo toho povolily atributu výšky definovat minimální výšku tabulky. Pokud by byl stůl vyšší než tato výška, zobrazoval by se vyšší. Měli byste však tuto vlastnost použít.
Pomocí vlastnosti CSS height můžete omezit výšku, pokud použijete také vlastnost CSS k definování toho, co se stane s jakýmkoli přebytečným obsahem.
Chcete-li nastavit minimální výšku stolu, napište:
style = "height: 30em;">
Tato tabulka je minimálně 30 em.
Dva atributy a přidaný prostor kolem levé / pravé strany (hspace) a nahoře / dole (vspace) tabulky. Místo toho byste měli použít vlastnost style.
Chcete-li nastavit svislý prostor na 20 pixelů a vodorovný prostor na 40 pixelů, napište:
style = "margin: 20px 40px;"
Tato tabulka má vspace 20 pixelů a hspace 40 pixelů.
Atribut je logický atribut, který definuje, zda by se obsah tabulky měl zalamovat na okraji nadřazeného prvku nebo okna nebo vynutit vodorovné posouvání. Místo toho byste měli definovat vlastnosti obtékání každé buňky tabulky pomocí vlastnosti CSS.
Chcete-li, aby se sloupec se spoustou textu nezabalil, napište:
style = "white-space: nowrap;"> Toto je sloupec s hromadou obsahu. Ale i když je širší než kontejner, text by se neměl zalomit na další řádek, ale místo toho přinutit okno prohlížeče vodorovně posouvat, aby viděl celý obsah.
Nakonec atribut definuje, jak by se obsah každé buňky měl zarovnat svisle uvnitř buňky. Místo tohoto neplatného atributu byste měli použít vlastnost CSS u každé buňky, u které chcete změnit zarovnání. Účinky tohoto stylu si nevšimnete, pokud obsah buňky nebude menší než dostupný prostor vytvořený jinými většími buňkami.
Chcete-li přinutit buňku, aby se zarovnala dolů (ve výchozím nastavení spíše než do středu), napište:
Tato buňka je delší než ostatní, a tak vynutí vyšší výšku. Uvidíte tedy, že svisle zarovnaná buňka je zarovnána dole.
style = "vertical-align: bottom;"> Obsah dole.
Obsah uprostřed.