Tabulky a úprava přes CSS

S pomocí CSS můžete změnit vzhled a vlastnosti tabulky. Můžete si tak vytvořit úplně váš vlastní styl tabulky a neomezovat se jen na základní formátování tabulek

Základní seznámení s HTML a CSS

HTML kód tabulky

Před CSS úpravami je třeba se seznámit s HTML kódem tabulky, kde jsou jednotlivé znaky používány k určení upravovaného prvku. Níže si prohlédněte příklad HTML kódu tabulky a popis jednotlivých znaků.

<table>  
   <thead>
      <tr>
         <th>Společnost</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Microsoft</td>
     </tr>
    </tbody>
</table>

Možnosti zápisu CSS

Než přejdeme k vytvoření stylu, je důležité si uvědomit, zda si přejete změny použít pro všechny tabulky na webu, nebo jen pro některé. V prvním případě se v zápise stylu použije znak table. V druhém případě se pak použije vlastní styl (třída) nazvaný např. .mojeTabulka.

Příklad zápisu

table {
width: 100%; 
margin: 10px auto 10px auto; }

.mojeTabulka {
width: 100%; 
margin: 10px auto 10px auto; }

Vytvoření vlastního stylu

Tabulka a její prvky ve výchozím nastavení nemají žádné ohraničení, odsazení, podbarvení a pod. Vše si nastavíme vlastním stylem.

Vytvořte si tabulku, přejděte do zdrojového kódu tabulky a přidejte styl ve znění class="mojeTabulka" a změnu uložte.

Poté přejděte do sekce Vzhled → Vlastní styly CSS, kde zapnete styl jako aktivní a změnu uložíte.

Veškeré níže uvedené styly stačí zkopírovat a vložit do vlastních CSS stylů. Pak již jen upravit dle vlastní potřeby. Uvedené příklady je možné kombinovat, jak je na náhledových tabulkách vidět. Vysvětlení použitých vlastností naleznete na konci tohoto článku.

Styl tabulky

V našem příkladě jsme tabulce nastavili šířku 100%, takže se roztáhne po celé šířce obsahové části webu. Pro zachování responsivního chování zadávejte vždy šířku v procentech do maximální šířky 100%, aby nepřesahovala obsahovou část webu. Ve výchozím nastavení mají buňky v tabulce mezi sebou rozestupy, které zrušíme vlastností border-collapse. Tabulce jsme nastavili ohraničení, barvu pozadí, velikost a barvu písma. Nemusíte použít všechny vlastnosti, nepotřebné prostě se stylu smažte, ty pak zůstanou ve výchozím nastavení.

.mojeTabulka {
width: 100%; 
margin: 10px auto 10px auto; 
border-collapse:collapse; 
border: 1px solid orange; 
background-color:white;
font-size:15px;
color:blue;
}

Styl buňek

Dále si upravíme vlastnosti buněk tabulky. V příkladu můžete vidět obměnu zapsané vlastnosti border, kde vidíte že lze nastavit barvu každé jedné straně buňky. V náhledové tabulce je ukázán rozestup mezi buňkami s vlastností border-collapse:separate. Tabulce je přidáno i odsazení uvnitř buněk.

.mojeTabulka tr td{
border-top:1px solid red;
border-bottom:1px solid black;
border-left:1px solid green;
border-right:1px solid yellow;
padding:5px 3px 5px 3px;
}

Styl buněk v hlavičce tabulky

Hlavička tabulky se používá pro nadepsání sloupců. Zvýrazníme ji změnou pozadí, barvy písma nebo tloušťky písma.

V případě vlastnosti border-collapse:collapse buňky splývají a s aplikací ohraničení z příkladu výše je vidět, že spodní ohraničení překrývá horní, tedy je vidět jen černé vodorovné ohraničení.

.mojeTabulka thead th, .mojeTabulka thead td {
color: white;
background-color: #252525; 
font-weight:bold
}

Střídavé podbarvení řádků v těle tabulky

Jestliže je vaše tabulka rozsáhlá je vhodné rozlišit řádky např. střídavým podbarvením.

.mojeTabulka tbody tr:nth-child(odd) td,
.mojeTabulka tbody tr:nth-child(odd) th {
background-color: #f1f1f1;
}

Efekt při přejetí řádku tabulky

Další vychytávkou je změna pozadí řádku tabulky při přejetí kurzorem myši. Usnadňuje sledování řádku. Tento styl vždy uvádějte ve vlastních CSS stylech pod výše uvedeným. Jinak by efekt nefungoval správně.

.mojeTabulka tbody tr:hover td,
.mojeTabulka tbody tr:hover th{
background-color: #ffed98; /**/
}

Vysvětlení použitých CSS vlastností

V tabulce jsou popsány použité vlastnosti. Většina je použitelných i při stylování jiných prvků. Vlastnosti border-collapse a border-spacing jsou použitelné jen při stylování znaku table.