HTML-taulukon taustavärin muuttaminen

Tässä artikkelissa kuvataan tapoja muuttaa taulukon osien taustavärejä verkkosivustossa.

Vanhempi menetelmä käytti määritettä bgcolor muuttaa taulukon taustaväriä. Sitä voidaan käyttää myös taulukon rivin tai taulukon solun värin muuttamiseen. Mutta bgcolor-attribuutti on vanhentunut tyylitaulukoiden hyväksi, joten se ei ole paras tapa manipuloida taulukon taustaväriä.

Parempi tapa vaihtaa taustaväri on lisätä tyyliominaisuus taustaväri taulukko-, rivi- tai solutunnisteeseen.

Tämä esimerkki muuttaa koko taulukon taustaväriä:

Jos haluat muuttaa yhden rivin väriä, lisää taustaväri-ominaisuus.

Voit muuttaa yhden solun väriä lisäämällä attribuutin soluun.

Voit myös käyttää taustavärejä pöydänpäihin tai

Vaihda taustaväri tyylitaulukoiden avulla

On kuitenkin parempi välttää taustaväri-attribuutin käyttöä oikein muotoillun tyylitaulukon hyväksi. Voit esimerkiksi asettaa tyylit tyylitaulukossa HTML-dokumenttisi HEAD-kohtaan tai asettaa ne tyyliin

ulkoinen tyylilehti. Tällaiset muutokset HEADissa tai ulkoisessa tyylitaulukossa saattavat näkyä taulukoiden, rivien ja solujen kohdalla:

taulukko {tausta-väri: # ff0000; }
tr {taustaväri: keltainen; }
td {taustaväri: # 000; }

Sarakkeen taustavärin asettaminen

Paras tapa asettaa sarakkeen taustaväri on luoda tyyliluokka ja määritä se sitten sarakkeen soluihin. Luokan luomisen avulla voit määrittää kyseisen luokan tietyn sarakkeen soluihin yhdellä määritteellä.

CSS:

td. ColColor {taustaväri: sininen; }

HTML:

solu 1cell 2cell 1cell 2

Yksi merkittävä etu taustavärien hallinnassa tyylitaulukon kautta on, että voit muuttaa värivalintaa myöhemmin. Sen sijaan, että käisit läpi HTML-asiakirjan ja tekisit muutokset jokaiseen soluun, voit tehdä yhden muutoksen värivalintaan CSS sitä sovelletaan välittömästi kaikkiin tapauksiin, joissa class = "ColColor" syntaksin tulee näkyviin.