Ako používať atribúty prvkov „TABLE“ (HTML)

Atribúty tabuľky HTML poskytujú oveľa väčšiu kontrolu nad tabuľkami HTML. Existuje veľa atribútov, ktoré majú tabuľky k dispozícii, aby boli zaujímavejšie a zmenili vzhľad vašej stránky.

Atribúty prvkov HTML TABLE

V HTML5 prvok používa globálne atribúty a jeden ďalší atribút a zmenil sa tak, že má iba hodnotu 1 alebo je prázdny (t. j. border = ""). Ak chcete zmeniť šírku orámovania, mali by ste použiť šírku orámovania Vlastnosť CSS.

Nižšie sa dozviete viac o platných atribútoch tabuľky HTML5.

Existuje tiež niekoľko atribútov, ktoré sú súčasťou špecifikácie HTML 4.01 a ktoré sú v HTML5 zastarané:

  • —Použite vlastnosť odsadenia CSS na elementoch TD a TH tabuľky.
  • —Použite ohraničenie medzery medzi vlastnosťami CSS na stole.
  • —Použite štýly CSS border-color: čierna; a hraničným štýlom na stole.
  • —Použite štýly CSS border-color: čierna; a ohraničenie na príslušných prvkoch tabuľky.
  • - Namiesto toho by ste mali opísať štruktúru tabuľky CAPTION alebo umiestniť celú tabuľku na OBRÁZOK a popísať ju na OBRÁZKU. Prípadne môžete zjednodušiť štruktúru tabuľky tak, aby nebolo potrebné žiadne vysvetlenie.
    instagram viewer
  • —Použite vlastnosť šírky CSS.

A jeden atribút, ktorý bol v HTML 4.01 zastaraný a ktorý je tiež v HTML5 zastaraný.

  • Zarovnať - namiesto toho použite vlastnosť okraja CSS.

Existuje tiež niekoľko atribútov, ktoré nie sú súčasťou žiadnej špecifikácie HTML. Tieto atribúty použite, ak viete, že podporované prehľadávače ich zvládnu a nezaujíma vás platné HTML.

  • - Namiesto toho použite farbu pozadia vlastnosti CSS.
  • bordercolor - namiesto toho použite vlastnosť CSS border-color.
  • bordercolorlight - namiesto toho použite vlastnosť CSS border-color.
  • bordercolordark — namiesto toho použite vlastnosť CSS border-color.
  • cols - K tomuto atribútu neexistuje žiadna alternatíva.
  • výška - namiesto toho použite výšku vlastnosti CSS.
  • —Místo toho použite okraj vlastnosti CSS.
  • —Místo toho použite prázdny priestor vlastnosti CSS.
  • - Použite namiesto toho vlastnosť CSS vertical-align.

Atribúty prvku TABUĽKA HTML5

Ako sme už spomenuli vyššie, v prvku HTML5 TABLE je okrem globálnych atribútov platný iba jeden atribút: border.

Atribút border sa používa na definovanie ohraničenia okolo celej tabuľky a všetkých buniek v nej. Existovala otázka, či by to malo byť zahrnuté v špecifikácii HTML5, ale to zostalo, pretože poskytovalo informácie o štruktúre tabuľky nad rámec jednoduchých implikácií štýlu.

Ak chcete pridať atribút border, nastavíte hodnotu na 1, ak existuje orámovanie, a prázdny (alebo atribút vynecháte), ak nie je. Väčšina prehľadávačov podporuje aj 0 bez ohraničenia a akúkoľvek inú celočíselnú hodnotu (2, 3, 30, 500 atď.) Na deklarovanie šírky ohraničenia v pixeloch, čo je však v prípade HTML5 zastarané. Namiesto toho by ste mali na určenie šírky orámovania a ďalších štýlov použiť vlastnosti štýlu CSS.

Ak chcete vytvoriť tabuľku s okrajom, napíšte:

border = "1">
Toto je tabuľka s okrajom
Toto popisuje atribúty TABLE, ktoré sú platné v HTML 4.01, ale v ktorých sú zastarané HTML5. Ak stále píšete dokumenty HTML 4.01, môžete tieto atribúty použiť, ale väčšina z nich má alternatívy, vďaka ktorým budú vaše stránky pri prechode na HTML5 zabezpečené proti budúcej budúcnosti.

Platné atribúty HTML 4.01

Atribút, ktorý sme opísali vyššie. Jediný rozdiel v HTML 4.01 od HTML5 je, že môžete určiť celé celé číslo (0, 1, 2, 15, 20, 200 atď.), Ktoré definuje šírku ohraničenia v pixeloch.

Ak chcete zostaviť tabuľku s okrajom 5px, napíšte:

border = "5">

Táto tabuľka má ohraničenie 5px.

Atribút definuje veľkosť medzery medzi okrajmi bunky a obsahom bunky. Predvolené sú dva pixely. Nastavte cellpadding na 0, ak nechcete, aby medzi obsahom a okrajmi bola medzera.

