Lekce 11 - Vzhledy a nastavení tabulek v CSS3

V předchozí lekci, Seznamy v CSS3, jsme si ukázali, jak nastavit vlastní vzhledy seznamů a jak pracovat s jejich vlastnostmi.

Vítejte u další lekce ohledně nastavení v CSS3, ve které si ukážeme, jak nastavit vlastní vzhled tabulky, jaké vytvořit okraje a jak pracovat s jejím obsahem. V této lekci se tedy naučíme následující:

Vlastnost table-layout

Pomocí této vlastnosti nastavujeme algoritmus výpočtu šířky sloupců HTML tabulky. Šířka sloupců se může nastavovat podle jejich obsahu, nebo může být vypočtena jen podle šířky tabulky. Nastavení platí vždy pro celou tabulku, pokud nedefinujeme u určitých částí jinak. Hodnoty které lze pro vlastnost použít jsou tyto:

• auto (výchozí) - Šířka sloupců se určuje na základě obsahu buněk, přesněji je sloupec široký podle nejdelší hodnoty v něm. Nevýhodou je, že se musí nejprve stáhnout celý obsah tabulky, aby prohlížeč mohl zjistit velikost jednotlivých sloupců.
• fixed - Šířka sloupců vůbec nezáleží na jejich obsahu a určuje se pouze podle šířky tabulky. Tabulka se může začít vykreslovat hned po stažení prvního řádku.
• inherit - Vlastnost table-layout se zdědí od rodičovského elementu.

Ukážeme si tedy, jak to vlastně vypadá. V HTML souboru si vytvoříme jednoduchou tabulku. Tabulka bude mít čtyři řádky a tři sloupce. V prvním sloupci bude obrázek postavy, v druhém její jméno a ve třetím nějaký popis:

  <table>
    <tr>
        <th>Obrázek</th>
        <th>Jméno</th>
        <th>Popis</th>
    </tr>
    <tr>
        <td><img src="homer.png"></td>
        <td>Homer</td>
        <td>Má rád koblihy.</td>
    </tr>
    <tr>
        <td><img src="bart.png"></td>
        <td>Bart</td>
        <td>Rošťák největšího kalibru.</td>
    </tr>
    <tr>
        <td><img src="lisa.png"></td>
        <td>Lisa</td>
        <td>Chytrá holka s IQ 159.</td>
    </tr>
</table>

V prohlížeči budeme mít tuto tabulku:

Pro přehlednost přidáme k naší tabulce a jejím částem vlastnost border (okraj), který nastavíme následovně:

table, td, th {
  border: 1px solid black;
}

V tuto chvíli by tabulka měla vypadat takto:

Přidáme tedy ještě nastavení celkové šířky tabulky width na 60 %, jinak je totiž její šířka nastavena automaticky. Stejně tak nastavíme i rozložení table-layout na hodnotu fixed. Nezapomínejme, že teď nastavujeme vlastnosti pouze pro tabulku (<table>), pro <th> a <td> ne:

table {
  width: 60%;
  table-layout: fixed;
}

Nyní budou mít všechny sloupce fixní šířku, bez ohledu na obsah:

Vlastnost border-spacing

Další vlastnost, kterou si zde ukážeme, je border-spacing. Pomocí ní nastavujeme rozestupy mezi rámečky okolo buněk HTML tabulky. Tato vlastnost funguje pouze v případě, že tabulka nemá nastavenou vlastnost border-collapse, kterou si ukážeme za chvíli. Při jejím zápisu můžeme použít buď dvě hodnoty pro nastavení vodorovných a svislých rozestupů nebo jednu hodnotu, která poté platí jak svisle tak vodorovně:

border-spacing: 3px 2px; (rozestup 3px vodorovně a 2px svisle)

border-spacing: 5px; (rozestupy 5px vodorovně i svisle)

Jako hodnotu tedy můžeme nastavit:

• délka - Délka rozestupu v libovolných jednotkách (px, cm, pt atd.)
• inherit - Vlastnost border-spacing se zdědí od rodičovského elementu.

V tomto případě nastavíme u naší tabulky vlastnost border-spacing na hodnotu 10px:

table {
  width: 60%;
  table-layout: fixed;
  border-spacing: 10px;
}

Když se teď podíváme na tabulku, mezery mezi jednotlivými buňkami jsou znatelně větší:

Vlastnost border-collapse

