#1 Tabulky
Základní HTML tabulky jsou vzhledově často velmi neshodné se zbytkem webu. Pomocí CSS lze tabulky změnit k nepoznání.
Tabulky se rozdělují na dvě části – obal tabulky (samotný prvek <table>) a buňky (<th> a <td>)
#2 Okraje
Tabulky mají v základním nastavení černé jednopixelové okraje, přičemž tyto okraje se nachází jak na tabulce, tak i na prvcích. Okraje se stylují klasickou vlastností pro okraje – border. Zároveň, jelikož jsou prvky oddělené mezerami, vznikají vně tabulky zdvojené okraje – to se ovládá vlastností border-collapse.
Vlastnost border-collapse může obsahovat kromě globálních klíčových slov (inherit a initial) také klíčová slova collapse nebo separate. Hodnota separate je základní hodnotou, kdy se okraje buněk neslučují a mohou se tak zdvojovat. Hodnota collapse naopak okraje slučuje a v tabulce se tak vždy nachází pouze jeden okraj mezi jednotlivými buňkami.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid red;
}
V příkladu výše se nachází tabulka, jejíž buňky mají červené okraje a mezi jednotlivými buňkami se bude nacházet vždy maximálně jeden okraj.
#3 Zarovnání a velikost
Zarovnání
Zarovnání doleva, na střed, a doprava, vně tabulky se provádí pomocí vlastnosti text-align. Jestliže je prvek menší než jedna buňka, lze mu nastavit vertikální zarování pomocí vlastnosti vertical-align.
Pokud chceme zarovnat prvek na pravý střed, využijeme obou vlastností:
th, td {
text-align: center;
vertical-align: center;
}
Jednotlivým buňkám lze také přiřadit například flexbox nebo grid, pokud chceme zarovnat další prvky v tabulce.
Velikost
Šířka i výška celé tabulky se nastavuje klasicky pomocí vlastností width a height. Tyto vlastnosti lze také přiřadit jednotlivým buňkám, přičemž pokud ostatní nemají automaticky nastavenou šířku, automaticky vyplní prostor.
Například, pokud má první sloupec (vybrán selektorem :first-child, více v článku o pseudo-class) z pěti nastavenou šířku 50%, ostatní sloupce automaticky vyplní zbývající prostor rovnoměrně.
table {
width: 500px;
}
th:first-child {
width: 50%;
}
#4 Častá styliazce
Zde se nachází pár příkladů, jak se často používají styly v tabulkách.
Střídání pozadí řádků
Častou stylizací je nastavení, aby se střídala barva pozadí na řádcích. Často se to provádí, aby se mohl uživatel v tabulce lépe orientovat a byla celkově přehlednější.
Toto se provádí pomocí selektoru nth-child() a klíčovým slovem even (sudé řádky – 2, 4, 6…) nebo odd (liché řádky – 1, 3, 5…). V následujícím příkladu mají řádky nastavenou bílou barvu pozadí, ale každý sudý řádek bude mít šedou barvu pozadí.
tr {
background-color: white;
}
tr:nth-child(even) {
background-color: gray;
}
První řádek barevný
Pro zvýraznění nadpisů sloupců, se často zvýrazňuje barvou první řádek, ve kterém se nachází legenda tabulky.
Správná tabulka by měla obsahovat prvek <th> („table heading“), tedy stačí vybrat pouze ten:
th {
background-color: cyan;
}