Ak chcete nastaviť výplň buniek na 20, napíšte:

cellpadding = "20">

Táto tabuľka má obsadenie 20.

Okraje bunky budú oddelené 20 pixlami.

Pozrite si príklad tabuľky s vložením bunky.

Atribút definuje veľkosť medzery medzi bunkami tabuľky a obsahom bunky. Rovnako ako cellpadding je predvolená hodnota nastavená na dva pixely, takže ak chcete, aby neboli žiadne medzery medzi bunkami, musíte ju nastaviť na hodnotu 0.

Ak chcete do tabuľky pridať medzery medzi bunkami, napíšte:

cellspacing = "20">

Táto tabuľka má medzery medzi bunkami 20.

Bunky budú od seba vzdialené 20 pixelov.

Atribút určuje, ktoré časti hranice okolo vonkajšej strany tabuľky budú viditeľné. Svoj stôl môžete zarámovať na všetky štyri strany, ľubovoľnú jednu, hornú a dolnú, ľavú a pravú alebo žiadnu.

Tu je HTML pre tabuľku iba s ľavým okrajom:

frame = "lhs">
Táto tabuľka
bude mať
len
ľavá strana zarámovaná.
A ďalší príklad so spodným rámom:

rám = "dole">
Tento stolík má na spodnej strane rám.
Pozrite sa na niektoré tabuľky s rámami.

Atribút je podobný atribútu frame, iba ovplyvňuje okraje okolo buniek tabuľky. Môžete nastaviť pravidlá pre všetky bunky, medzi stĺpcami, medzi skupinami ako TBODY a TFOOT alebo nijaké.

Ak chcete zostaviť tabuľku s riadkami iba medzi riadkami, napíšte:

rules = "riadky">
Tento stôl 4x4 má
riadky, nie stĺpce
načrtnuté pomocou
atribút pravidla.
A ďalší s riadkami medzi stĺpcami:

rules = "cols">
Toto je
stôl
kde
stĺpce

zvýraznené
The atribút poskytuje informácie o tabuľke pre čítačky obrazovky a ďalších používateľských agentov, ktorí by mohli mať problémy s čítaním tabuliek. Ak chcete použiť súhrnný atribút, napíšete stručný popis tabuľky a dáte ho ako hodnotu atribútu. Súhrn sa na väčšine webových prehliadačov nebude zobrazovať na webovej stránke.

Tu je postup, ako napísať jednoduchú tabuľku so súhrnom:

summary = "Toto je vzorová tabuľka, 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.

Atribút definuje šírku tabuľky buď v pixeloch, alebo ako percento prvku kontajnera. Ak šírka nie je nastavená, tabuľka bude zaberať iba toľko miesta, koľko je potrebné na zobrazenie obsahu, pričom maximálna šírka je rovnaká ako šírka nadradeného prvku.

Ak chcete zostaviť tabuľku so špecifickou šírkou v pixeloch, napíšte:

width = "300">

Táto tabuľka je 80% šírky kontajnera, v ktorom je.

A ak chcete zostaviť tabuľku so šírkou, ktorá je percentom z nadradeného prvku, napíšte:

šírka = "80%">

Táto tabuľka je 80% šírky kontajnera, v ktorom je.

Zastaraný atribút TABUĽKA HTML 4.01

Existuje jeden atribút prvku TABLE, ktorý je v HTML 4.01 zastaraný a v HTML5 zastaraný: align. Tento atribút umožňuje nastaviť, kde sa má tabuľka nachádzať na stránke vzhľadom na text, ktorý je vedľa nej. Podpora tohto atribútu v HTML 4.01 bola ukončená a mali by ste sa vyhnúť jeho použitiu. Namiesto toho by ste mali použiť vlastnosť CSS alebo margin-left: auto; a pravý okraj: 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, akým sa zobrazuje zvyšok obsahu stránky. Pravý okraj: auto; a okraj vľavo: auto; sú to, čo W3C odporúča ako alternatívu.

Tu je zastaraný príklad pomocou atribútu align:

align = "right">

Táto tabuľka je zarovnaná vpravo.

Text okolo neho obteká doľava.

A aby ste dosiahli rovnaký efekt s platným (nezastaraným) HTML, napíšte:

style = "float: right;">

Táto tabuľka je zarovnaná vpravo.

Text okolo neho obteká doľava.

Zastarané atribúty TABUĽKY

Predchádzajúce informácie popisujú atribúty prvku HTML, ktoré sú platné v HTML 4.01, ale v HTML5 sú zastarané.

Nasledujúci text popisuje atribúty TABLE, ktoré nie sú platné v žiadnej aktuálnej špecifikácii. Ak sa nestaráte o to, či vaše stránky validujú a vaši používatelia používajú prehliadač, ktorý podporuje tieto prvky, môžete tieto prvky použiť. Ale väčšina z nich nie je v moderných prehliadačoch podporovaná alebo má alternatívy, ktoré viac vyhovujú štandardom.

