Hvordan lage en tabellcelle Klikkbart Uten en Border

Tabeller er web sideelementer som inneholder tekst eller kontroller. På noen nettsteder, er CSS brukes til å kontrollere brukernavigasjonsmenyer. Du kan lage tabellceller eller rader klikkbare, slik at besøkende kan bruke disse cellene til å navigere til et annet sted på nettstedet. Dette er nyttig hvis du vil fylle tabellceller med bakgrunnsbilder og farger og gjøre en større klikk område enn en knapp eller lenke gir. Skape denne effekten kan gjøres ved hjelp av HTML-kode.

Bruksanvisning

1 Opprett et nytt bord. I dette eksemplet vil tabellen inneholde bare en rad med en celle. For å lage en enkel tabell for å begynne med, kan du bruke følgende kode:
<Table>
<Tr>

<td>My Clickable Cell</td>

</ Tr>
</ Table>

2 Fjern cellen grensen. En tabell er gitt en ramme som standard. Følgende tillegg til "<table>" tag fjerner grensen fra cellen:
<Table border = "0">
<Tr>

<td>My Clickable Cell</td>

</ Tr>
</ Table>

3 Gi cellen en "onmouseover" event. Denne hendelsen er brukt når den besøkende svever musen over cellen. Det endrer også fargen, så en indikasjon gis til den besøkende at cellen er klikkbare. Du kan også bruke denne hendelsen til å endre markøren, så det endres til klikkbare hånd, noe som gjør det mer intuitivt for besøkende. Følgende kode gjør disse endringene:
<Table border = "0">
<Tr>

<td onmouseover="this.style.background='black';this.style.cursor='pointer'"
onmouseout="this.style.background='white';">My Clickable Cell</td>

</ Tr>
</ Table>

4 Legg inn koden som navigerer til en side etter at brukeren klikker på tabellcelle. Du kan bruke "onclick" event for å endre nettleserens plassering på domenet. Følgende kode viser hvordan du bruker navigering med en klikkbar tabellcelle:
<Table border = "0">
<Tr>

<td onmouseover="this.style.background='black';this.style.cursor='pointer'"
onmouseout="this.style.background='white';" onclick="window.location='myPage.htm'">My Clickable Cell</td>

</ Tr>
</ Table>