Tabelle HTML consentono di presentare i dati in una pagina Web in formato tabellare. Ad esempio, la pagina di prodotto può contenere una tabella che visualizza le immagini e le descrizioni dei prodotti. Ogni tabella è costituito da cellule che si trovano in righe e colonne. Tavoli hanno anche diverse proprietà che controllano l'aspetto di elementi in ogni cella della tabella. Utilizzando queste proprietà, è possibile allineare immagini orizzontalmente e verticalmente all'interno di una cella.

Istruzioni

1

Aprire il blocco note e incollare il seguente codice HTML in un documento vuoto:

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

< html xmlns = "l'http://www.w3.org/1999/xhtml" >

< head >

< title > tabella celle allineamento immagine testo < / title >

< style type = "text/css" >

.cellAlign () {

text-align: center; Vertical-align:; centrale;

Height: 200px; Larghezza: 200px;

}

< / stile >

< / head >

< corpo >

< table class = "style1" >

< tr >

< classe td = "cellAlign" >

< img / >

< /td >

< classe td = "cellAlign" >

< img / >< /td >

< /tr >

< tr >

< classe td = "cellAlign" >

< img / >< /td >

< classe td = "cellAlign" >

< img / >< /td >

< /tr >

< / tabella >

< / body >

< / html >

Questo crea una tabella che contiene due righe e due colonne. Quattro "td" Tag definiscono le quattro celle all'interno della tabella. Si noti che ogni cella ha un tag "img". Tale tag posti un'immagine denominata "xyz.jpg" in ogni cella.

2

Modificare "xyz.jpg" con il nome di un'immagine reale sul disco rigido.

3

Esaminare l'etichetta di "stile" nella parte superiore del codice HTML. Definisce una classe CSS denominata "cellAlign." Questa classe determina l'aspetto di ogni cella della tabella. Ha una proprietà denominata testo-allineare tale allineamento orizzontale di controlli all'interno di una cella. Ha anche una proprietà denominata vertical-align che controlli di allineamento verticale. L'allineamento del testo proprietà ha un valore del "centro" e la vertical-align proprietà ha un valore di "medio".

4

Premere "Ctrl" e "S" per aprire la finestra di blocco note "Salva con nome". Tipo "Cell_Alignment_Image_Test.html nella casella di testo"Nome File"e scegliere"Salva"per salvare il documento come un file HTML.

5

Avviare Esplora risorse e individuare il file HTML. Fare doppio clic su esso. Il tuo browser per aprire e visualizzare le quattro immagini nelle celle della tabella. Le immagini saranno centrate nelle cellule perché ogni cella Allinea testo e allineamento verticale dei valori sono "centro" e "medio".

6

Tornare al documento HTML nel blocco note e individuare il tag "style" di nuovo. Modificare la parola "centro" a "sinistra" nella proprietà text-align. Modificare la parola "medio" verso il "basso" nella proprietà vertical-align. Premere "Ctrl" e "S" per salvare il file.

7

Ritorno al tuo browser e premere "F5" per aggiornare il contenuto. L'allineamento dell'immagine cambierà nelle cellule. Le immagini appariranno nell'angolo inferiore sinistro delle cellule a causa delle modifiche apportate alla classe "cellAlign".

Consigli & Avvertenze

• Modificando i valori di text-align e Allinea verticalmente, è possibile posizionare immagini all'interno delle cellule in una varietà di modi. È possibile utilizzare centro, sinistra e destra come valori per la proprietà che controlla l'allineamento orizzontale di testo-allineamento. Uso medio, superiore e inferiore come valori per la proprietà vertical-align.