Neodporúčame používať tieto atribúty na vašich tabuľkách HTML.

Atribút je starý atribút, ktorý bol zahrnutý pred širokou podporou CSS. Umožňuje vám zmeniť farbu pozadia tabuľky. Môžete nastaviť názov farby alebo hexadecimálny kód. Tento atribút stále funguje v mnohých prehliadačoch, ale pre budúce HTML by ste ho nemali používať a použite radšej CSS.

Lepšou alternatívou k tomuto atribútu je vlastnosť štýlu.

Ak chcete zmeniť farbu pozadia tabuľky, napíšte:

style = "background-color: #ccc;">

Táto tabuľka má sivé pozadie.

Podobne ako atribút bgcolor, atribút bordercolor umožňuje meniť farbu atribútu. Tento atribút podporuje iba prehliadač Internet Explorer. Namiesto toho by ste mali použiť vlastnosť štýlu farby orámovania.

Ak chcete zmeniť farbu orámovania tabuľky, napíšte:

style = "border-color: red;">
Táto tabuľka má červený okraj.
Atribúty bordercolorlight a bordercolordark boli zahrnuté do prehľadávača Internet Explorer, aby vám umožnili vytvoriť okolo vašej tabuľky 3D orámovanie. Od verzie IE8 a vyššej je to však podporované iba v štandardnom režime IE7 a Režim Quirks. Spoločnosť Microsoft uvádza, že tieto vlastnosti už nie sú podporované.

Na krátku dobu bol navrhnutý atribút cols na prvku TABLE, aby prehliadačom pomohol zistiť, koľko stĺpcov mala tabuľka. Predpokladom bolo, že to pomôže urýchliť vykreslenie veľkých tabuliek. Bol však implementovaný iba prehliadačom Internet Explorer a od verzie IE8 a vyššej je podporovaná iba v štandardných režimoch IE7 a Quirks Mode.

Pretože existuje atribút šírky (v HTML5 zastaraný), mnoho ľudí predpokladalo, že existuje atribút výšky aj pre tabuľky. Ale pretože tabuľky zodpovedajú šírke ich obsahu alebo definovanej šírke v atribúte CSS alebo width, výšku nebolo možné obmedziť. Prehliadače teda namiesto toho povolili atribútu height určovať minimálnu výšku tabuľky. Keby bol stôl vyšší ako táto výška, zobrazoval by sa vyšší. Mali by ste však nehnuteľnosť využívať.

Pomocou vlastnosti výška CSS môžete obmedziť výšku, ak tiež použijete vlastnosť CSS na definovanie toho, čo sa stane s prebytočným obsahom.

Ak chcete nastaviť minimálnu výšku na stôl, napíšte:

style = "height: 30em;">

Táto tabuľka je vysoká najmenej 30 em.

Dva atribúty a pridaný priestor okolo ľavej / pravej strany (hspace) a hornej / dolnej časti (vspace) tabuľky. Namiesto toho by ste mali použiť vlastnosť style.

Ak chcete nastaviť vertikálny priestor na 20 pixelov a horizontálny priestor na 40 pixelov, napíšte:

style = "margin: 20px 40px;"

Táto tabuľka má vspace 20 pixelov a hspace 40 pixelov.

Atribút je boolovský atribút, ktorý definuje, či by sa obsah tabuľky mal zalamovať na okraji nadradeného prvku alebo okna alebo vynútiť horizontálne posúvanie. Namiesto toho by ste mali definovať vlastnosti zalamovania každej bunky tabuľky pomocou vlastnosti CSS.

Ak chcete, aby sa stĺpec s veľkým množstvom textu nezabalil, napíšte:


style = "white-space: nowrap;"> Toto je stĺpec s množstvom obsahu. Ale aj keď je širší ako kontajner, text by sa nemal zalomiť na ďalší riadok, ale naopak prinútiť okno prehliadača vodorovne rolovať, aby sa zobrazil všetok obsah.
Nakoniec atribút definuje, ako sa má obsah každej bunky vertikálne zarovnať v bunke. Namiesto tohto neplatného atribútu by ste mali použiť vlastnosť CSS v každej bunke, ktorej nastavenie chcete zmeniť. Účinky tohto štýlu si nevšimnete, pokiaľ nie je obsah bunky menší ako dostupný priestor vytvorený inými, väčšími bunkami.

Ak chcete vynútiť, aby sa bunka zarovnala s dolnou časťou (namiesto predvolenej hodnoty do stredu), napíšte:


Táto bunka je dlhšia ako ostatné, a tak vynúti, aby bola výška vyššia. Uvidíte, že vertikálne zarovnaná bunka je zarovnaná s dolnou časťou.
style = "vertical-align: bottom;"> Obsah v dolnej časti.
Obsah v strede.