18. CSS - formátování tabulky

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR EU PENÍZE ŠKOLÁM
Číslo projektu CZ.1.07/1.4.00/21.2732
Název projektu školy EU Peníze školám
Klíčová aktivita III/2 Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_18

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: CSS - formátování tabulky

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Používání vybraných CSS vlastností pro formátování tabulky.

Klíčová slova: formát tabulky, border-collapse, border-spacing.

Metodické zhodnocení: Žáci se naučí používat vybrané CSS vlastnosti pro formátování tabulky.

Ověřeno: 7. 3. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

18.1 CSS - formátování tabulky (studijní text)

Při formátování tabulky je potřeba dbát na to, kterou část tabulky chcete upravovat. Jak už víte, tabulka se skládá z několika částí (hlavička, tělo, řádek, buňka, atd.).

Podle toho, jakou část chcete upravovat, musíte přizpůsobit značkové selektory pomocí kontextového zápisu (viz. CSS - vlastní a složené styly).

Kontextový zápis podle části tabulky

Upravovaná část tabulky Kontextový zápis selektoru
Celá tabulka table {...}
Celá hlavička tabulky table thead {...}
Celé tělo tabulky table tbody {...}
Všechny buňky hlavičky table th {...}
Všechny ostatní buňky table td {...}

Pokud byste chtěli upravovat jen některé řádky nebo sloupce tabulky musíte si vytvořit vlastní styly a tyto styly přiřadit daným částem.

<table>
  <thead>
    <tr>
      <th>řádek 1, sloupce 1</th>
      <th class="druhy-sloupec">řádek 1, sloupce 2</th>
    </tr>
  </thead>
  <tbody>
    <tr class="druhy-radek">
      <td>řádek 2, sloupce 1</td>
      <td class="druhy-sloupec">řádek 2, sloupec 2</td>
    </tr>
    <tr>
      <td>řádek 3, sloupce 1</td>
      <td class="druhy-sloupec">řádek 3, sloupec 2</td>
    </tr>
  </tbody>
</table>

Všimněte si, že pokud chcete upravit jeden řádek, stačí přiřadit vlastní styl pouze jednou (třída stylu "druhy-radek"). Naopak, pokud chcete upravit jeden sloupec, musíte vlastní styl přiřadit v každém řádku tabulky (třída stylu "druhy-sloupec").

CSS vlastnosti použitelné při formátování tabulky

border-collapse

  • ohraničení buněk v tabulce se standardně vykresluje s mezerou
  • pokud chcete sloučit ohraničení (odstranit mezeru) použijte vlastnost border-collapse
  • funguje jen pro HTML značku <table>
  • hodnoty této vlastnosti jsou jen dvě:
    • collapse (sousední buňky mají společné ohraničení)
    • separate (výchozí oddělené ohraničení buněk)
table {border-collapse: collapse}

border-spacing

  • nastavení vzdálenosti mezi buňkami (v pixelech)
  • nahrazuje HTML atribut cellspacing
  • funguje jen pro HTML značku <table> a pokud není nastaveno společné ohraničení border-collapse
table {border-spacing: 5px}

Další formátování tabulky

Formátování CSS vlastnost
Písmo a text vlastnosti pro písmo a text (font-size, font-family, atd.)
Ohraničení tabulky nebo buněk vlastnost border (nahrazuje HTML atribut border)
Pozadí tabulky nebo buněk vlastnost background-color či background-image
Zarovnání textu v buňkách vlastnost text-align (nahrazuje HTML atribut align)
Šířka tabulky nebo buněk vlastnost width (nahrazuje HTML atribut width)
Výška tabulky nebo buněk vlastnost height (nahrazuje HTML atribut height)
Vzdálenost tabulky od okolního obsahu vlastnost margin
Vzdálenost obsahu buňky od jejího ohraničení vlastnost padding (nahrazuje atribut cellpadding)
Vzdálenost mezi jednotlivými buňkami vlastnost border-spacing (nahrazuje cellspacing)

Problematika vodorovného zarovnání tabulky vůči okolnímu obsahu

  • stejně jako u obrázků, tak tabulku nelze vycentrovat pomocí vlastnosti text-align
  • řešením je nastavit tabulce automatický levý a pravý vnější okraj (margin)
  • aby bylo možné automaticky dopočítat vnější okraj, tabulka musí mít nastavenu šířku (width)
table {width: 500px; margin: 0px auto}
  • bohužel toto nefunguje v Internet Exploreru
  • zde je řešení upravit první řádek HTML dokumentu zapnutím standardního módu
<!DOCTYPE HTML>

18.2 CSS - formátování tabulky (cvičení)

Úkol

  • Ve složce WWW si vytvořte složku 18.
  • Ze složky 17 si zkopírujte všechny potřebné soubory.
  • Souborem style.css upravte vloženou tabulku takto:
    • přidejte na konec komentář "CV18",
    • šířka tabulky: 600 pixelů,
    • tabulka bude vycentrovaná na střed okna,
    • horní a dolní vnější okraj tabulky: 10 pixelů,
    • výška řádků: 30 pixelů,
    • šířka 1. sloupce: 45 % (pomocí vlastního stylu: "prvni-sloupec"),
    • šířka 2. sloupce: 40 % (pomocí vlastního stylu: "druhy-sloupec"),
    • šířka 3. sloupce: 15 % (pomocí vlastního stylu: "treti-sloupec"),
    • ohraničení tabulky: 4 pixely, plné, barva Navy (RGB kódem),
    • ohraničení buněk: 1 pixel, plné barva Navy (RGB kódem),
    • barva pozadí záhlaví tabulky: Navy (RGB kódem),
    • barva textu záhlaví tabulky: White (RGB kódem),
    • font záhlaví tabulky: tučně, velikost 11 bodů (pt) typ písma Verdana,
    • sousední buňky nebudou mít společné ohraničení.
  • Zkontrolujte na případné chyby a uložte.