Nwlapcug.com


Come modificare le dimensioni della tabella HTML con un Mouse

Controllare la larghezza e l'altezza delle tabelle nelle pagine Web con codice Cascading Style Sheet (CSS), impostando le proprietà "larghezza" e "altezza" su valori di pixel o percentuale. Aggiungere proprietà di larghezza / altezza per la tabella: hover"pseudo-classe per modificarne la dimensione quando il cursore del mouse punta a loro. Per una pagina con più tabelle che si desidera ridimensionare in modo diverso, definire una classe per ciascuna, dichiarando di conseguenza il corrispondente "hover" pseudo-classi.

Istruzioni

1

Inserire il seguente codice CSS tra i tag HEAD del documento HTML:

< style type = "text/css" >

tabella: hover {

Larghezza: 100px;

Height: 100px;

}

< / stile >

Invece di 100px, puoi sostituirlo con qualsiasi importo per le proprietà "larghezza" e "altezza" specificare la dimensione che della tabella assume quando ci passa sopra con il mouse.

2

Aggiungere una o più tabelle al corpo del documento HTML. Per esempio:

< table >

< tr >< td > uno < /td >< td > due < /td >< /tr >

< tr >< td > tre < /td >< td > quattro < /td >< /tr >

< / tabella >

3

Salvare la pagina e caricarlo in un browser Web. Spostare il cursore del mouse sopra un tavolo; sue dimensioni cambiano per la larghezza e l'altezza specificate.

4

Definire classi separate per le tabelle che si desidera ridimensionare in modo diverso. Ad esempio, modificare il codice CSS al seguente, cambiando le proprietà "larghezza" e "altezza" per le dimensioni desiderate:

< style type = "text/css" >

.T1:hover () {

Width: 300px;

Altezza: 300px;

}

.T2:hover () {

Larghezza: 100px;

Height: 100px;

}

< / stile >

Posizionare le tabelle seguenti nel corpo, notando l'uso dell'attributo "class" per distinguerli:

< table class = "t1" >

< tr >< td > uno < /td >< td > due < /td >< /tr >

< tr >< td > tre < /td >< td > quattro < /td >< /tr >

< / tabella >

< table class = "t2" >

< tr >< td > uno < /td >< td > due < /td >< /tr >

< tr >< td > tre < /td >< td > quattro < /td >< /tr >

< / tabella >