Při práci s HTML (Hypertext Markup Language) a jinými značkovacími jazyky, jako je například XML, se často setkáváme s různými atributy a značkami. Tabulky představují klíčový prvek, který by měl být vždy využíván, aby uživatelům usnadnil rychlé procházení, srovnávání a analyzování obsáhlých datových souborů.
Díky tabulkám mohou uživatelé na první pohled snadno rozpoznat důležité body, závěry či výsledky, a to i bez nutnosti čtení celého textu. Vzhled a styl tabulek je možné měnit pomocí kaskádových stylů (CSS).
Následují některé z důvodů, proč je úprava stylu tabulek ve vaší aplikaci výhodná:
- Zlepšení vizuálního vzhledu: Standardní tabulky mohou vypadat nezajímavě a jednoduše. Stylizace takových tabulek zlepší jejich vzhled a učiní je atraktivnější pro uživatele.
- Zvýšení přístupnosti: Stylování tabulek může zpřístupnit informace i lidem s různými druhy postižení.
- Zlepšení čitelnosti: Pomocí různých technik stylingu lze uživatelům usnadnit orientaci v datech zobrazených v tabulkách.
- Branding: Používáním konzistentních fontů a barev v tabulkách napříč celou aplikací můžete posílit identitu vaší značky.
- SEO optimalizace: Strukturování dat do tabulkového formátu je užitečné pro zlepšení pozice vašeho webu ve vyhledávačích.
Vytvoření základní tabulky pomocí HTML
Pro demonstraci fungování tabulky v HTML vytvoříme projektovou složku, do níž následně umístíme dva soubory: index.html, který bude obsahovat HTML kód, a styles.css pro CSS styly.
Pro zahájení práce použijte následující příkazy:
mkdir Styling-HTML-Tabulky
cd Styling-HTML-Tabulky
touch index.html styles.css
Nyní máte připravenou základní složku projektu pro tvorbu HTML tabulek. V této ukázce se zaměříme na představení různých programovacích jazyků, jejich využití a příklady firem, které je používají.
Pro vytvoření HTML tabulky musí být všechna data uzavřena ve značce <table>...</table>.
Do souboru HTML vložte základní strukturu HTML dokumentu a do značky <body> přidejte následující kód:
<table>
<tr>
<th>Jazyk</th>
<th>Běžné použití</th>
<th>Společnosti používající</th>
</tr>
<tr>
<td>Java</td>
<td>Webové aplikace, Android aplikace, podnikové aplikace</td>
<td>Google, Amazon, LinkedIn</td>
</tr>
<tr>
<td>Python</td>
<td>Datová věda, vývoj webu, automatizace</td>
<td>Google, Dropbox, Spotify</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Vývoj webu, front-end vývoj, skriptování prohlížeče</td>
<td>PayPal, Facebook, Netflix</td>
</tr>
<tr>
<td>C++</td>
<td>Vývoj her, programování systémů, vestavěné systémy</td>
<td>Tesla, Microsoft, Adobe</td>
</tr>
<tr>
<td>Swift</td>
<td>Vývoj pro iOS, vývoj pro macOS</td>
<td>Apple</td>
</tr>
<tr>
<td>PHP</td>
<td>Vývoj webu, server-side skriptování, CMS</td>
<td>WordPress, Wikipedia, Yahoo</td>
</tr>
</table>
Při bližším pohledu na tuto tabulku si všimneme několika dalších tagů uvnitř značky <table>: <tr>, <th> a <td>.
Tyto značky mají následující funkce:
<tr>(table row, řádek tabulky) je uzavřen v prvku<table>. Tag<tr>může obsahovat jeden nebo více prvků<th>a<td>.<th>(table header, záhlaví tabulky) je obsaženo ve značce<tr>. Ve výchozím nastavení je jeho obsah zobrazen tučně.<td>(table data, data tabulky) popisuje obsah buněk tabulky.
Po zobrazení výše uvedeného kódu v prohlížeči se tabulka zobrazí v základní podobě.
Vlastnosti CSS používané pro stylizaci tabulek
Tabulka, kterou jsme vytvořili, je plně funkční, ale její vzhled není příliš atraktivní. Pro dosažení požadovaného vzhledu tabulky použijeme CSS.
Vzpomeňte si na soubor styles.css, který jsme vytvořili. Nyní jej využijeme. Pro správnou funkci stylů je nejprve nutné importovat CSS soubor do HTML dokumentu. Vložte následující řádek do sekce <head> vašeho HTML souboru:
<link rel="stylesheet" href="styles.css">
Nyní můžeme začít s úpravou naší tabulky. Můžeme ji stylovat následovně:
#1. Okraj
Kolem buněk tabulky můžeme přidat okraje. Definujeme vlastnost border pro prvky <th> a <td>. Okraj můžeme nastavit na šířku 2px.
th, td {
border: 2px solid orange;
}
Hodnotu okraje jsme nastavili na 2 a barvu na oranžovou.
Po zobrazení stránky v prohlížeči se tabulka zobrazí s okraji.
#2. Slučování okrajů
Na předchozím snímku obrazovky si můžete všimnout, že mezi okraji jednotlivých buněk jsou mezery. Vlastnost border-collapse určuje, zda mají sousední buňky v tabulce sdílet okraje.
Pokud chcete, aby buňky sdílely okraje, přidejte tento kód do souboru CSS:
table {
border-collapse: collapse;
}
Při zobrazení stránky uvidíte, že buňky sdílejí okraje.
Pokud chcete, aby měly buňky oddělené okraje, přidejte do svého CSS souboru následující:
table {
border-collapse: separate;
}
Vykreslená stránka se zobrazí s oddělenými okraji buněk.
#3. Mezery mezi okraji
Pomocí vlastnosti border-spacing můžeme vytvořit malé mezery mezi buňkami. Tuto vlastnost definujeme uvnitř třídy table v CSS souboru.
Aby tato vlastnost správně fungovala, je nutné použít vlastnost border-collapse: separate;.
Třídu table můžeme upravit následovně:
table {
border-collapse: separate;
border-spacing: 3px;
}
Okraje buněk budou od sebe vzdáleny 3px.
Po zobrazení tabulky v prohlížeči si můžete všimnout mezer mezi buňkami.
#4. Rozvržení tabulky
Vlastnost table-layout určuje způsob, jakým se tabulka chová. Můžete mít tabulky s buňkami vždy stejné délky, nebo tabulky, které mění svou velikost v závislosti na obsahu.
Pokud chceme, aby buňky měly stejnou velikost, můžeme vlastnost table-layout nastavit jako fixed.
table-layout: fixed;
Konečný kód v třídě table bude vypadat takto:
table {
border-collapse: collapse;
border-spacing: 3px;
table-layout: fixed;
}
Pokud chceme, aby se velikost buněk měnila podle obsahu, můžeme změnit vlastnost table-layout na auto.
table-layout: auto;
Poslední třída table v našem CSS kódu bude vypadat následovně:
Všimněte si poslední buňky v tabulce, kde jsem přidal text „MailChimp a mnoho dalšího“.
Nyní můžete vidět, že buňky v posledním řádku jsou větší než ostatní, protože rozvržení tabulky je flexibilní dle obsahu.
Stylizace, kterou jsme se dosud zabývali, se zaměřovala na celou tabulku. Nyní se můžeme zaměřit na jednotlivé třídy změnou barvy pozadí, fontu a zarovnání textu pro řádky, buňky nebo záhlaví.
Tyto vlastnosti můžeme stylovat následovně:
#5. Barva pozadí
Můžeme změnit barvu pozadí prvního řádku na žlutozelenou. K dosažení tohoto cíle můžeme použít selektor pseudo-třídy :first-child.
Do svého CSS kódu přidejte následující:
tr:first-child {
background-color: yellowgreen;
}
Konečná podoba tabulky se zobrazí s žlutozeleným pozadím v prvním řádku.
#6. Písmo
Můžeme změnit styl nebo velikost písma pro konkrétní řádky, sloupce nebo buňky v naší tabulce.
Změníme styl písma obsahu v posledním sloupci tabulky (Společnosti používající).
Veškerý obsah v tomto sloupci zobrazíme kurzívou pomocí selektoru třídy td:last-child. Do svého CSS souboru můžete přidat následující kód:
td:last-child {
font-style: italic;
}
Po opětovném načtení stránky se zobrazí text v posledním sloupci kurzívou.
Můžeme také změnit barvu a velikost písma prvního sloupce, aby byl jedinečný.
Přidejte do svého CSS souboru následující kód:
tr td:first-child {
color: red;
font-size: x-large;
font-weight: bolder;
}
Při zobrazení stránky si všimněte, že obsah v prvním sloupci (Jazyk) má větší velikost písma, je červený a tučný.
Jak udělat tabulku responzivní
Tabulka, kterou jsme vytvořili, nemusí být responzivní na menších obrazovkách. Pro otestování, zda je váš kód responzivní, můžete použít vývojářské nástroje v prohlížeči Chrome nebo externí nástroj.
Existuje několik způsobů, jak toho dosáhnout, ale zde si ukážeme jen jeden.
Postupujte podle následujících kroků:
- Nastavte šířku prvku
<table>ve vašem kódu:
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
- Nastavte zalamování slov pro
<td>a<th>, aby se v buňkách zalomila dlouhá slova.
th, td {
border: 2px solid orange;
word-break: break-word;
}
Osvědčené postupy pro stylování tabulek
Stylizace pomocí CSS může být zábavná, zvláště pokud ji dobře ovládáte. Následují některé z osvědčených postupů, které zajistí, že dosáhnete nejlepších výsledků při stylizaci tabulek:
- Používejte externí styly: Měli jsme možnost použít inline styly, ale zvolili jsme externí styl. Díky tomu jsme mohli znovu použít styly v různých tabulkách, což nám ušetřilo čas.
- Udržujte jednoduchost: Můžete se nechat unést a své tabulky přehnaně stylizovat. Vždy se však snažte o jednoduchý design a zajistěte, aby byly tabulky snadno čitelné a přehledné.
- Přidejte okraje k tabulkám: Okraje usnadňují čtení a procházení tabulky.
- Používejte konzistentní barvy: Pokud máte na webových stránkách více tabulek, ujistěte se, že používáte konzistentní barvy a fonty. Použití barev vaší značky může zlepšit její viditelnost.
- Zajistěte, aby tabulky byly responzivní: Nikdy nevíte, jakou velikost obrazovky budou mít zařízení koncových uživatelů.
- Používejte titulky k popisu tabulek: Titulek stručně popisuje, o čem tabulka je.
- Používejte bílý prostor k oddělení tabulek: Pokud následuje několik tabulek za sebou, přidejte mezi ně mezery a vhodně je popište.
Závěr
Věřím, že nyní umíte vytvářet a upravovat základní HTML tabulky. Možná jsme nepokryli vše, protože HTML a CSS jsou rozsáhlé. Můžete vytvářet menší i větší tabulky v závislosti na povaze dat, která chcete zobrazit.
Pokud se chcete dozvědět více o CSS a jak jej používat pro zlepšení uživatelského rozhraní, prostudujte si CSS cheat sheets.