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.
<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.
<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>
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.
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 |
TVORBA WEBOVÝCH STRÁNEK
ODKAZY
- CSS generátor písem
- CSS Pie – podpora CSS3 v IE
- CSS reset
- CSS3 generátor kódu
- Emulace starších verzí IE
- generátor barevných schémat
- generátor CSS spritů
- generátor CSS tlačítek
- generátor šablon 1
- generátor šablon 2
- generátor šablon 3
- generátor pozadí
- komprimace CSS souborů
- konsorcium W3C
- Lazy loading
- lorem ipsum generator
- obtékání komplikovaných objektů
- optimalizace CSS
- Podpora CSS3 a HTML5
- Podpora CSS3 v prohlížečích
- regulární výrazy
- Simulace pomalého připojení
- tabulky s kulatými rohy
- test barev z hlediska přístupnosti
- Testování webu na mobilních zařízeních
- W3C validátor XHTML
- w3schools – vše o tvorbě webu
- www.tvorba-webu.cz
- XHTML –> HTML 5
- získání palety barev
- změna barev v CSS souboru