Využiť čo najviac z tabuliek HTML učením atribútov tabuľky
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 zmenila sa len hodnota 1 alebo prázdna (tj hranica = ""). Ak chcete zmeniť šírku ohraničenia, mali by ste použiť vlastnosť CSS pre šírku hranice.
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 vlastnosť vycpávky CSS na prvky tabuľky TD a TH.
- -Používajte medzeru medzi vlastnosťami CSS na stole.
- -Používajte štýly CSS okraj-farba: čierna; a hraničný štýl na stole.
- -Používajte štýly CSS okraj-farba: čierna; a hraničný štýl o príslušných prvkoch tabuľky.
- Namiesto toho by ste mali popísať štruktúru tabuľky v kapitole CAPTION alebo vložiť celú tabuľku na OBRÁZOK a opisovať ju v OBRÁZKU. Prípadne by ste mohli zjednodušiť štruktúru tabuľky tak, aby nebolo potrebné vysvetlenie.
- -Použite vlastnosť šírky CSS.
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.
- Zarovnať - Použite vlastnosť okraja CSS.
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.
- - namiesto toho použite farbu pozadia farby CSS.
- bordercolor - namiesto toho použite farbu farby vlastností CSS.
- bordercolorlight - namiesto toho použite farbu vlastností CSS.
- bordercolordark - namiesto toho použite farbu vlastností CSS.
- cols -Táto atribút neexistuje.
- height - namiesto toho použite výšku vlastností CSS.
- - Namiesto toho použite okraj vlastností CSS.
- - Namiesto toho použite okraj vlastností CSS.
- - namiesto toho použite vlastnosť CSS.
- - Namiesto toho použite vlastnosť CSS vertikálne.
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ý na prvku TABULKA HTML5: okraj.
Atribút ohraničenia sa používa na definovanie hranice okolo celej tabuľky a všetkých buniek v rámci tejto tabuľky. 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ť atribút hranice, nastavte hodnotu na hodnotu 1, ak existuje okraj a prázdne (alebo nechajte atribút), ak nie je. Väčšina prehliadačov bude tiež podporovať 0 bez ohraničenia 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 popisuje atribúty TABLE, ktoré sú 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. Nastavte stahovanie buniek na hodnotu 0, ak nechcete, aby medzi obsahom a okrajmi bol žiadny priestor.
Ak chcete nastaviť polstrovanie buniek na 20, napíšte:
cellpadding = "20" >
Táto tabuľka má bunkovú plochu 20.
Okraje 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. Rovnako ako bunkovanie, predvolené nastavenie je nastavené na dva pixely, takže ho musíte nastaviť na hodnotu 0, ak nemáte žiadne oddelenie buniek.
Ak chcete pridať medzery medzi bunkami do tabuľky, napíšte:
cellspacing = "20" >
Táto tabuľka má bunkový priestor 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:
frame = "lhs" >
Táto tabuľka
bude mať
iba
rám vľavo.
A ďalší príklad so spodným rámom:
rám = "nižšie" >
Táto tabuľka obsahuje rám v dolnej časti.
Pozrite sa na niektoré tabuľky s rámami
Atribút je podobný atribútu rámca, ovplyvňuje iba okraje okolo buniek tabuľky. Môžete nastaviť pravidlá pre všetky bunky, medzi stĺpcami, medzi skupiny ako TBODY a TFOOT 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é pomocou
atribút pravidiel.
A ďalší s čiarami medzi stĺpmi:
pravidlá = "cols" >
Toto je
tabuľka
kde
stĺpca
je
zvýraznený
Tu je príklad tabuľky aa 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. Ak chcete použiť súhrnný 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 miesta, ako je potrebné 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:
< šírka tabuľky = "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:
< šírka tabuľky = "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
Existuje jeden atribút prvku TABLE, ktorý je zastaraný v jazyku HTML 4.01 a zastaraný v HTML5: Zarovnať . 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 alebo okraj doľava: auto; a margin-right: auto; štýly. Vlastnosť float vám dáva výsledok, ktorý je bližšie k tomu, čo poskytuje atribút align, ale môže ovplyvniť spôsob zobrazenia zvyšku obsahu stránky. Okrajová pravica: auto; a margin-left: auto; sú to, čo odporúča W3C ako alternatíva.
Tu je zastaraný príklad pomocou atribútu align:
align = "right" >
Táto tabuľka je zarovnaná správne
Text točí okolo neho doľava
Pozrite si zastaraný príklad pomocou atribútu align.
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 točí okolo neho doľava
Nasledujúce vysvetľuje atribúty TABLE, 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é.
Nasledujúca tabuľka popisuje atribúty TABLE, 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 vo 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 ako atribút bgcolor, atribút bordercolor vám 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ý okraj.
V programe Internet Explorer boli zahrnuté atribúty bordercolorlight a bordercolordark, ktoré umožňujú 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 bol navrhnutý atribút cols na prvku TABLE, ktorý pomôže 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.
Keďže existuje atribút šírky (zastaraný v jazyku HTML5), mnohí ľudia predpokladali, že existuje aj atribút výšky pre tabuľky. Ale pretože tabuľky zodpovedajú šírke ich obsahu alebo definovanej šírke v atribúte CSS alebo šírke, výška nemôže byť obmedzená. Takže namiesto toho prehliadače umožnili atribút height definovať minimálnu výšku 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 vlastnosťou výšky CSS 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: 30m;" >
Táto tabuľka je vysoká najmenej 30 ems.
Tieto dva atribúty a pridaný priestor okolo ľavej / pravej strany (hspace) a hornej / dolnej (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 okna prehliadača vodorovne posúvať, 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.