HTML å endre Cell Color

HTML å endre Cell Color


Du trenger ikke å blinke animasjoner og dans farger for å lage en nettside arbeid. Et par subtile visuelle effekter, men kan ikke bare forbedre nettstedet, men også gi viktige ledetråder til dine besøkende. For eksempel HTML-tabeller viser organiserte tabelldata i celler og rader på en nettside. Ved å endre bakgrunnsfargen som en bruker musen svever over ulike celler, kan du opprette en engasjerende mus-over effekt som hjelper brukeren å identifisere den aktive cellen.

Bruksanvisning

1 Åpne Notisblokk. Legg til følgende kode i dokumentet:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Html xmlns = "http://www.w3.org/1999/xhtml">

<Head>

&lt;title>Table Cell Color Change Test&lt;/title>

</ Head>

<Body>

</ Body>

</ Html>

Dette skaper en tom webside.

2 Legg denne koden under den første <body> -taggen:

<Table border = "2">

<Tr>

<Td onmouseover = "style.backgroundColor = '# ff0000"; " onmouseout = "style.backgroundColor = '# ffffff"; "> 1 </ td>

<Td onmouseover = "style.backgroundColor = '# ff0000"; " onmouseout = "style.backgroundColor = '# ffffff"; "> 2 </ td>

</ Tr>

<Tr>

<Td onmouseover = "style.backgroundColor = '# ff0000"; " onmouseout = "style.backgroundColor = '# ffffff"; "> 3 </ td>

<Td onmouseover = "style.backgroundColor = '# ff0000"; " onmouseout = "style.backgroundColor = '# ffffff"; "> 4 </ td>

</ Tr>

</ Table>

Dette skaper et bord med to rekker og to kolonner. Den "onmouseover" endrer arrangementet en celle farge til rød (# FF0000) og "onmouseout hendelsen skifter farge tilbake til hvitt.

3 Trykk "CTRL + S" for å åpne "File Save" vindu og skriv "xyz.html" i "File Name" tekstboksen. Klikk på "Lagre".

4 Naviger til filen ved hjelp av Windows Utforsker og dobbeltklikker på filen. Nettleseren vil åpne og vise web-siden. Hold musen over tabellcellene. De vil endre farger.

Hint

  • Endre "onmouseover" og "onmouseout" farger til noen verdier som du liker. Gjør "onmouseout" farge det samme som tabellens bakgrunnsfarge. I dette eksempel er standard tabellbakgrunnsfarge hvit. HTML-koden angir fargene i heksadesimalt format. Lær mer om HTML farger på nettet (se Ressurser).