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.

Skills

Stránku Skills 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 contact.html.

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

<head>
    <meta charset="utf-8" />
    <meta name="description" content="My skills, which include programming in Java, Pascal and HTML" />
    <meta name="keywords" content="programmer, hobi, skills, java, html, pascal" />
    <meta name="author" content="HoBi" />
    <link rel="shortcut icon" href="images/icon.ico" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <title>Skills</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 skills.html:

<header>
    <div id="logo">
        <h1>Honza<span>Bittner</span></h1>
        <small>webdeveloper</small>
    </div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="aboutme.html">About&nbsp;Me</a></li>
                <li class="active"><a href="skills.html">Skills</a></li>
                <li><a href="references.html">References</a></li>
                <li><a class="contact-button" href="contact.html">Contact</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>Skills</h1>
    </header>

    <section>
        <table id="skills">
            <tr class="centered">
                <td>
                    <img src="images/html.png" alt="HTML" />
                </td>
                <td>
                    <img src="images/java.png" alt="Java" />
                </td>
                <td>
                    <img src="images/pascal.png" alt="Pascal" />
                </td>
            </tr>
            <tr>
                <td>
                    <h2>HTML</h2>
                    <p>I'm new to HTML and can create simple web pages like these.</p>
                </td>
                <td>
                    <h2>Java</h2>
                    <p>I learn Java from tutorials on ITnetwork.sk, I can create simple console and window applications.</p>
                </td>
                <td>
                    <h2>Pascal</h2>
                    <p>They teach us Pascal at school, but I prefer to learn modern languages from 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>
   Created by &copy;HoBi 2021 for <a href="https://itnetwork.sk">itnetwork.sk</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 skills:

<table id="skills">

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:

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

Výsledok:

Skills

skills.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:

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

Naša stránka teraz vyzerá takto:

Skills

skills.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ý:

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

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

Skills

skills.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:

#skills {
    border-collapse: collapse;
}

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

Skills

skills.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="skills">
    <tr class="centered">
        ...

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="images/avatar.jpg" class="avatar" alt="Programmer HoBi" />

    <p>
        Welcome to my first website. I'm just learning how to create websites, but I think I'm doing quite well.
    </p>
    <p>
        My name is Honza Bittner and I am 16 years old. I attend the Secondary Industrial School in Česká Lípa, specializing in IT. You can contact me at <a href="contact.html">contact page</a>.
    </p>
    <p>
        I like reading and sometimes (especially in summer) doing sports.
    </p>
    <p>My main hobby (and hopefully my future job) is <strong>programming</strong>!</p>

    <p class="paragraph-button">
        <a href="references.html" class="references-button">My References</a>
    </p>
    <div class="cleaner"></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é 7588x (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

Skills

Štylovanie tabuľky

Úprava index.html

Stiahnuť

Úprava `index.html`