Atribúty tabuľky HTML vám dávajú oveľa väčšiu kontrolu nad tabuľkami HTML. Existuje veľa atribútov, ktoré sú k dispozícii tabuľkám, aby boli zaujímavé a zmenili vzhľad vašej stránky.
Prvky atribútov HTML TABLE
V prvku HTML5 element používa globálne atribúty a jeden ďalší atribút:. A to sa zmenilo len na hodnotu 1 alebo prázdne (t.j. border = ""). Ak chcete zmeniť šírku ohraničenia, mali by ste použiť border-width Vlastnosť CSS.
Pozrite sa nižšie a dozviete sa o platných atribútoch tabuľky HTML5.
Existuje aj niekoľko atribútov, ktoré sú súčasťou špecifikácie HTML 4.01, ktorá sa v HTML5 stala zastaranou:
- -Použite CSS
vypchávkamajetok na stoleTDaTHprvky. - -Použite vlastnosť CSS
border-spacingna stole. - -Používajte štýly CSS
hraničná farba: čierna;aborder-stylena stole. - -Používajte štýly CSS
hraničná farba: čierna;aborder-styleo príslušných prvkoch tabuľky. - Namiesto toho by ste mali popísať štruktúru tabuľky v a
CAPTIONalebo vložte celý stôl do aobrázoka opisuje ho vFIGCAPTION, Prípadne by ste mohli zjednodušiť štruktúru tabuľky tak, aby nebolo potrebné vysvetlenie. - -Použite CSS
šírkavlastnosť.
A jeden atribút, ktorý bol zastaraný v jazyku HTML 4.01 a je tiež zastaralý v jazyku HTML5.
Získajte viac informácií o atribútoch tabuľky HTML 4.01.
zoradiť-Použite CSSokrajnamiesto toho.
Existuje aj niekoľko atribútov, ktoré nie sú súčasťou akejkoľvek špecifikácie HTML. Použite tieto atribúty, ak viete, že prehliadače, ktoré podporujete, ich zvládnu a nemusíte sa starať o platný kód HTML.
- -Použite vlastnosť CSS
farba pozadiamiesto. bordercolor-Použite vlastnosť CSSborder-colormiesto.bordercolorlight-Použite vlastnosť CSSborder-colormiesto.bordercolordark-Použite vlastnosť CSSborder-colormiesto.cols- Táto vlastnosť neexistuje.výška-Použite vlastnosť CSSvýškamiesto.- -Použite vlastnosť CSS
okrajmiesto. - -Použite vlastnosť CSS
okrajmiesto. - -Použite vlastnosť CSS
Biely vesmírmiesto. - -Použite vlastnosť CSS
vertikálne zarovnaniemiesto.
Získajte viac informácií o atribútoch TABLE špecifických pre prehliadač.
Atribúty elementu HTML5 TABLE
Ako sme uviedli vyššie, existuje len jeden atribút, ktorý presahuje globálne atribúty, ktorý je platný v HTML5 TABUĽKA element: hraničné.
hraničné atribút sa používa na definovanie hranice okolo celej tabuľky a všetkých buniek v nej. Vyskytla sa určitá otázka, či by to bolo zahrnuté do špecifikácie HTML5, ale zostalo preto, lebo poskytovalo informácie o štruktúre tabuľky nad rámec jednoduchých dôsledkov štýlu.
Ak chcete pridať hraničné atribút nastavíte hodnotu na 1 ak existuje okraj a prázdne (alebo nechajte atribút), ak nie. Väčšina prehliadačov bude tiež podporovať 0 pre žiadnu hranicu a akúkoľvek inú celočíselnú hodnotu (2, 3, 30, 500 atď.) na deklarovanie šírky hranice v pixeloch, ale v HTML5 je to zastaralé. Namiesto toho by ste mali používať vlastnosti štýlu hraníc CSS na definovanie šírky hraníc a ďalších štýlov.
Ak chcete vytvoriť tabuľku s okrajom, napíšte:
border = "1" >
Toto je tabuľka s okrajom
V HTML5 sú zastarané atribúty HTML 4.01. Ak plánujete písať dokumenty HTML 4.01, môžete ich naučiť, inak ich môžete ignorovať. Väčšina týchto atribútov obsahuje alternatívy opísané vyššie.
Opíšeme atribúty prvku, ktoré sú platné v HTML5 (a HTML 4.01). Toto popisujeTABUĽKA atribúty platné v jazyku HTML 4.01, ale v HTML5 sú zastaralé. Ak stále napíšete dokumenty HTML 4.01, môžete použiť tieto atribúty, ale väčšina z nich má alternatívy, ktoré budú vašim stránkam viac zabezpečené v budúcnosti, keď prejdete na HTML5.
Platné atribúty HTML 4.01
Atribút, ktorý sme opísali vyššie. Jediný rozdiel vo formáte HTML 4.01 z HTML5 je, že môžete určiť akékoľvek celé celé číslo (0, 1, 2, 15, 20, 200 atď.) Na definovanie šírky hranice v pixeloch.
Ak chcete vytvoriť tabuľku s hranicou 5px, napíšte:
<> border = "5" > Táto tabuľka má okraj 5px.
Pozrite si príklad dvoch tabuliek s okrajmi.
Atribút definuje veľkosť priestoru medzi hranicami buniek a obsahom bunky. Predvolená hodnota je dva pixely. NastaviťVnútorný okraj buniek na0 ak nechcete mať žiadny priestor medzi obsahom a hranicami.
Ak chcete nastaviť polstrovanie buniek na 20, napíšte:
<> Vnútorný okraj buniek = "20" > Táto tabuľka má a Vnútorný okraj buniek z 20. Celkové hranice buniek budú oddelené 20 pixelmi.
Pozrite si príklad tabuľky s funkciou cellpadding
Atribút definuje veľkosť priestoru medzi bunkami tabuľky a obsahom buniek. Páči sa mi toVnútorný okraj buniek, predvolené nastavenie je nastavené na dva pixely, takže musíte nastaviť0 ak nemáte žiadne medzery medzi bunkami.
Ak chcete pridať medzery medzi bunkami do tabuľky, napíšte:
<> cellspacing = "20" > Táto tabuľka má a cellspacing z 20. Bunky budú oddelené 20 pixelmi.
Pozrite si tabuľku s bunkovým priestorom
Atribút identifikuje, ktoré časti hranice okolia tabuľky budú viditeľné.Stôl môžete na všetkých štyroch stranách, ľubovoľnú stranu, hornú a spodnú časť, ľavú a pravú, alebo žiadnu.
Tu je HTML pre tabuľku s ľavou bočnou hranicou:
rám = "LHS" >
Táto tabuľka bude mať len ľavý rám zarámovaný.
A ďalší príklad so spodným rámom:
rám = "pod" >
Táto tabuľka obsahuje rámček na spodku.
Pozrite sa na niektoré tabuľky s rámami
Atribút je podobný atribúturám atribút, ale iba to ovplyvňuje hranice okolo buniek tabuľky. Môžete nastaviť pravidlá pre všetky bunky, medzi stĺpcami, medzi skupinamitbody aTFOOT alebo žiadne.
Ak chcete vytvoriť tabuľku s čiarami iba medzi riadkami, napíšte:
pravidlá = "riadky" >
Táto tabuľka 4x4 má riadky nie stĺpce načrtnuté s atribút pravidiel.
A ďalší s čiarami medzi stĺpmi:
pravidlá = "sl" >
Toto je stôl kde stĺpce sú zvýraznené
Tu je príklad tabuľky s pravidlami
Tento atribút poskytuje informácie o tabuľke pre čítače obrazovky a iných používateľských agentov, ktoré môžu mať problémy so čítaním tabuliek. Použitiezhrnutie atribút, napíšete stručný popis tabuľky a uveďte to ako hodnotu atribútu. Súhrn sa nezobrazí na webovej stránke vo väčšine štandardných webových prehliadačov.
Tu je návod, ako napísať jednoduchú tabuľku so súhrnom:
<> summary = "Toto je ukážka tabuľky, ktorá obsahuje informácie o výplni. Účelom tejto tabuľky je preukázať súhrn." > stĺpec 1 riadok 1 stĺpec 2 riadok 1 stĺpec 1 riadok 2 stĺpec 2 riadok 2
Zobrazenie tabuľky so súhrnom
Atribút definuje šírku tabuľky buď v pixeloch, alebo ako percento kontajnerového elementu. Akšírka nie je nastavená, tabuľka zaberie len toľko priestoru, ako potrebuje na zobrazenie obsahu, pričom maximálna šírka je rovnaká ako šírka nadradeného prvku.
Ak chcete vytvoriť tabuľku so špecifickou šírkou v pixeloch, napíšte:
<> width = "300" > Táto tabuľka je 80% šírky kontajnera, v ktorom je kontajner.
A na vytvorenie tabuľky so šírkou, ktorá je percentom rodičovského elementu, napíšte:
<> width = "80%" > Táto tabuľka je 80% šírky kontajnera, v ktorom je kontajner.
Pozrite si príklad tabuľky so šírkou
Zastaraný atribút HTML 4.01 TABLE
Je tu jeden atribútTABUĽKA prvok, ktorý je zastaraný v jazyku HTML 4.01 a zastaraný v jazyku HTML5:zoradiť, Tento atribút vám umožňuje určiť, kde by mala byť tabuľka umiestnená na stránke v porovnaní s textom, ktorý je vedľa nej. Tento atribút bol zastaraný v jazyku HTML 4.01 a nemali by ste ho používať. Namiesto toho by ste mali používať vlastnosť CSS alebomargin-left: auto; amargin-right: auto; štýly.plavák vlastnosť vám dáva výsledok, ktorý je bližšie k tomu, čozoradiť atribút, ale môže ovplyvniť spôsob, akým sa zobrazí zvyšok obsahu stránky.margin-right: auto; amargin-left: auto; sú to, čo odporúča W3C ako alternatíva.
Tu je zastaraný príklad pomocouzoradiť atribút:
<> align = "pravý" > Táto tabuľka je zarovnaná správne Text sa točí okolo neho doľava
Pozrite si zastaraný príklad pomocouzoradiť atribútov.
A ak chcete získať rovnaký účinok s platným (nezapísaným) HTML, napíšte:
<> style = "float: right;" > Táto tabuľka je zarovnaná správne Text sa točí okolo neho doľava
Nasleduje vysvetlenieTABUĽKA atribúty, ktoré nie sú súčasťou akejkoľvek špecifikácie HTML.
Predchádzajúca informácia popisuje atribúty prvku HTML, ktoré sú platné v jazyku HTML 4.01, ale v HTML5 sú zastaralé.
Nasleduje opisTABUĽKA atribúty, ktoré nie sú platné v žiadnej súčasnej špecifikácii. Ak sa nestaráte o to, či vaše stránky overia a používatelia používajú prehliadač, ktorý podporuje tieto prvky, môžete tieto prvky použiť. Väčšina z nich je však v moderných prehliadačoch buď nepodporovaná, alebo majú alternatívy, ktoré sú viac kompatibilné s normami.
Nedoporučujeme používať tieto atribúty na vašich HTML tabuľkách.
Atribút je starý atribút, ktorý bol zahrnutý pred tým, ako bol CSS široko podporovaný. Umožňuje zmeniť farbu pozadia tabuľky. Môžete nastaviť názov farby alebo hexadecimálny kód. Tento atribút stále funguje vo viacerých prehliadačoch, ale v prípade HTML, ktorý by bol v budúcnosti chránený, nemali by ste ho používať a namiesto toho používať službu CSS.
Lepšia alternatíva k tomuto atribútu je vlastnosť štýlu.
Ak chcete zmeniť farbu pozadia tabuľky, napíšte:
<> style = "farba pozadia: #ccc;" > Táto tabuľka má sivé pozadie
Podobne akobgcolor atribút,bordercolor atribút umožňuje zmeniť farbu atribútu. Tento atribút podporuje iba program Internet Explorer. Namiesto toho by ste mali používať vlastnosť štýlu farby okraja.
Ak chcete zmeniť farbu hranice tabuľky, napíšte:
style = "border-color: červená;" >
Táto tabuľka má červenú hranicu.
bordercolorlight abordercolordark v programe Internet Explorer boli zahrnuté atribúty, ktoré vám umožnia vytvoriť 3D okraj okolo tabuľky. Avšak, od IE8 a vyššie, to je podporované len v režime IE7 Standards Mode a Quirks Mode. Spoločnosť Microsoft uvádza, že tieto vlastnosti už nie sú podporované.
Na krátky čas,cols atribút naTABUĽKA prvok bol navrhnutý, aby pomohol prehliadačom vedieť, koľko stĺpcov má tabuľka. Predpokladom bolo, že to pomôže urýchliť vykresľovanie veľkých stolov. Napriek tomu bol implementovaný iba programom Internet Explorer a od IE8 a hore je to podporované len v režime IE7 Standards Mode a Quirks Mode.
Pretože existuje ašírka atribút (zastaraný v jazyku HTML5) mnohí ľudia predpokladali, že existujevýška atribút pre tabuľky. Ale pretože tabuľky zodpovedajú šírke ich obsahu alebo definovanej šírke v CSS alebošírka atribút, výška nemohla byť obmedzená. Takže namiesto toho prehliadače umožnilivýška atribút na definovanie minimálnej výšky tabuľky. Ak by bola tabuľka vyššia ako táto výška, zobrazila by sa vyššia. Ale mali by ste použiť majetok
S CSSvýška môžete obmedziť výšku, ak používate aj vlastnosť CSS, aby ste definovali, čo sa stane s akýmkoľvek nadbytočným obsahom.
Ak chcete nastaviť minimálnu výšku na stôl, napíšte:
<> style = "výška: 30"; > Táto tabuľka je minimálne 30 ems vysoká.
Tieto dva atribúty a pridaný priestor okolo ľavej / pravej strany (hspace) a hore / dole (vspace) tabuľky. Namiesto toho by ste mali použiť vlastnosť štýlu.
Ak chcete nastaviť vertikálny priestor na 20 pixlov a horizontálny priestor na 40 pixlov, napíšte:
<> style = "margin: 20px 40px;" Táto tabuľka má vspace 20 pixelov a hspace 40 pixelov.
Atribút je booleovský atribút, ktorý definuje, či sa má obsah tabuľky zabaliť na okraj rodičovského elementu alebo okna alebo vynútiť horizontálne posúvanie. Namiesto toho by ste mali definovať vlastnosti balenia každej bunky tabuľky pomocou vlastnosti CSS.
Ak chcete, aby sa stĺpec s veľkým množstvom textu nezbalil, napíšte:
<> style = "white-space: nowrap;" > Toto je stĺpec s tonou obsahu. Ale aj keď je širší ako kontajner, text by sa nemal zabaliť do ďalšieho riadku, namiesto toho nútiť okno prehliadača prechádzať horizontálne, aby sa zobrazil celý obsah.
Nakoniec atribút definuje, ako by sa obsah každej bunky mal vertikálne vyrovnať v bunke. Namiesto neplatného atribútu by ste mali používať vlastnosť CSS v každej bunke, ktorú chcete zmeniť zarovnanie. Nebudete si všimnúť účinky tohto štýlu, pokiaľ obsah bunky nie je menší ako dostupný priestor vytvorený inými, väčšími bunkami.
Ak chcete vynútiť bunku, aby sa zarovnala so spodnou časťou (skôr ako stred, ako predvolená hodnota), napíšte:
Táto bunka je dlhšia ako zvyšok a tak bude vynútiť vyššiu výšku. Takže uvidíte, že vertikálne zarovnaná bunka je zarovnaná dole. <> style = "vertikálne-zarovnať: spodné;" > Obsah v dolnej časti. Obsah v strede.
