Creare una Tabella DIV, [CSS e HTML]

« Older   Newer »
  Share  
Joker³
view post Posted on 17/10/2008, 17:52




Con questa guida impareremo a realizzare una tabella simile a questa:

Testo Testo Testo
All'interno di essa possiamo inserire Testo, Immagini etc..


Andiamo ora ad Analizzare il codice:
CODICE
<div align="left"><table cellPadding="20" cellSpacing="0" style="width: DIMENSIONI DELLA TABELLA%; background-color: #COLORE DELLO SFONDO; border: SPESSORE BORDOpx solid #COLORE DEL BORDO";><tr><td>


width: DIMENSIONI DELLA TABELLA%: Al posto di "DIMENSIONI DELLA TABELLA" Regoliamo le dimensioni.

background-color: #COLORE DELLO SFONDO;: Al posto di "COLORE DELLO SFONDO" inseiramo il codice esadecimale che vogliamo come sfondo della tabella.

border: SPESSORE BORDOpx solid: Al posto di "SPESSORE BORDO" mettiamo il numero di pixel che vogliamo come spessore del bordo intorno alla tabella.

#COLORE DEL BORDO";: Al posto di "COLORE DEL BORDO" mettiamo il codice esadecimale del colore che vogliamo per il bordo intorno alla tabella.

N.B. Dopo aver inserito tutto all'interno della tabella mettiamo il codice
CODICE
</tr></td></table></div>

in fondo a tutto per chiudere la tabella.

 
Top
Red eYe
view post Posted on 21/12/2008, 15:31




Non capisco perché tu prima abbia dichiarato un 'div' che specifica la posizione del contenuto, poi creato una tabella con una sola colonna e riga; quest'effetto si può ottenere anche senza utilizzare le tabelle, dal momento che ha una sola cella:

Testo/immagini/oggetti all'interno
HTML
<div style="border: SPESSORE px solid rgb(ROSSO1, VERDE1, BLU1); padding: DISTANZA px ; background-color: rgb(ROSSO2, VERDE2, BLU2);">Testo/immagini/oggetti all'interno</div>


SPESSORE: lo spessore del bordo in pixel

ROSSO1, VERDE1, BLU1: la quantità di rosso, verde e blu del colore del bordo (non tutti conoscono il codice esadecimale...)

DISTANZA : La distanza del contenuto dai bordi in pixel.

ROSSO2, VERDE2, BLU2: la quantità di rosso, verde e blu del colore di sfondo

Testo/immagini/oggetti all'interno: inserisci qui il contenuto

 
Top
1 replies since 17/10/2008, 17:52   1346 views
  Share