21. diel - Štylovanie tabuliek v HTML a CSS

V minulej lekcii, Meta tagy, tvorba podstránok a kontaktný formulár , sme si predstavili meta tagy a začali dokončovať jednotlivé podstránky.

Dnes v HTML/CSS tutoriále upravíme sekciu zručnosti a budeme štylovať tabuľku.

Zručnosti

Stránku Zručnosti už máme z časti pripravenú z prvých dielov seriálu. Opäť ju upravíme tak, aby v nej bol vložený celý layout, ako sme to už urobili so stránkou kontakt.html.

Hlavička <head> stránky dovednosti.html bude vyzerať takto:

<head>
    <meta charset="utf-8" />
    <meta name="description" content="Mé dovednosti, mezi které patří programování v Javě, Pascalu a HTML" />
    <meta name="keywords" content="programátor, hobi, dovednosti, java, html, pascal" />
    <meta name="author" content="HoBi" />
    <link rel="shortcut icon" href="obrazky/ikona.ico" />
    <link rel="stylesheet" href="styl.css" type="text/css" />
    <title>Dovednosti</title>
</head>

Ďalej na začiatok elementu <body> pridáme <header> s logom a navigačným menu <nav>. V navigačnom menu nezabudneme priradiť triedu aktivni tagu <li> s odkazom práve na dovednosti.html:

<header>
    <div id="logo">
        <h1>Honza<span>Bittner</span></h1>
        <small>webdeveloper</small>
    </div>
    <nav>
        <ul>
            <li><a href="index.html">Domů</a></li>
            <li><a href="omne.html">O mně</a></li>
            <li class="aktivni"><a href="dovednosti.html">Dovednosti</a></li>
            <li><a href="reference.html">Reference</a></li>
            <li><a class="kontakt-tlacitko" href="kontakt.html">Kontakt</a></li>
        </ul>
    </nav>
</header>

Pod vyššie pridaný <header> vložíme článok <article>, ktorého hlavným obsahom bude naša už vytvorená tabuľka so schopnosťami. Túto tabuľku teda prevedieme do tagu <section> a článku ešte nastavíme nadpis <header>:

<article>
        <header>
            <h1>Dovednosti</h1>
        </header>

        <section>
            <table>
                <tr>
                    <td>
                        <img src="obrazky/html.png" alt="HTML" />
                    </td>
                    <td>
                        <img src="obrazky/java.png" alt="Java" />
                    </td>
                    <td>
                        <img src="obrazky/pascal.png" alt="Pascal" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <h2>HTML</h2>
                        <p>S HTML začínám a umím vytvořit jednoduché webové stránky, jako jsou tyto.</p>
                    </td>
                    <td>
                        <h2>Java</h2>
                        <p>Javu se učím z tutoriálů na itnetwork.cz, dokáži tvořit jednoduché konzolové i okenní aplikace a programovat objektově.</p>
                    </td>
                    <td>
                        <h2>Pascal</h2>
                        <p>Pascal nás učí ve škole, ale raději se učím moderní jazyky z ITnetwork.</p>
                    </td>
                </tr>
            </table>
        </section>
</article>

Stránke na koniec <body> ešte pridáme tiež <footer> rovnako, ako ho už máme na stránkach predtým:

<footer>
    Vytvořil &copy;HoBi 2021 pro <a href="https://itnetwork.cz">itnetwork.cz</a>
</footer>

Štylovanie tabuľky

Pretože už poznáme CSS trochu lepšie, tabuľku si ostylujeme. Ako prvú ju dáme nejaké ID, aby sme ju mohli v CSS jednoznačne vybrať. Ponúka sa dovednosti:

<table id="dovednosti">

Hlavným problémom je, že nemáme stĺpce (bunky) rovnako široké. Že to tak vyzerá je len náhoda, pretože text je vo všetkých bunkách podobne dlhý. Ak pripíšeme niečo do jednej z buniek, bunky sa rozšíria. Každej bunke preto nastavíme šírku na 33% a nejaký padding.

