HyperText

Jste zde:
Odhadovaná doba čtení: 2 min

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á.

Byl tento článek užitečný?
Nelíbí 0
Zobrazeno: 9
Back to top button