Tato vlastnost nám umožní nastavit styl rámečku tabulky tak, aby se vykresloval jako jednoduchá čára. Výchozí chování rámečků tabulky je totiž rámeček okolo každé buňky, ve výsledku je tedy dvojitý, jak jsme si již ukázali. Tato vlastnost se nastavuje buňkám, tedy elementům <td> a případně <th>.

Hodnoty této vlastnosti mohou být:

• collapse - Ohraničení je spojeno ze dvou čar sousedních buněk do jedné.
• separate - Ohraničení je vykreslováno okolo každé buňky.
• inherit - Vlastnost border-collapse se zdědí od rodičovského elementu.

Když tedy chceme, aby byla tabulka vykreslena pouze s jedním okrajem, přidáme pro elementy <th> a <td> vlastnost border-collapse na hodnotu collapse:

td, th {
  border-collapse: collapse;
}

Díky tomu máme místo dvou čar mezi buňkami pouze jednu:

Vlastnost caption-side

Tato konkrétní vlastnost nastavuje umístění nadpisu HTML tabulky. Nadpis vložíme pomocí tagu <caption>. Ten může být zobrazen buď nad tabulkou nebo pod ní. Možnosti nastavení hodnot jsou tedy poměrně jednoduché:

• top (výchozí) - Nadpis se vykreslí nad tabulkou.
• bottom - Nadpis se vykreslí pod tabulkou.
• inherit - Vlastnost caption-side se zdědí od rodičovského elementu.

Stejně tak následné použití není nijak složité. Do našeho HTML kódu si přidáme tag <caption> a následně pro tabulku v CSS nastavíme vlastnost caption-side na hodnotu bottom:

<table>
<caption>Simpsonovi</caption>
    <tr>
        <th>Obrázek</th>
        <th>Jméno</th>
        <th>Popis</th>
    </tr>
 ...

CSS:

table {
  width: 60%;
  table-layout: fixed;
  border-spacing: 10px;
  caption-side: bottom;
}

Schválně je zde použito přesunutí nadpisu pod tabulku, aby bylo vidět jak tato vlastnost funguje. Nezáleží na tom, kde se v kódu nachází tag <caption>:

I když se tento způsob nadpisů u tabulek již moc nevyužívá, je dobré vědět že vlastně existuje.

Vlastnost empty-cells

Jako poslední si zde ukážeme vlastnost, pomocí které nastavujeme, zda se má skrýt rámeček a pozadí prázdných buněk HTML tabulky. Hodnoty, které zde lze nastavit jsou opět velice jednoduché:

• show (výchozí) - Prázdné buňky se vykreslují.
• hide - Prázdné buňky se nevykreslují.
• inherit - Vlastnost empty-cells se zdědí od rodičovského elementu.

Aby byl dobře vidět efekt, musíme ale nejdříve v našem CSS kódu změnit nastavení kolize ohraničení z border-collapse: collapse; na border-collapse: separate;:

td, th {
  border-collapse: separate;
}

Pokud tedy nyní v naší HTML tabulce na posledním řádku smažeme obsah dvou posledních buněk a v CSS přidáme k elementu <table> vlastnost empty-cells na hodnotu hide:

table {
  empty-cells: hide;
}

Nebudou v tabulce vidět žádné okraje, barvy apod.:

Jakékoliv nastavení (barva pozadí atd.) těchto dvou buněk tedy nebude vidět.

Dokončení stylování

Do tabulky přidáme další CSS, ať alespoň vypadá trošku dobře:

table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* pro pěknější písmo*/
  text-align: center; /* pro vycentrování obrázků a textu v tabulce */
}
td {
  padding: 0.5rem; /* pro vnitřní odsazení, ať není text a obrázky nalepené na okrajích */
}

Přidáme také barvy buněk, ty jsem přidal pomocí HTML elementu <colgroup> ihned pod elementem <caption>:

<colgroup>
    <col style="background: #FFBBBB;">
    <col style="background: #AAFFAA">
    <col span="1" style="background: #BBBBFF;">
</colgroup>

Kód nám říká, že chceme obarvit první sloupec tabulky na červeno, druhý na zeleno a poslední na modro. Všimněte si atributu span u posledního elementu <col>. Pokud bychom chtěli obarvit například další sloupec na modro (byly by dva poslední modré), dali bychom do atributu span hodnotu 2. Musíme však přidat další sloupec tabulky, jinak nám to zobrazí prázdné místo

Pokud něčemu nerozumíte, doporučuji stáhnout si soubory v příloze k této lekci a vše si pořádně vyzkoušet

V následujícím kvízu, Kvíz - Text a písmo podruhé, seznamy a tabulky v CSS3, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.