Tabulky slouží k prezentaci tabulkových dat. Lze je vložit kamkoli na stránku, dokonce i do jiných tabulek. Podíváme se na vytvoření základní tabulky a poté do ní přidáme spoustu značek, abychom viděli, jaký bude výsledek. Experimentování je zde název hry. Nejužitečnějšími značkami při vytváření tabulek jsou:
<table> – tabulka, <tr> – řádek tabulky, <td> – sloupec tabulky <th> – záhlaví tabulky.
Každá tabulka začíná tagem <table> a končí tagem </table>. V tagu tabulka můžete definovat atributy:
Tabulka obsahuje řádky, každý začíná tagem řádku tabulky <tr> a volitelně končí tagem </tr>. Řádky musí být uvnitř tabulek.
Řádky obsahují buňky, každý začíná tagem tabulky <td> a volitelně končí tagem </td>. Buňky musí být uvnitř řádků.
<html>
<table>
<tr><td>Text</td></tr>
</table>
</html>
Pokud umístíte buňku tabulky mimo řádek nebo zapomenete zavřít buňku, řádek nebo tabulku, bude to mít nepředvídatelné výsledky. Text, který má být v tabulce, se může objevit na neočekávané pozici mimo tabulku. V nejhorším případě se nezobrazí celý obsah tabulky.
Titulky jsou užitečné pro definování nebo popis obsahu tabulky.
Chcete-li k tabulce přidat popisek, zadejte caption prvek za úvodní table značku s textem titulku uvnitř prvku, jak je znázorněno níže:
<table> <caption>Titulek</caption> <tr><td> Tabulka 1 </td><td> Tabulka 2 </td></tr> </table>
tr bgcolor
bgcolor Atribut se používá k určení barvy pozadí řádku tabulky
- color_name: Nastaví barvu pozadí pomocí názvu barvy. Například „black“ .
- hex_number: Nastaví barvu pozadí pomocí hexadecimálního kódu barvy. Například „#0000ff“ .
- rgb_number: Nastavuje barvu pozadí pomocí kódu RGB. Například: „ RGB(0, 153, 0)“ .
<tr bgcolor= "black">
<tr bgcolor= "#0000ff">
<tr bgcolor= "RGB(0,153,0)">
Atribut média HTML
tribut média HTML se používá k určení média nebo zařízení, pro které je připojený dokument optimalizován. Tento atribut určuje, že cílová adresa URL je určena.
<html>
<body>
<h1>Test 1</h1>
<h2>HTML</h2>
<a href="https://wikiquik.eu/" media="print and (resolution:300dpi)"> Click to open </a>
<br>
<a href="https://wikiquik.eu/" target="_blank" media="print and (resolution:300dpi)">Click to open </a>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
<source media="(min-width: 600px)"srcset="https://media.wikiquik.eu/pic1.png">
<source media="(min-width: 400px)"srcset="https://media.wikiquik.eu/pic2.png">
<img src="https://media.wikiquik.eu/pic3.png" style="width: auto;">
</picture>
</body>
</html>
a - odkazovací Atribut
Atribut názvu kotvy HTML se používá k určení názvu prvku <a>. Používá se k odkazování na data formuláře po odeslání formuláře nebo k odkazování na prvek v JavaScriptu.
<a href="https://www.linkto.hoho"></a>
button - tlačítko
se používá k určení jednoho nebo více formulářů, do kterých prvek <button> patří. Obsahuje hodnotu, tj. form_id, který určuje jeden nebo více prvků, než ke kterým náleží tlačítko. Hodnota tohoto atributu by měla být id prvku <form>
<html>
<head>
<title>HTML | <button> form Attribute </title>
</head>
<body style="text-align:center">
<h1 style="color:green;"> Test </h1>
<h2> HTML<button> form Attribute </h2>
<form id="myGeeks"></form>
<button id="btn" name="test" form="test" onclick="geek()">Click me!</button>
</body>
</html>
Šířka a Výška tabulek
Tabulka bude ve výchozím nastavení stejně velká jako data, která jsou do ní zapsána. Můžeme změnit celkovou výšku a šířku stolu, abychom dosáhli požadované velikosti. Je možné zadat velikost v absolutních pixelech nebo jako relativní procento velikosti obrazovky.
Syntaxe je: <table height=??? width=???> kde ??? je velikost v pixelech nebo procentech. Je také možné ovládat rozměry jednotlivých buněk nebo řádků tabulky.
např. <tr height=”80″> <td width=”50%”>
Je také možné kombinovat absolutní a relativní výšky a šířky.
<table><tr bgcolor=#1565DF><td width=80%><b>Signal Setup</b>" text / hodnota "</td><td width=20% align=center>" text / hodnota "</td></tr></table>
Rozestupy buněk a odsazení buněk
Rozestup buněk je počet pixelů mezi buňkami tabulky. Cell Padding je prostor v pixelech uvnitř buněk. tj. vzdálenost mezi informacemi a stranami buněk tabulky. Obě tyto možnosti jsou atributy tagu <table> např. <table border=”1″ cellspacing=”0″ cellpadding=”0″>
Zarovnání buněk tabulky
Výchozí zarovnání obsahu buněk tabulky je vlevo a svisle na střed. Pokud chcete změnit zarovnání buněk, musíte to udělat pro každou buňku zvlášť. Příkaz align je součástí tagu <td>. Můžete také změnit zarovnání celého řádku zadáním zarovnání v tagu <tr>
Syntaxe:
<td align=”position”> kde pozice je vlevo, na střed nebo vpravo
<tr align=”position”> kde je pozice vlevo, na střed nebo vprav
<td valign=”position”> kde pozice je nahoře, uprostřed nebo dole
<tr valign=”position”> kde pozice je nahoře, uprostřed nebo dole
Do tagu řádku tabulky a tagu tabulky můžete také zahrnout příkazy align a valign.
Zahrnutí align="left"nebo align="right"
Sjednocení řádků a sloupců
Každý řádek musí obsahovat stejný počet dat tabulky, někdy musí data tabulky zahrnovat více než jeden sloupec nebo řádek. V tomto případě se používají tagy colspan nebo rowspan.
<td colspan=?> kde ? je počet sloupců, přes které se buňka rozprostírá.
<td rowspan=?> kde ? je počet řádků, přes které se buňka rozprostírá.