Návrh tabuľky HTML s CSS - SELFHTML-Wiki

Informácie o tomto texte

selfhtml-wiki

Pokiaľ ide o rozloženie tabuľky, jedna vec je prvoradá - nie to, ako dobre tabuľka vyzerá, ale ako rýchle a ľahké používateľ môže zaznamenávať údaje do správnych stĺpcov a riadkov.

Táto kapitola vám ukáže, ako môžete pomocou CSS3 zatraktívniť tabuľky a zároveň ich lepšie prečítať.

Obsah

  • 1 základné nastavenie CSS
    • 1,1 rámy a ohraničenia
    • 1.2 Nadpisy
    • 1,3 políčka
  • 2 Ukážka podpory prehľadávača
    • 2.1 Skupiny stĺpcov naprieč bunkami
    • 2.2 Nadpis tabuľky
    • 2.3 Základné informácie o CSS
    • 2.4 Návrh záhlavia a dátových buniek
    • Prechod pre chodcov 2,5
    • 2.6 Nadpisy riadkov
    • 2.7 Navrhnite nadpis
    • 2.8 Značenie riadkov v: umiestnením kurzora myši
  • 3 Príklad federálnych štátov sivá na sivej
  • 4 webové odkazy

Základné nastavenia CSS [upraviť]

Rámy a hranice [upraviť]

SELFHTML zvyčajne odporúča, aby ste pri zmene predvolených nastavení prehliadača boli opatrní. Tabuľky sú výnimkou, pretože v štandardnom zobrazení má každá bunka tabuľky a samotná tabuľka ohraničujúci riadok a vonkajšie ohraničenie, čo dáva tabuľkám „technický“ vzhľad:

Pri ohraničení: zbalenie sa to dá zmeniť tak, aby sa tabuľka zobrazovala v „normálnej“ mriežke.

Nadpisy [upraviť]

V tabuľke tvoria th bunky nadpisy pre jednotlivé stĺpce alebo riadky, prvok titulky predstavuje titulok pre tabuľku. Hlavičky tabuľky sú zvyčajne (tj. V predvolenej šablóne so štýlmi) zobrazené tučným písmom, titulok je zobrazený okrem Stôl umiestnený. Toto je možné zmeniť pomocou CSS:

Polia [upraviť]

Väčšina tabuliek obsahuje série čísel.

Tu je dôležité čísla jasne zarovnať a podľa toho označiť sumy.

Príklad podpory prehliadača [upraviť]

Pre náš príklad použijeme tabuľku, ktorá zobrazuje trhové podiely jednotlivých prehľadávačov v Nemecku.

Do tabuľky bol vložený prvok tbody, thead a tfoot (prehliadač môže vygenerovať samotný prvok tbody). Riadky sa zavádzajú s tr.

Hlavička tabuľky sa skladá z tých prvkov, jednotlivé bunky s prvkami td.

Skupiny stĺpcov medzi bunkami [upraviť]

Pretože Internet Explorer na rozdiel od ostatných prehľadávačov neprijíma automatické aktualizácie, je zaujímavé vedieť, na ktorých verziách je podiel na trhu distribuovaný:

Nadpis tabuľky [upraviť]

K tabuľke s prvkom titulku môžete priradiť krátke vysvetlenie alebo smerovanie. Deklarácia musí byť urobená okamžite za úvodnou značkou tabuľky, ale dá sa umiestniť aj pod tabuľku pomocou CSS.

Každý stĺpec má bunku hlavičky (th) v hlavičke tabuľky (thead), ktorá je priradená k stĺpcu s scope = "col".

Podobne ľavý stĺpec s rozsahom = "riadok" slúži ako hlavička tabuľky pre jednotlivé riadky.

Základné informácie o CSS [upraviť]

Pomocou vlastnosti border-collaps môžete určiť, či sa hranice susedných prvkov tabuľky zobrazia oddelene (border-collapse: separate;) alebo zhodne (border-collapse: collapse;).

Písmo v bunkách hlavičky a dátových buniek je zobrazené v štandardnej veľkosti písma, písmo v bunkách hlavičky je zobrazené tučne.

Dizajn hlavových a dátových buniek [upraviť]

Vo vlastných štandardných nastaveniach prehľadávača vidíte iba stály počet čísel. CSS vám umožňuje navrhnúť hlavičku a údajové bunky tak, aby boli čísla ľahšie čitateľné.

Hlavičky tabuľky majú farbu pozadia a textu.
Písmo v údajových bunkách by malo byť kurzíva a zarovnané doprava, aby veľké hodnoty ihneď vynikli.

Aby prázdna bunka s údajmi vľavo hore nedostala tieň, sú prázdne bunky adresované prázdnej triede pseudo a tieň je opäť odstránený.

Prechod Zebrou [upraviť]

Najmä pri väčších stoloch je jednoduchšie vyfarbiť každý druhý riadok.

Nadpisy riadkov [upraviť]

Pamätáte si bunky záhlavia v každom riadku?

Nadpis návrhu [upraviť]

Titulky obsiahnuté v prvku titulkov sú teraz navrhnuté s páskou:

Pseudoelement vľavo dodáva pásmu trojrozmerný vzhľad.

Tabuľke sa teraz tiež zobrazuje tieň.

Označenie riadkov v: hover [upraviť]

Keď používatelia pohybujú myšou nad tabuľkou, príslušná údajová bunka a zodpovedajúci riadok tabuľky sú farebne zvýraznené:

Príklad federálnych štátov sivá v sivej farbe [upraviť]

V nasledujúcom texte sú spolkové krajiny Spolkovej republiky uvedené v druhom príklade.