Lekce 21 - Stylování tabulek v HTML a CSS

V minulé lekci, Meta tagy, tvorba podstránek a kontaktní formulář, jsme si představili meta tagy a začali dokončovat jednotlivé podstránky.

Dnes v HTML/CSS tutoriálu upravíme sekci dovednosti a budeme stylovat tabulku.

Dovednosti

Stránku Dovednosti již máme z části připravenou z prvních dílů seriálu. Opět ji upravíme tak, aby v ní byl vložený celý layout, jako jsme to již udělali se stránkou kontakt.html.

Hlavička <head> stránky dovednosti.html bude vypadat 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>

Dále na začátek elementu <body> přidáme <header> s logem a navigačním menu <nav>. V navigačním menu nezapomeneme přiřadit třídu aktivni tagu <li> s odkazem právě 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 výše přidaný <header> vložíme článek <article>, jehož hlavním obsahem bude naše již vytvořená tabulka s dovednostmi. Tuto tabulku tedy převedeme do tagu <section> a článku ještě 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ánce na konec <body> ještě přidáme také <footer> stejně, jako ho již máme na stránkách předtím:

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

Stylování tabulky

Protože již známe CSS trochu lépe, tabulku si ostylujeme. Jako první ji dáme nějaké ID, abychom ji mohli v CSS jednoznačně vybrat. Nabízí se dovednosti:

<table id="dovednosti">

Hlavním problémem je, že nemáme sloupce (buňky) stejně široké. Že to tak vypadá je jen náhoda, jelikož text je ve všech buňkách podobně dlouhý. Připíšeme-li něco do jedné z buněk, buňky se rozšíří. Každé buňce proto nastavíme šířku na 33% a nějaký padding.

Do CSS souboru si tedy přidáme nový selektor:

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

Výsledek:

Dovednosti

dovednosti.html

Jak vidíte, obsah v buňce tabulky se ve výchozím nastavení centruje svisle. To se nám nehodí, protože bychom chtěli mít nadpisy ve stejné výšce, zarovnané shora. To nastavíme opět všem buňkám pomocí CSS vlastnosti vertical-align s hodnotou top:

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

Naše stránka nyní vypadá takto:

Dovednosti

dovednosti.html

K zarovnání na střed použijeme hodnotu middle, k zarovnání dolů bottom. Tato vlastnost funguje pouze u tabulek, v ostatních elementech se bohužel takto jednoduše centrovat nedá. Opět narážíme na nechvalně proslulé centrování v CSS.

Neukazovali jsme si ještě, jak se styluje rámeček tabulky. Je to velmi podobné jako stylování rámečku ostatních elementů, avšak tabulka má rámeček dvojitý. Zkusme si opět v tom samém selektoru nastavit rámeček všech buněk na šedý, 1px tlustý:

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

Výsledek po nastavení rámečku vypadá takto:

Dovednosti

dovednosti.html

Vidíme, že to není úplně to, co bychom chtěli. Rámečky slijeme pomocí vlastnosti border-collapse, nastavené na hodnotu collapse. Tu však nenastavíme buňkám, ale celé tabulce:

#dovednosti {
    border-collapse: collapse;
}

Výsledek již vypadá dle očekávání:

Dovednosti

dovednosti.html

Poslední vadou na kráse naší tabulky jsou nevycentrované obrázky v prvním řádku. Budeme chtít vycentrovat obsah jen tohoto jednoho řádku a zbytek řádků nechat zarovnaný doleva (dlouhý vycentrovaný text je špatně čitelný). Možností je více, a tou nejjednodušší je dát řádku naši třídu centrovany:

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

Dokončili jsme tedy další podstránku, celý její kód naleznete v příloze na konci článku.

Úprava `index.html`

Aby stránka index.html souhlasila s požadovaným designem, tak si z jejího článku ještě odebereme odkaz na nově upravenou stránku s dovednostmi. Element <section> upravíme do následující 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ši dnešní práci najdete opět v příloze.

V příští lekci, Galerie obrázků v HTML/CSS, web dokončíme. Připravíme si poslední sekci referencí a vložíme do ní galerii. Ukážeme si doplněk Lightbox.

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

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 8191x (2.28 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

Článek pro vás napsal David Hartinger

Uživatelské hodnocení:

2547 hlasů

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

David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.

Aktivity

Nejčastěji vyhledáváné

Lekce 21 - Stylování tabulek v HTML a CSS

Dovednosti

Stylování tabulky

Úprava index.html

Stáhnout

Úprava `index.html`