0 Kč s DPH

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>
table oznak pro tabulku
thead hlavička tabulky
tbody tělo tabulky
tfoot patička tabulky
tr řádek tabulky
th hlavičková buňka tabulky
td buňka tabulky

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.

Vložení vlastního stylu do HTML kódu

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;
}
Společnost Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.6 45.2 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3

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;
}
Společnost Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.6 45.2 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3

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
}
Společnost Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.6 45.2 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3

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;
}
Společnost Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.6 45.2 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3

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; /**/
}
Společnost Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.6 45.2 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3

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.

width šířka objektu v pixelech; maximální šířka 100%
margin vnější odsazení objektu; zápis ve smyslu nahoře, vpravo, dole, vlevo; hodnota 0 auto 0 auto prvek vystředí
border-collapse rámečky sousedních buněk splývají; výchozí hodnota je separate, tedy je mezi sousedními buňkami prostor
border-spacing v případě zanechání hodnoty separate, lze touto vlastností nastavit v pixelech vzdálenost mezi buňkami
border ohraničení kolem tabulky; zápis ve smyslu šířka ohraničení v pixelech, styl ohraničení a barva ohraničení
border-top ohraničení nahoře
border-bottom ohraničení dole
border-left ohraničení vlevo
border-right ohraničení vpravo
padding vnitnří odsazení objektu; zápis ve smyslu nahoře, vpravo, dole, vlevo;
background-color barva pozadí, která se zadává buď anglickými názvy barev, nebo hexa kódem
font-size velikost písma
font-weight tučnost písma
color barva písma 

Tým inPage
info(zav)inpage.cz

Přidat komentář