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, JavaScript and HTML" />
    <meta name="keywords" content="programmer, SaBi, skills, java, spring boot, html, javascript" />
    <meta name="author" content="SaBi" />
    <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>Sam<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>
            <tr>
                <td>
                    <img src="/images/html.png" alt="HTML" />
                </td>
                <td>
                    <img src="/images/js.png" alt="JavaScript" />
                </td>
                <td>
                    <img src="/images/java.png" alt="Java" />
                </td>
                <td>
                    <img src="/images/spring-ico.png" alt="Spring Boot" />
                </td>
            </tr>
            <tr>
                <td>
                    <h2>HTML</h2>
                    <p>With my expertise in HTML, I can structure web content effectively, ensuring it is semantic, accessible, and optimized for search engines.</p>
                </td>
                <td>
                    <h2>JavaScript</h2>
                    <p>Thanks to my proficiency in JavaScript, I can create dynamic, interactive front-end interfaces.</p>
                </td>
                <td>
                    <h2>Java</h2>
                    <p>I learn Java from tutorials on ictdemy.com, enabling me to develop interactive web applications and efficient backend services.</p>
                </td>
                <td>
                    <h2>Spring Boot</h2>
                    <p>I built upon my Java skills with Spring Boot, enabling me to efficiently create RESTful APIs, manage data persistence, and implement security features.</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;SaBi 2024 for <a href="https://ictdemy.com">ictdemy.com</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 25% a nejaký padding.

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

#skills td {
    width: 25%;
    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: 25%;
    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: 25%;
    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 SaBi" />

    <p>
        Welcome! I'm thrilled to help you transform your ideas into stunning, <strong>high-performing websites</strong>.
    </p>

    <p>
        I'm Sam Bittner, a web developer with a passion for creating dynamic and responsive websites. I have expertise in various technologies, including HTML, CSS, JavaScript, and Java with Spring Boot.
    </p>

    <p>
        When I'm not coding, I love reading tech blogs, experimenting with new frameworks, and engaging in outdoor activities.
    </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é 7x (2.29 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:

12 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`