Do CSS súboru si teda pridáme nový selektor:

#dovednosti td {
    width: 33%;
    padding: 10px;
}

Výsledok:

Dovednosti

dovednosti.html

Ako vidíte, obsah v bunke tabuľky sa v predvolenom nastavení centruje zvisle. To sa nám nehodí, pretože by sme chceli mať nadpisy v rovnakej výške, zarovnané zhora. To nastavíme opäť všetkým bunkám pomocou CSS vlastnosti vertical-align s hodnotou top:

#dovednosti td {
    width: 33%;
    padding: 10px;
    vertical-align: top;
}

Naša stránka teraz vyzerá takto:

Dovednosti

dovednosti.html

Na zarovnanie na stred použijeme hodnotu middle, na zarovnanie dole bottom. Táto vlastnosť funguje iba pri tabulkách, v ostatných elementoch sa bohužiaľ takto jednoducho centrovať nedá. Opäť narážame na neslávne preslávené centrovanie v CSS.

Neukazovali sme si ešte, ako sa štyluje rámček tabuľky. Je to veľmi podobné ako štylovanie rámčeku ostatných elementov, avšak tabuľka má rámček dvojitý. Skúsme si opäť v tom istom selektore nastaviť rámček všetkých buniek na šedý, 1px hrubý:

#dovednosti td {
    width: 33%;
    padding: 10px;
    vertical-align: top;
    border: 1px solid gray;
}

Výsledok po nastavení rámčeka vyzerá takto:

Dovednosti

dovednosti.html

Vidíme, že to nie je úplne to, čo by sme chceli. Rámčeky zlejeme pomocou vlastnosti border-collapse, nastavenej na hodnotu collapse. Tú však nenastavíme bunkám, ale celej tabuľke:

#dovednosti {
    border-collapse: collapse;
}

Výsledok už vyzerá podľa očakávania:

Dovednosti

dovednosti.html

Poslednou chybou na kráse našej tabuľky sú nevycentrované obrázky v prvom riadku. Budeme chcieť vycentrovať obsah len tohto jedného riadku a zvyšok riadkov nechať zarovnaný doľava (dlhý vycentrovaný text je zle čitateľný). Možností je viac, a tou najjednoduchšou je dať riadku našu triedu centrovany:

...
<table id="dovednosti">
    <tr class="centrovany">
        ...

Dokončili sme teda ďalšiu podstránku, celý jej kód nájdete v prílohe na konci článku.

Úprava `index.html`

Aby stránka index.html súhlasila s požadovaným dizajnom, tak si z jej článku ešte odoberieme odkaz na novo upravenú stránku so schopnosťami. Element <section> upravíme do nasledujúcej podoby:

<section>
    <img src="obrazky/avatar.jpg" class="avatar" alt="Programátor HoBi" />
    <p>
        Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde.
    </p>

    <p>
        Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT.
        Kontaktovat mě můžete na <a href="kontakt.html">kontaktní stránce</a>.
    </p>

    <p>
        Rád čtu a někdy (hlavně v létě) i sportuju.
    </p>

    <p>
        Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je <strong>programování</strong>!
    </p>

    <p class="tlacitko-odstavec">
        <a href="reference.html" class="reference-tlacitko">Moje reference</a>
    </p>
    <div class="cistic"></div>
</section>

Našu dnešnú prácu nájdete opäť v prílohe.

V budúcej lekcii, Galéria obrázkov v HTML/CSS , web dokončíme. Pripravíme si poslednú sekciu referencií a vložíme do nej galériu. Ukážeme si doplnok Lightbox.

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š.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 7561x (2.28 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

Článok pre vás napísal David Hartinger

Užívateľské hodnotenie:

2 hlasov

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.

Aktivity

21. diel - Štylovanie tabuliek v HTML a CSS

Zručnosti

Štylovanie tabuľky

Úprava index.html

Stiahnuť

Úprava `index.html`