HTML tabulky
HTML tabulky umožňují webovým vývojářům uspořádat data do řádků a sloupců.
Příklad
Company | Contact | Country |
---|---|---|
Alfreds Futterkiste | Maria Anders | Germany |
Centro comercial Moctezuma | Francisco Chang | Mexico |
Ernst Handel | Roland Mendel | Austria |
Island Trading | Helen Bennett | UK |
Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Definujte HTML tabulku
Tabulka v HTML se skládá z buněk tabulky uvnitř řádků a sloupců
Příklad
Jednoduchá HTML tabulka:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria
Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro
comercial Moctezuma</td>
<td>Francisco
Chang</td>
<td>Mexico</td>
</tr>
</table>
Buňky tabulky
Každá buňka tabulky je definována
značkou <td>
a .</td>
td
znamená data tabulky.
Vše mezi <td>
a </td>
je obsahem buňky tabulky.
Příklad
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Poznámka: Datové prvky tabulky jsou datové kontejnery tabulky.
Mohou obsahovat všechny druhy prvků HTML; text, obrázky, seznamy, další tabulky atd.
Řádky tabulky
Každý řádek tabulky začíná a
<tr>
a končí </tr>
tagem.
tr
znamená řádek tabulky.
Příklad
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
V tabulce můžete mít tolik řádků, kolik chcete, jen se ujistěte, že počet buněk je v každém řádku stejný.
Poznámka: Někdy může mít řádek méně nebo více buněk než jiný. O tom se dozvíte v další kapitole.
Záhlaví tabulek
Někdy chcete, aby vaše buňky byly záhlaví, v těchto případech použijte
<th>
značku namísto
<td>
značky:
Příklad
První řádek nechť jsou záhlaví tabulky:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person
3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Ve výchozím nastavení je text v <th>
prvcích tučný a zarovnaný na střed, ale můžete to změnit pomocí CSS.
HTML cvičení
Tagy tabulky HTML
Tag | Description |
---|---|
<table> | Defines a table |
<th> | Defines a header cell in a table |
<tr> | Defines a row in a table |
<td> | Defines a cell in a table |
<caption> | Defines a table caption |
<colgroup> | Specifies a group of one or more columns in a table for formatting |
<col> | Specifies column properties for each column within a <colgroup> element |
<thead> | Groups the header content in a table |
<tbody> | Groups the body content in a table |
<tfoot> | Groups the footer content in a table |
Úplný seznam všech dostupných značek HTML naleznete v naší Referenční příručce značek HTML .