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 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 ©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:
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:
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:
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:
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é 7595x (2.28 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS