Při formátování tabulky je potřeba dbát na to, kterou část tabulky chcete upravovat. Jak už víte, tabulka se skládá z několika částí (hlavička, tělo, řádek, buňka, atd.).
Podle toho, jakou část chcete upravovat, musíte přizpůsobit značkové selektory pomocí kontextového zápisu (viz. CSS - vlastní a složené styly).
Kontextový zápis podle části tabulky
| Upravovaná část tabulky | Kontextový zápis selektoru |
|---|---|
| Celá tabulka | table {...} |
| Celá hlavička tabulky | table thead {...} |
| Celé tělo tabulky | table tbody {...} |
| Všechny buňky hlavičky | table th {...} |
| Všechny ostatní buňky | table td {...} |
Pokud byste chtěli upravovat jen některé řádky nebo sloupce tabulky musíte si vytvořit vlastní styly a tyto styly přiřadit daným částem.
<table>
<thead>
<tr>
<th>řádek 1, sloupce 1</th>
<th class="druhy-sloupec">řádek 1, sloupce 2</th>
</tr>
</thead>
<tbody>
<tr class="druhy-radek">
<td>řádek 2, sloupce 1</td>
<td class="druhy-sloupec">řádek 2, sloupec 2</td>
</tr>
<tr>
<td>řádek 3, sloupce 1</td>
<td class="druhy-sloupec">řádek 3, sloupec 2</td>
</tr>
</tbody>
</table>
Všimněte si, že pokud chcete upravit jeden řádek, stačí přiřadit vlastní styl pouze jednou (třída stylu "druhy-radek"). Naopak, pokud chcete upravit jeden sloupec, musíte vlastní styl přiřadit v každém řádku tabulky (třída stylu "druhy-sloupec").
CSS vlastnosti použitelné při formátování tabulky
border-collapse
- ohraničení buněk v tabulce se standardně vykresluje s mezerou
- pokud chcete sloučit ohraničení (odstranit mezeru) použijte vlastnost border-collapse
- funguje jen pro HTML značku <table>
- hodnoty této vlastnosti jsou jen dvě:
- collapse (sousední buňky mají společné ohraničení)
- separate (výchozí oddělené ohraničení buněk)
table {border-collapse: collapse}
border-spacing
- nastavení vzdálenosti mezi buňkami (v pixelech)
- nahrazuje HTML atribut cellspacing
- funguje jen pro HTML značku <table> a pokud není nastaveno společné ohraničení border-collapse
table {border-spacing: 5px}
Další formátování tabulky
| Formátování | CSS vlastnost |
|---|---|
| Písmo a text | vlastnosti pro písmo a text (font-size, font-family, atd.) |
| Ohraničení tabulky nebo buněk | vlastnost border (nahrazuje HTML atribut border) |
| Pozadí tabulky nebo buněk | vlastnost background-color či background-image |
| Zarovnání textu v buňkách | vlastnost text-align (nahrazuje HTML atribut align) |
| Šířka tabulky nebo buněk | vlastnost width (nahrazuje HTML atribut width) |
| Výška tabulky nebo buněk | vlastnost height (nahrazuje HTML atribut height) |
| Vzdálenost tabulky od okolního obsahu | vlastnost margin |
| Vzdálenost obsahu buňky od jejího ohraničení | vlastnost padding (nahrazuje atribut cellpadding) |
| Vzdálenost mezi jednotlivými buňkami | vlastnost border-spacing (nahrazuje cellspacing) |
Problematika vodorovného zarovnání tabulky vůči okolnímu obsahu
- stejně jako u obrázků, tak tabulku nelze vycentrovat pomocí vlastnosti text-align
- řešením je nastavit tabulce automatický levý a pravý vnější okraj (margin)
- aby bylo možné automaticky dopočítat vnější okraj, tabulka musí mít nastavenu šířku (width)
table {width: 500px; margin: 0px auto}
- bohužel toto nefunguje v Internet Exploreru
- zde je řešení upravit první řádek HTML dokumentu zapnutím standardního módu
<!DOCTYPE HTML>