19. diel - Vzhľady a nastavenie tabuliek v CSS 3

V predchádzajúcej lekcii, Zoznamy v CSS 3 , sme si ukázali, ako nastaviť vlastné vzhľady zoznamov a ako pracovať s ich vlastnosťami.

Vitajte u ďalšej lekcie ohľadom nastavenia v CSS 3, v ktorej si ukážeme, ako nastaviť vlastný vzhľad tabuľky, aké vytvoriť okraje a ako pracovať s jej obsahom. V tejto lekcii sa teda naučíme nasledujúce:

Vlastnosť table-layout

Pomocou tejto vlastnosti nastavujeme algoritmus výpočtu šírky stĺpcov HTML tabuľky. Šírka stĺpcov sa môže nastavovať podľa ich obsahu, alebo môže byť vypočítaná len podľa šírky tabuľky. Nastavenie platí vždy pre celú tabuľku, pokiaľ nedefinujeme u určitých častí inak. Hodnoty ktoré možno pre vlastnosť použiť sú tieto:

• auto (predvolené) - Šírka stĺpcov sa určuje na základe obsahu buniek, presnejšie je stĺpec široký podľa najdlhšej hodnoty v ňom. Nevýhodou je, že sa musí najprv stiahnuť celý obsah tabuľky, aby prehliadač mohol zistiť veľkosť jednotlivých stĺpcov.
• fixed - Šírka stĺpcov vôbec nezáleží na ich obsahu a určuje sa iba podľa šírky tabuľky. Tabuľka sa môže začať vykresľovať hneď po stiahnutí prvého riadku.
• inherit - Vlastnosť table-layout sa zdedí od rodičovského elementu.

Ukážeme si teda, ako to vlastne vyzerá. V HTML súboru si vytvoríme jednoduchú tabuľku. Tabuľka bude mať štyri riadky a tri stĺpce. V prvom stĺpci bude obrázok postavy, v druhom jej meno a v treťom nejaký 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 prehliadači budeme mať túto tabuľku:

Pre prehľadnosť pridáme k našej tabuľke a jej častiam vlastnosť border (okraj), ktorý nastavíme nasledovne:

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

V tejto chvíli by tabuľka mala vyzerať takto:

Pridáme teda ešte nastavenie celkovej šírky tabuľky width na 60 %, inak je totiž jej šírka nastavená automaticky. Rovnako tak nastavíme aj rozloženie table-layout na hodnotu fixed. Nezabúdajme, že teraz nastavujeme vlastnosti iba pre tabuľku (<table>), pre <th> a <td> nie:

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

Teraz budú mať všetky stĺpce fixné šírku, bez ohľadu na obsah:

Vlastnosť border-spacing

Ďalšia vlastnosť, ktorú si tu ukážeme, je border-spacing. Pomocou nej nastavujeme rozostupy medzi rámčekmi okolo buniek HTML tabuľky. Táto vlastnosť funguje iba v prípade, že tabuľka nemá nastavenú vlastnosť border-collapse, ktorú si ukážeme za chvíľu. Pri jej zápise môžeme použiť buď dve hodnoty pre nastavenie vodorovných a zvislých rozstupov alebo jednu hodnotu, ktorá potom platí tak zvisle tak vodorovne:

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

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

Ako hodnotu teda môžeme nastaviť:

• dĺžka - Dĺžka rozostupu v ľubovoľných jednotkách (px, cm, pt atď.)
• inherit - Vlastnosť border-spacing sa zdedí od rodičovského elementu.

V tomto prípade nastavíme u našej tabuľky vlastnosť border-spacing na hodnotu 10px:

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

Keď sa teraz pozrieme na tabuľku, medzery medzi jednotlivými bunkami sú znateľne väčšie:

Vlastnosť border-collapse

Táto vlastnosť nám umožní nastaviť štýl rámčeka tabuľky tak, aby sa vykresľoval ako jednoduchá čiara. Predvolené správanie rámčekov tabuľky je totiž rámik okolo každej bunky, vo výsledku je teda dvojitý, ako sme si už ukázali. Táto vlastnosť sa nastavuje bunkám, teda elementom <td> a prípadne <th>.

