Tutoriál: Ako si vytvoriť tabuľku s použitím CSS3 a pseudotried

Ako si vytvoriť tabuľku s použitím CSS3 a pseudotried

CSS3 obsahuje celú radu pseudotried. Sú súčasťou bežne používaných selektorov. Príklad: jednotlivé štýly smerované na element prostredníctvom selektoru s pseudotriedou sa aplikujú napr. pri prechode myšou ponad element - presudotrieda :hover. Pseudotriedy sa používajú aj na výber elementov na základe takých informácií, ktoré nie je možné vyjadriť bežnými selektormi, napr. definovaný selektor určuje, že riadky v tabuľke majú byť sivé, ale ak chceme, aby boli sivé riadky len napr. párne, musíme bližšie špecifikovať selektor, čiže použijeme príslušnú pseudotriedu.
Pseudotriedy si vysvetlíme na tabuľke (faktúra), ktorá bude vytvorená pomocou HTML5 tabuľky.

Základná tabuľka bez použitia CSS3:


Tabuľka s použitím CSS3 - VÝSLEDOK:


HTML kód pre zostavenie tabuľky:
Využijeme tieto elementy:

<table></table> - párová značka, označuje začiatok a koniec tabuľky
<tr></tr>
- párová značka, označuje jeden riadok tabuľky
<th></th>- párová značka, označuje bunku tabuľky - hlavičku, text v tejto bunke bude hrubým písmom
<td></td>- párová značka, označuje klasickú bunku tabuľky. Bunky sú priamymi potomkami riadkov. Nikdy nie naopak.
Využijeme tieto atribúty:
id= "table"
- identifikátor pre spojenie so selektorom kaskádovej šablóny,
colspan="3" - spájanie buniek v jednom riadku. Číslo v úvodzovkách označuje počet buniek v riadku, ktoré sa majú spojiť do jednej bunky.


<table id="table"> <tr> <th>Položka</th> <th>Cena</th> <th>Počet</th> <th>Celkom</th> </tr> <tr> <td>Šálka na kávu</td> <td>10 €</td> <td>5</td> <td>50 €</td> </tr> <tr> <td>Tričko</td> <td>20 €</td> <td>4</td> <td>80 €</td> </tr> <tr> <td>Červené stužky</td> <td>15 €</td> <td>2</td> <td>30 €</td> </tr> <tr> <td colspan="3">Medzisúčet</td> <td>130 €</td> </tr> <tr> <td colspan="3">Doprava</td> <td>20 €</td> </tr> <tr> <td colspan="3">Celkom</td> <td>150 €</td> </tr> </table>

Podrobný popis selektorov aj so pseudotriedami:
Pseudotrieda sa k základnému selektoru pripája pomocou dvojbodky:
príklad:
#odkaz - základný selektor
#odkaz:hover - pripojenie pseudotriedy :hover, čiže sa jednotlivé štýly aplikujú na element po prechode myšou ponad element.
K úprave tabuľky pomocou CSS3 použijeme tieto selektory, pseudotriedy a pravidlá štýlov:

#table {
	    width: 600px;
		border-collapse: collapse;
}
th,td {
	   border: none;
}
th {
	 background-color: #000;
	 color: #FFF;
	 
}
/*pruhovane riadky pomocou preudotriedy :nth-of-type , nájde každý n-ty element na základe 
kľúčového slova even= nepárny, odd=párny*/
tr:nth-of-type(even) {
	                  background-color: #f3f3f3;
					  
}
tr:nth-of-type(odd) {
	                  background-color: #ddd;
					  
}


/*zarovnanie textu v stĺpcoch pomocou preudotriedy :nth-child*
 vysvetlenie:
 
 a - násobok
 b - posun
 an+b - vzorec
 
 selektor nth-child hľadá potomka elementu a , následne použijeme kľúčové 
 slovo alebo vzorec
 
 tr:nth-child(n) -  vyberieme všetky riadky tabuľky

 tr:nth-child(n+2) -  vyberieme všetky riadky tabuľky okrem toho prvého, 
 čo je riadok obsahujúci záhlavie

 tr:nth-child(2n) -  vyberieme každý druhý riadok

 tr:nth-child(3n) -  vyberieme každý tretí riadok

 tr:nth-child(2n+4) - s využitím posunu vyberieme každý druhý riadok, ale 
 začne počítať až od štvrtého riadku

*/
#table td:nth-child(n+2){
	                     text-align: right;						  
}

/*priradenie hrúbky textu poslednému riadku pomocou pseudotriedy 
:last-child - vyberie posledného potomka elementu*/
tr:last-child {
	           font-weight: bolder;
}
tr:last-child, td:last-child {
 	                         font-size: 20px;
}


/*odčítanie pomocou preudotriedy :nth-last-child,  chceme zvýrazniť riadok s dopravou*/

tr:nth-last-child(2) { /*vyberie druhého potomka od konca*/
                      color: green;
}

/*zarovnanie posledných 3 riadkov v treťom stĺpco vpravo*/
tr:nth-last-child(-n+3) td {
	                        text-align: right;
}

Ak by sme nepoužívali pseudotriedy, museli by sme jednotlivé časti tabuľky označiť identifikátormi alebo triedami a aplikovať štýly na elementy cez takto zostavené selektory.
Ako sa pozrieme do CSS šablóny, tak vidíme že okrem prvých troch selektorov (riadok 4, 8 a 11), všetky ostatné selektory obsahujú pseudotriedu.

Rubriky: