Záhlaví HTML tabulek
HTML tabulky mohou mít záhlaví pro každý sloupec nebo řádek nebo pro mnoho sloupců/řádků.
EMIL | TOBIÁŠ | LINUS |
---|---|---|
8:00 | ||
---|---|---|
9:00 | ||
10:00 | ||
11:00 | ||
12:00 | ||
13:00 |
PO | ÚT | ST | SBÍRAT | PÁ | |
---|---|---|---|---|---|
8:00 | |||||
9:00 | |||||
10:00 | |||||
11:00 | |||||
12:00 |
PROSINEC | ||
---|---|---|
Záhlaví HTML tabulek
Záhlaví tabulky jsou definována pomocí th
prvků, každý th
prvek představuje buňku tabulky.
Příklad
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Vertikální záhlaví tabulky
Chcete-li použít první sloupec jako záhlaví tabulky, definujte první buňku v každém řádku jako th
prvek:
Příklad
<table>
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Age</th>
<td>94</td>
<td>50</td>
</tr>
</table>
Zarovnat záhlaví tabulky
Ve výchozím nastavení jsou záhlaví tabulek tučná a zarovnaná na střed:
Jméno | Příjmení | Stáří |
---|---|---|
Jill | Kovář | 50 |
Předvečer | Jacksone | 94 |
Chcete-li zarovnat záhlaví tabulky doleva, použijte vlastnost CSS text-align
:
Příklad
th {
text-align: left;
}
Záhlaví pro více sloupců
Můžete mít záhlaví, které se rozprostírá přes dva nebo více sloupců.
název | Stáří | |
---|---|---|
Jill | Kovář | 50 |
Předvečer | Jacksone | 94 |
Chcete-li to provést, použijte colspan
atribut na
<th>
prvku:
Příklad
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Více o colspan a rowspan se dozvíte v kapitole Table colspan & rowspan .
Popis tabulky
Můžete přidat popisek, který slouží jako nadpis pro celou tabulku.
Měsíc | Úspory |
---|---|
leden | 100 $ |
Únor | 50 dolarů |
Chcete-li k tabulce přidat popisek, použijte <caption>
značku:
Příklad
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Poznámka: Štítek <caption>
by měl být vložen bezprostředně za <table>
štítek.