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 >