Youth to Code

< eelmine

Peatüki sisukord

---

6.1 CSS-i tabelid

CSS võimaldab anda tabelile välimuse. Saame muuta ääriseid, värve, suurust, lisada efekte jms. HTML-is lisatud tabel on ilmetu ning kujundamata ja tihtipeale raskesti loetav. Olgu meil lihtne tabel, mida soovime kujundada. CSS võimaldab ka eraldi elementide kaupa tabelit disainida, aga antud peatükis tegeleme tabeliga üldiselt.

 /*Tabeli lahtritele ja päistele äärise loomine*/
 td, th { border: 1px black solid;} 
 /*Lahtrite ühendamine omavahel, et iga lahter ei oleks eraldi kujundatud*/

 table { border-collapse: collapse;}

 /*Lisame tabeli päisele(th - table header) taustavärvi*/

 th {background: orange;}

 /*Lisame tabeli sisule(td - table details) tasutavärvi*/

 td {background: aqua;}

Määrame ära, milliseid elemente me soovime kujundada. Antud koodi näites määrame kõikide tabeli osadele mustad ning ühtlase joonega äärised paksusega 1 piksel. Värvime eraldi tabeli päise ning keha osa.

CSS abil saab tabeli taustaks määrata ka pilti, aga sel juhul peaks jälgima, et tekst ei jääks märkamatuks. Kasutades :hover näiteks märgendi <td> peal, saame lisada tabelile efekti, et liikudes hiirega üle tabeli andmete, muutub nende värv.

td:hover {background-color: #f5f5f5}

Iseseisev ülesanne:

< eelmine

Peatüki sisukord