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 ©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:
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:
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:
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í:
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 7771x (2.28 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS