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 ©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:
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:
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:
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:
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