Tabulka je nezbytnou součástí HTML pro zobrazení dat ve strukturovaném formátu s řádky a sloupci. V HTML se tabulky vytvářejí pomocí značek <table>, <tr> a <td>.
Tag <table> představuje hlavní kontejner tabulky, který obsahuje všechny řádky a sloupce. Řádky jsou definovány pomocí tagu <tr>(řádek tabulky), zatímco buňky v řádcích jsou definovány pomocí tagu <td>(data tabulky). Kromě toho můžete použít značku <th>(záhlaví tabulky) k definování buněk záhlaví tabulky.
Atributy jako colspan a rowspan můžete použít ke sloučení buněk v tabulce nebo k roztažení buněk do více řádků a sloupců. Kromě toho můžete použít vlastnosti CSS pro přizpůsobení vzhledu a rozvržení tabulky.
Tabulka( <table>)
- <table> Prvek se používá k vytvoření tabulky v HTML.
- Data jsou umístěna v řádcích( <tr>) a sloupcích( <td> nebo <th>).
- Každá datová buňka je umístěna uvnitř <td>(datová buňka) nebo <th>(buňka záhlaví) prvků.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Záhlaví sloupce( <th>)
- <th> Prvek se používá k vytvoření záhlaví sloupců v tabulce.
- Obvykle umístěn v prvním řádku tabulky.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<!-- data rows -->
</table>
Datové řádky( <tr>):
- <tr> Prvek se používá k vytvoření datových řádků v tabulce.
- Do těchto prvků jsou umístěny datové buňky( <td>) nebo buňky záhlaví(). <th> <tr>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Rozpětí sloupců( colspan)
Atribut colspan se používá k určení počtu sloupců, které bude datová buňka nebo buňka záhlaví v tabulce zahrnovat.
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td colspan="2">John Doe</td>
</tr>
</table>
Rozložení řádků( rowspan)
Atribut rowspan se používá k určení počtu řádků, které bude datová buňka nebo buňka záhlaví v tabulce zahrnovat.
<table>
<tr>
<th rowspan="2">No.</th>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
</tr>
</table>
Sloučení buněk( colspan a rowspan)
Chcete-li sloučit buňky v tabulce, můžete kombinovat oba atributy colspan a atributy. rowspan
<table>
<tr>
<th rowspan="2">No.</th>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
border vlastnictví
- border Vlastnost určuje tloušťku okraje tabulky.
- Hodnota border je nezáporné celé číslo.
<table border="1">
<!-- Table rows and columns -->
</table>
cellpadding vlastnictví
-, cellpadding Vlastnost určuje vzdálenost mezi obsahem buňky a okrajem buňky v tabulce.
- Hodnota cellpadding je nezáporné celé číslo
<table cellpadding="5">
<!-- Table rows and columns -->
</table>
cellspacing vlastnictví
- cellspacing Vlastnost určuje mezery mezi buňkami v tabulce.
- Hodnota cellspacing je nezáporné celé číslo.
<table cellspacing="10">
<!-- Table rows and columns -->
</table>
Tyto atributy a prvky vám umožňují vytvářet a upravovat tabulky v HTML podle vašich potřeb. Můžete je použít k přehlednému a uspořádanému zobrazení dat na vašem webu.