Tabulky

Pro tvorbu tabulky můžeme použít následující schéma

<table>
- <tr>
- </tr>
- <tr>
- </tr>
- <tr>
- </tr>
</table>

Výsledkem takového schématu je jednoduchá tabulka:

Jméno	Příjmení	Tel. číslo
Anna	Nováková	123 456 789
Jan	Novotný	321 654 987

Tag <table> definuje tabulku, <tr> definuje řádek tabulky, <th> definuje hlavičku a <td> definuje obyčejná data tabulky. V tomto případě je hlavička tabulky v řádku (tabulka s hlavičkou ve sloupci bude ukázána níže).

Stylování tabulek

Tabulky lze samozřejmě upravovat pomocí kaskádových stylů. Nejjednodušší cesta k takové úpravě je přes externí soubor .css, případně pomocí interního CSS. Možností je také atribut style, avšak tato možnost je zdlouhavá a ne moc příjemná (jak uvidíte v dalším příkladu).

<table style="border-collapse: collapse; width: 100%;">

<tr>

<th style="border: solid; border-color: #ff9933; color: #ff9933">Jméno</th>
<th style="border: solid; border-color: #ff9933; color: #ff9933">Příjmení</th>
<th style="border: solid; border-color: #ff9933; color: #ff9933">Tel. číslo</th>

</tr>
<tr>

<td style="border: solid; border-width: 1px;">Anna</td>
<td style="border: solid; border-width: 1px;">Nováková</td>
<td style="border: solid; border-width: 1px;">123 456 789</td>

</tr>
<tr>

<td style="border: solid; border-width: 1px;">Jan</td>
<td style="border: solid; border-width: 1px;">Novotný</td>
<td style="border: solid; border-width: 1px;">321 654 987</td>

</tr>

</table>

Výsledkem tohoto relativně dlouhého a nepřehledného kódu je následující tabulka

Jméno	Příjmení	Tel. číslo
Anna	Nováková	123 456 789
Jan	Novotný	321 654 987

Vyzkoušejte!

Mezi <head> a </head> dokumentu HTML vložte

<style>

table{

width: 100%;
border-collapse: collapse;

}
th{

border: solid;
border-color: red;
color: red;

}
td{

border: solid;
border-width: 1px;

}

</style>

A do těla (mezi <body> a </body>) vložte kód pro nezformátovanou tabulku (první příklad).

skrýt

Tabulka s hlavičkou ve sloupci

Příklad tabulky s hlavičkou ve sloupci:

<table>
- <tr>
- </tr>
- <tr>
- </tr>
- <tr>
- </tr>
</table>

Výsledkem je jednoduchá (nestylizovaná) tabulka

Jméno	Anna	Jan
Příjmení	Nováková	Novotný
Tel. číslo	123 456 789	321 654 987

Sjednocení buněk (vedle sebe)

Pokud bychom chtěli sloučit buňky vedle sebe, použijeme atribut colspan

<table>
- <tr>
- </tr>
- <tr>
- </tr>
- <tr>
- </tr>
</table>

Výsledkem je (po stylizaci) tabulka

Jméno	Příjmení	Tel. čísla
Anna	Nováková	123 456 789	987 654 321
Jan	Novotný	321 654 987	789 456 123

Vyzkoušejte!

Kód pro stylizaci tabulky výše (vložte mezi <head> a </head>)

<style>

table.tab{

width: 100%;
border-collapse: collapse;

}
table.tab td{

border-bottom: solid 1px;
padding: 0.5em;
border-color: #b3b3b3;

}
table.tab th{

border-bottom: solid 1px;
border-color: #e68a00;
background-color: #e68a00;
color: white;
font-weight: normal;
padding: 0.5em;
text-align: left;

}
table.tab tr:hover{

background-color: #cccccc;

}

</style>

Tabulce, kterou chcete takto nastylovat, musíte přiřadit třídu (class), jež jste kódem výše vytvořili, tj. třídu tab. To se provede takto: <table class="tab">.