Hodnoty tejto vlastnosti môžu byť:

• collapse - Ohraničenie je spojené z dvoch čiar susedných buniek do jednej.
• separate - Ohraničenie je vykresľovanie okolo každej bunky.
• inherit - Vlastnosť border-collapse sa zdedí od rodičovského elementu.

Keď teda chceme, aby bola tabuľka vykreslená iba s jedným okrajom, pridáme pre elementy <th> a <td> vlastnosť border-collapse na hodnotu collapse:

td, th {
  border-collapse: collapse;
}

Vďaka tomu máme miesto dvoch čiar medzi bunkami iba jednu:

Vlastnosť caption-side

Táto konkrétna vlastnosť nastavuje umiestnenie nadpisu HTML tabuľky. Nadpis vložíme pomocou tagu <caption>. Ten môže byť zobrazený buď nad tabuľkou alebo pod ňou. Možnosti nastavenia hodnôt sú teda pomerne jednoduché:

• top (predvolené) - Nadpis sa vykreslí nad tabuľkou.
• bottom - Nadpis sa vykreslí pod tabuľkou.
• inherit - Vlastnosť caption-side sa zdedí od rodičovského elementu.

Rovnako tak následné použitie nie je nijako zložité. Do nášho HTML kódu si pridáme tag <caption> a následne pre tabuľku v CSS nastavíme vlastnosť 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álne je tu použité presunutie nadpisu pod tabuľku, aby bolo vidieť ako táto vlastnosť funguje. Nezáleží na tom, kde sa v kóde nachádza tag <caption>:

Aj keď sa tento spôsob nadpisov u tabuliek už moc nevyužíva, je dobré vedieť že vlastne existuje.

Vlastnosť empty-cells

Ako posledný si tu ukážeme vlastnosť, pomocou ktorej nastavujeme, či sa má skryť rámček a pozadia prázdnych buniek HTML tabuľky. Hodnoty, ktoré tu možno nastaviť sú opäť veľmi jednoduché:

• show (predvolené) - Prázdne bunky sa vykresľujú.
• hide - Prázdne bunky sa nevykresľujú.
• inherit - Vlastnosť empty-cells sa zdedí od rodičovského elementu.

Aby bol dobre vidieť efekt, musíme ale najskôr v našom CSS kódu zmeniť nastavenie kolízie ohraničenie z border-collapse: collapse; na border-collapse: separate;:

td, th {
  border-collapse: separate;
}

Ak teda teraz v našej HTML tabuľke na poslednom riadku zmažeme obsah dvoch posledných buniek a v CSS pridáme k elementu <table> vlastnosť empty-cells na hodnotu hide:

table {
  empty-cells: hide;
}

Nebudú v tabuľke vidieť žiadne okraje, farby a pod .:

Akékoľvek nastavenia (farba pozadia atď.) Týchto dvoch buniek teda nebude vidieť.

Dokončenie štýlovanie

Do tabuľky pridáme ďalšie CSS, nech aspoň vyzerá trošku dobre:

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 */
}

Pridáme tiež farby buniek, tie som pridal pomocou HTML elementu <colgroup> ihneď pod elementom <caption>:

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

Kód nám hovorí, že chceme zafarbiť prvý stĺpec tabuľky na červeno, druhý na zeleno a posledný na modro. Všimnite si atribútu span u posledného elementu <col>. Ak by sme chceli zafarbiť napríklad ďalší stĺpec na modro (boli by dva posledné modré), dali by sme do atribútu span hodnotu 2. Musíme však pridať ďalší stĺpec tabuľky, inak nám to zobrazí prázdne miesto:)

Ak niečomu nerozumiete, odporúčam stiahnuť si súbory v prílohe k tejto lekcii a všetko si poriadne vyskúšať:)

V ďalšej lekcii, Okraje a rámčeky v CSS 3 , si ukážeme, ako pracovať so vzhľady okrajov, aké im možno nastaviť farby, veľkosť a štýl.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.