0 Kč s DPH

Tabulky a úprava přes CSS

S pomocí CSS můžete změnit vzhled a vlastnosti tabulky. Tabulku si navrhněte dle našeho návodu na předvytvořený vzhled tabulky a následně aplikujte některou z navržených úprav. Aby se úprava projevila, je nutné si zkopírovat ukázkový kód pro vlastní CSS styl a vložit ho do pole vašeho vlastního CSS stylu v administraci (Menu - Vzhled -> Vlastní CSS styl).

Uvedené příklady je možné také kombinovat.

Výchozí tabulka

Budeme vycházet z následující tabulky, kterou budeme upravovat s pomocí CSS pravidel.

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

Změna šířky a zarovnání

Šířku tabulky můžete zadat v různých jednotkách, nejpoužívánější jsou procenta či pixely. V příkladu je použita šířka 80% - tuto hodnotu si můžete libovolně měnit (0-100%).
Šířku v pixelech pak nadefinujete jako width: 300px;.
Standardně je zarovnaná vlevo, pro zarovnání na střed použijeme uvedenou definici margin: 0 auto;

Kód pro vložení

.tabulka {
width: 80%;
margin: 0 auto;
}

Výsledná úprava

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

Zrušení nebo změna podbarvení řádků

Při najetí myší na řádek tabulky se řádek podbarví. Podbarvení můžete zrušit background: none; nebo mu barvu změnit background-color: #ffed98;. Jak zjistit HEX barvu s pomocí barevné palety je uvedeno ve článku formátování tabulky přes editor. V příkladu vykreslené tabulky je zrušené podbarvení při přejetí řádku.

Kód pro vložení

.tabulka tbody tr:hover {
background: none;
}
.tabulka tbody tr:hover {
background-color: #ffed98;
}

Výsledná úprava

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

Zrušení vytažení sloupců nebo řádků

Můžete zrušit ohraničení sloupců první příklad nebo zrušit ohraničení řádků druhý příklad. V příkladu vykreslené tabulky je zrušené ohraničení sloupců.

Kód pro vložení

.tabulka th, .tabulka td {
border: none;
border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;
}
.tabulka th, .tabulka td {
border: none;
border-left: 1px solid #ddd; border-right: 1px solid #ddd;
}

Výsledná úprava

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

Změna ohraničení tabulky

Tabulka má přednastavenou barvu a šířku orámování, šířku můžete zrušit příklad první nebo změnit příklad druhý. Změnu šířky nastavíte úpravou hodnoty 5px, například v rozsahu 1-10px.
Jak zjistit HEX barvu s pomocí barevné palety je uvedeno ve článku formátování tabulky přes editor.
V příkladu vykreslené tabulky je zvýšená šířka ohraničení a změna přednastavené barvy.

Kód pro vložení

.tabulka {
border: none;
}
.tabulka {
border: 5px solid #ffce99;
}

Výsledná úprava

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

Změna barvy v záhlaví tabulky

Změňte si předdefinované záhlaví tabulky, experimentujte s barvami. Jak zjistit HEX barvu s pomocí barevné palety je uvedeno ve článku formátování tabulky přes editor.

Kód pro vložení

.tabulka thead th, .tabulka thead td {
color: white;
background-color: #252525;
border-bottom: 1px solid #252525;
}

Výsledná úprava

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

Přidat komentář

Přehled komentářů

  • Zarovnání

    20.6.2016 15:57:56 | Max

    Co když budu chtít zarovnat sloupec Q2 vpravo
    díky

    Odpovědět

  • RE: Zarovánání

    21.6.2016 13:27:47 | tým inPage

    Dobrý den,
    pro zarovnání konkrétních sloupců doporučuji použít tento zápis:

    .tabulka td:nth-child(3) {text-align:right;}

    Číslo v závorce označuje pro kterou buňku v řadě je vlastnost určena.
    Vlastnost se pak projeví u každé 3. buňky, na každém řádku.

    Odpovědět

inPage.cz - webové stránky, doména a webhosting snadno.