5. lekce: TABULKY

Čtvrtek, 25. Září. 2008 | 5. Lekce - Tabulky | Comments Off on 5. lekce: TABULKY

Tabulky jsou v HTML velmi důležité. Měly by se využívat především k prezentaci datových údajů. Často jsou vzhledem k jednoduchosti jejich použití využívány rovněž pro vytvoření rozvržení celé stránky, což je ale velkou chybou. Vzhled stránky, a tedy i její rozvržení, je potřeba definovat pomocí kaskádových stylů minimálně kvůli rychlejšímu načítání obsahu stránky, snadným úpravám a v neposlední řadě správnému zobrazení na menších displejích mobilních zařízení.

Struktura tabulky

Tabulka je ohraničena párovou značkou <table>. Pro řádek tabulky slouží elementtr (table row), každý řádek je tvořen bu?kami th (table head pro bu?ky v záhlaví tabulky) a td (table data pro ostatní bu?ky). Bu?ky se vkládají do řádku tabulky – kolik buněk v řárku, tolik bude mít tabulka sloupců. Bu?ky záhlaví jsou standardně formátovány tučným písmem, zarovnány na střed. Odlišení záhlaví pomocí speciálního elementu má vliv také na alternativní zařízení, např. hlasová čtečka tak snáze rozpozná strukturu tabulky.

<table>
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
</tr>
<tr>
<td>ccc</td>
<td>ddd</td>
</tr>
</table>
1 2
aaa bbb
ccc ddd

Slučování buněk tabulky

Atribut colspan sloučí dohromady několik buněk v jednom řádku. Atribut rowspan sloučí bu?ky ve sloupci. Jako hodnotu těchto atributů zapisujeme počet buněk, které chceme takto sloučit.

<table border=”1″>
<caption>Nadpis tabulky</caption>
<tr>
<th colspan=”2″>1</th>
</tr>
<tr>
<td rowspan=”2″>aaa</td>
<td>bbb</td>
</tr>
<tr>
<td>ccc</td>
</tr>
</table>
Nadpis tabulky
1
aaa bbb
ccc

Pozn.: V ukázce je použit nepovinný element <caption>, který je možné použít pro nadpis tabulky.

Vlastnosti tabulky

Standardní vzhled tabulky je možné upravit pomocí několika atributů elementu <table>. Jedná se o nastavení vzhledu. Za tímto účelem by mělo být využito vlastností CSS, zde jsou atributy uváděny pouze pro úplnost.

  • width, height – minimální šířka/výška tabulky – v pixelech, procentech
  • align – zarovnání – left, right, center, justify
  • frame – způsob vykreslení ohraničení okolo celé tabulky – none, void, above, below, hsides, lhs, rhs, vsides, box, border”
  • border – šířka ohraničení – v pixelech
  • rules – způsob vykreslení mřížky – none, basic, rows, cols, all
  • cellspacing – mezera mezi bu?kami – v pixelech
  • cellpadding – vnitřní okraj buněk – v pixelech

Pozn.: Vybrané atributy (u kterých to má smysl) je možné použít i pro elementy <tr>, <td>.

Ohraničení tabulky je vhodné definovat pomocí kaskádových stylů, konkrétně vlastností border.

<style>
table, th, td {
border:solid 1px #000;
border-collapse: collapse;
}
</style><table>
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
</tr>
<tr>
<td>ccc</td>
<td>ddd</td>
</tr>
</table>

1 2
aaa bbb
ccc ddd

KONTAKTNÍ FORMULÁŘ

Jméno:

E-mail:

Váš vzkaz:

sedm plus pět =

VYHLEDÁVÁNÍ

PODĚKOVÁNÍ

Logo projektu