Tabuľky HTML Štruktúra tabuľky - SELFHTML-Wiki

Informácie o tomto texte

A stôl je usporiadaná kompilácia textov alebo údajov. Obsah, ktorý sa má zobraziť, je rozdelený na riadky (horizontálne) a stĺpce (vertikálne), ktoré sú navzájom graficky zarovnané.

Poznámka: Tabuľky HTML sú sémanticky vhodnou štruktúrou tabuľkové údaje v riadkoch a stĺpcoch.

V minulosti sa na implementáciu kompletných rozvrhnutí používali tabuľky HTML. To však v konečnom dôsledku odporuje základnej myšlienke moderného webdizajnu (kľúčové slovo: oddelenie obsahu a rozloženia), môže používateľom čítačky obrazovky spôsobiť problémy s prístupnosťou a je ťažké ho udržiavať.
Na to použite rozloženie mriežky.

Obsah

konštrukcia

Niekoľko prvkov je zodpovedných za zostavenie tabuľky priehradovej konštrukcie. V najjednoduchšom prípade sa tabuľka skladá z riadkov tabuľky, v ktorých sú bunky tabuľky.

zavádza tabuľku (stôl = Tabuľka). zavádza nový riadok tabuľky (tr = riadok tabuľky = Riadok tabuľky). Potom sú definované bunky (stĺpce) príslušného riadku. Na konci riadku tabuľky je posledný deň napísané.

Hlavička a dátové bunky

Riadok tabuľky môže obsahovať bunky hlavičky alebo bežné dátové bunky.

Nasledujúca grafika zobrazuje vplyv prvkov HTML, ktoré vytvárajú tabuľku:

dátové bunky

Príklad ukazuje jednoduchú tabuľku s tromi riadkami, z ktorých každý má definované tri bunky. Prvý riadok obsahuje bunky hlavičky (...), ďalšie dva dátové bunky ( ... ). Môžete vidieť, že prehliadače bez ďalších krokov formátujú hlavičku a dátové bunky inak, ale nezobrazujú sa žiadne riadky rámca.

Bunky tabuľky môžu byť tiež prázdne. Ak nechcete zadávať údaje do riadku pre stĺpec, napíšte si jednoduchý. Upozorňujeme však, že v takom prípade webový prehliadač zobrazí bunku ako „nie je k dispozícii“, pretože toto správanie zodpovedá predvolenému nastaveniu prázdnych buniek vlastnosti CSS.

Stoly s hlavou, telom a chodidlami

Mali by ste však tiež rozdeliť samotnú tabuľku do niekoľkých sekcií,

najviac v jednej hlave hlavičky tabuľky, najviac v jednej päte tabuľky tfoot a najmenej v jednom tele tabuľky .

Hlavička tabuľky obsahuje riadky jednoduchej tabuľky, ktoré obsahujú iba bunky hlavičky, zatiaľ čo telo tabuľky obsahuje riadky, ktoré obsahujú výlučne alebo hlavne údajové bunky. Päta tabuľky obsahuje údaje, ktoré tabuľku sumarizujú alebo vysvetľujú.

Ak je tabuľka na výtlačku väčšia ako strana, pri tlači sa časti hlavy a päty opakujú na každej strane.

Dom A Dom B Životný priestor Záhradná plocha Celková plocha
100 150
50 100
150 250
Všetky informácie sú uvedené v štvorcových metroch.

Použitie colspanu je vysvetlené v kapitole Kombinovanie buniek.

html

V HTML4 bolo treba na rozdiel od znázornenia všimnúť pätu tabuľky tfoot bezprostredne za hlavou pred tbody, pretože tfoot obsahuje aj informácie, ktoré sa vzťahujú na všetky stĺpce. V HTML5 však musí byť tfoot umiestnený za tbody na konci tabuľky.

Návrh CSS

V minulosti boli tabuľky formátované pomocou rôznych atribútov HTML. S CSS však môžete dosiahnuť lepšie a prispôsobiteľnejšie formátovanie.

Viac informácií nájdete v kapitole 4 HTML/Tabuľky/Dizajn pomocou CSS