Tabulky
Tabulky v HTML slouží k přehlednému zobrazování dat. Představ si tabulku jako mřížku, kde jsou data uspořádána do řádků a sloupců.
Používáme je například pro zobrazení strukturovaných informací, jako jsou rozvrhy hodin, ceníky nebo seznamy žáků. Tabulka v HTML nefunguje automaticky jako v Excelu. Neexistují žádné automatické čáry, buňky se nerozšiřují podle obsahu a zarovnání musíme udělat ručně.
Tabulky vytváříme pomocí tagu <table>. Uvnitř tabulky musí být řádky <tr> (table row) a v nich buňky <td> (table data). Pokud chceme vytvořit záhlaví, použijeme <th> (table header), což zobrazí tučné a často centrované texty.
💡 Zlaté pravidlo: Každý řádek (<tr>) obsahuje stejný počet sloupců, jinak se tabulka rozhodí!
Zdroj obrázku: https://jecas.cz/html-tabulky
Základní struktura
Když vytváříme tabulku, měli bychom správně oddělit hlavičku (<thead>) a hlavní část (<tbody>). Díky tomu bude tabulka lépe strukturovaná, což je důležité například při stylování nebo zpracování dat v JavaScriptu.
Používané tagy:
<table>– vytvoří tabulku.<thead>– obsahuje hlavičku tabulky, která se často vizuálně odlišuje. Většinou obsahuje nadpisy sloupců.<tbody>– obsahuje hlavní část tabulky s daty.<tr>– vytvoří jeden řádek tabulky.<th>– vytvoří hlavičku tabulky (tučný text, často centrovaný).<td>– vytvoří buňku tabulky.border="1"– přidá čáry mezi buňky tabulky (zobrazí okraje tabulky).
<table border="1">
<thead>
<tr>
<th>Jméno</th>
<th>Příjmení</th>
<th>Věk</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jan</td>
<td>Novák</td>
<td>16</td>
</tr>
<tr>
<td>Eva</td>
<td>Svobodová</td>
<td>17</td>
</tr>
</tbody>
</table>
Sloučení buněk
Tabulky v HTML umí spojovat buňky pomocí colspan a rowspan.
Sloučení buněk znamená, že dvě nebo více buněk se spojí v jednu větší. Můžeme slučovat sloupce (vodorovně) nebo řádky (svisle).
Kdy použít colspan?
Když chceme, aby jedna buňka zabírala více sloupců místo několika oddělených buněk.
Kdy použít rowspan?
Když chceme, aby jedna buňka zabírala více řádků místo několika oddělených buněk.
Někdy je potřeba, aby se buňky spojily a zabíraly více sloupců nebo řádků. Používáme k tomu atributy:
colspan="x"– spojí buňky přes více sloupců.rowspan="x"– spojí buňky přes více řádků.
💡 POZOR! Pokud sloučíš buňky, musíš odpovídající počet buňek odstranit z dalších řádků, jinak se tabulka rozhodí! To samé platí i o sloupcích.
Sloučení buněk vedle sebe (colspan)
První řádek (hlavička) má „Jméno a Příjmení“ v jedné buňce, ale ta buňka je roztažená přes 2 sloupce (colspan="2"). Proto v dalších řádcích musí být pouze dvě oddělené buňky (Jméno + Příjmení), aby se tabulka nerozbila.
Pokud bys zapomněl přidat colspan="2", tabulka by se rozbila, protože by v prvním řádku byl jeden sloupec méně než v ostatních
<table border="1">
<thead>
<tr>
<th colspan="2">Jméno a Příjmení</th>
<th>Věk</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jan</td>
<td>Novák</td>
<td>16</td>
</tr>
<tr>
<td>Eva</td>
<td>Svobodová</td>
<td>17</td>
</tr>
</tbody>
</table>
Sloučení řádků – buňky nad sebou (rowspan)
První řádek má „Eva“ v první buňce, ale ta se rozšiřuje přes dva řádky (rowspan="2"). Proto ve druhém řádku už nesmí být další <td> pro její jméno – místo toho rovnou pokračujeme s Černá a 18.
Někdy zapomeneme smazat buňku v druhém řádku. Pokud tam zůstane, tabulka se rozhodí a buňky nebudou zarovnané.
<table border="1">
<thead>
<tr>
<th>Jméno</th>
<th>Příjmení</th>
<th>Věk</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Eva</td>
<td>Svobodová</td>
<td>17</td>
</tr>
<tr>
<td>Černá</td>
<td>18</td>
</tr>
</tbody>
</table>
Komplexní kód
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabulky v HTML - MěSOŠ</title>
</head>
<body>
<h1 style="text-align: center; color: darkblue;">Tabulky v HTML – MěSOŠ</h1>
<h2>Rozvrh hodin</h2>
<p>Tato tabulka obsahuje rozvrh hodin pro jeden den. Používáme zde sloučení buněk pro označení dvouhodinovek.</p>
<table border="1">
<thead>
<tr>
<th>Čas</th>
<th>Předmět</th>
<th>Učitel</th>
<th>Učebna</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">8:05 - 9:45</td>
<td>Programování Python</td>
<td rowspan="2">Bc. Lukáš Pospíšil</td>
<td>SpV2</td>
</tr>
<tr>
<td>Programování PHP</td>
<td>SpV3</td>
</tr>
<tr>
<td>10:00 - 10:45</td>
<td>Matematika</td>
<td>Mgr. Petr Kučera</td>
<td>N1K2</td>
</tr>
<tr>
<td>10:50 - 11:35</td>
<td colspan="2">Tělesná výchova</td>
<td>Tělocvična</td>
</tr>
</tbody>
</table>
<h2>Seznam učitelů a jejich předměty</h2>
<p>Zde je seznam učitelů, který využívá sloučení buněk pro učitele, kteří vyučují více předmětů.</p>
<table border="1">
<thead>
<tr>
<th>Jméno</th>
<th>Předměty</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Bc. Lukáš Pospíšil</td>
<td>Programování</td>
<td rowspan="2">pospisill@sosklobouky.cz</td>
</tr>
<tr>
<td>Operační systémy</td>
</tr>
<tr>
<td>Mgr. Silvie Bečvářová</td>
<td>Aplikační software</td>
<td>becvarovas@sosklobouky.cz</td>
</tr>
<tr>
<td rowspan="2">Mgr. Petr Kučera</td>
<td>Matematika</td>
<td rowspan="2">kucerap@sosklobouky.cz</td>
</tr>
<tr>
<td>Fyzika</td>
</tr>
</tbody>
</table>
<h2>Školní vybavení</h2>
<p>Tato tabulka obsahuje seznam učeben a jejich vybavení. Každá učebna obsahuje obrázek.</p>
<table border="1">
<thead>
<tr>
<th>Učebna</th>
<th>Vybavení</th>
<th>Obrázek</th>
</tr>
</thead>
<tbody>
<tr>
<td>SpV2</td>
<td>24 počítačů s 32 GB RAM, ultraširoké monitory, projektor</td>
<td><img src="ucebna.jpg" alt="Počítačová učebna" width="150"></td>
</tr>
<tr>
<td>Robotika</td>
<td>Notebooky, iPad, 3D tiskárna, elektronické komponenty</td>
<td><img src="robotika.jpg" alt="Učebna robotiky" width="150"></td>
</tr>
<tr>
<td>Laboratoř</td>
<td>Síťové prvky, počítače, různé typy hardwaru</td>
<td><img src="laborator.jpg" alt="Laboratoř" width="150"></td>
</tr>
</tbody>
</table>
<h2>Statistiky žáků</h2>
<p>Tabulka ukazuje počet žáků v různých oborech.</p>
<table border="1">
<thead>
<tr>
<th rowspan="2">Obor</th>
<th colspan="2">Počet žáků</th>
</tr>
<tr>
<th>Chlapci</th>
<th>Dívky</th>
</tr>
</thead>
<tbody>
<tr>
<td>Informační technologie</td>
<td>18</td>
<td>3</td>
</tr>
<tr>
<td>Obchodní akademie</td>
<td>2</td>
<td>11</td>
</tr>
<tr>
<td>Agropodnikání</td>
<td>4</td>
<td>12</td>
</tr>
<tr>
<td>Nábytkářství</td>
<td>7</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html>
Výsledek
Zdroje
Seznam zdrojů
Mgr. Silvie Bečvářová – Stránka s podklady pro studenty MěSOŠ Klobouky u Brna. Online. Dostupné z: http://becvarova.com/mesos/
ITNETWORK S.R.O. Itnetwork. Online. Dostupné z: https://www.itnetwork.cz/
W3 SCHOOLS. HTML tutorial. Online. Dostupné z: https://www.w3schools.com/html
PÍSEK, Slavoj. HTML: začínáme programovat, 4., aktualizované vydání. Grada, 2014. ISBN 978-80-247-8957-6. Dostupné také z: https://www.bookport.cz/kniha/html-2357/.