Ciao,
come posso realizzare questa tabella con i CSS?
Ciao,
come posso realizzare questa tabella con i CSS?
Attenzione ai termini!
Le tabelle si realizzano tramite i codici (X)HTML; eventualmente si formattano tramite i CSS.
Quindi il primo passo e` realizzare la tabella.
Studiati i tag che ti servono:
<table> <tr> <td> <th>
<caption> <thead> <tbody>
<col> <colgroups>
Il mio consiglio e` di provare a realizzare il codice corretto e di postarlo.
Poi quando la marcatura e` corretta, si puo` passare alla formattazione.
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento senza titolo</title> <style type="text/css"> <!-- .Stile1 {color: #FFFFFF} --> </style> </head> <body> <table width="820" height="234" border="0" cellspacing="0" cellpadding="15" summary="Tabella realizzata da Gufo"> <caption> Qui la didascalia </caption> <tr> <th height="30%" rowspan="2" align="center" valign="middle" scope="col"></th> <th height="10%" align="center" valign="middle" bgcolor="#5BA2B7" scope="col"><span class="Stile1">dfadsfda A</span></th> <th height="10%" align="center" valign="middle" bgcolor="#377B91" scope="col"><span class="Stile1">PEfdsafadsRIODO B</span></th> <th height="10%" align="center" valign="middle" bgcolor="#1A4D5E" scope="col"><span class="Stile1">fdsafads C</span></th> </tr> <tr> <td height="20%" align="center" valign="middle" bgcolor="#F0EEE5">Testo Testo</td> <td height="20%" align="center" valign="middle" bgcolor="#F0EEE5">Testo Testo</td> <td height="20%" align="center" valign="middle" bgcolor="#F0EEE5">Testo Testo</td> </tr> <tr> <td height="20%" align="left" valign="middle" bgcolor="#D4CDB3">Ufsad fast</td> <td height="20%" align="center" valign="middle" bgcolor="#EFF6F8">7.200,00</td> <td height="20%" align="center" valign="middle" bgcolor="#E0EBEE">9.000,00</td> <td height="20%" align="center" valign="middle" bgcolor="#E0EBEE">12.000,00</td> </tr> <tr> <td height="20%" align="left" valign="middle" bgcolor="#E0DCCD">10 Gifads fadsfORN</td> <td height="20%" align="center" valign="middle" bgcolor="#EFF6F8">10.000,00</td> <td height="20%" align="center" valign="middle" bgcolor="#E0EBEE">12.500,00</td> <td height="20%" align="center" valign="middle" bgcolor="#E0EBEE">16.500,00</td> </tr> <tr> <td height="20%" align="left" valign="middle" bgcolor="#D4CDB3">WEEKdsaf asd fasdfsa-END</td> <td height="20%" align="center" valign="middle" bgcolor="#EFF6F8">2.500,00</td> <td height="20%" align="center" valign="middle" bgcolor="#E0EBEE">2.800,00</td> <td height="20%" align="center" valign="middle" bgcolor="#E0EBEE">3.700,00</td> </tr> </table> </body> </html>
Grazie!
Ma non ci sono i bordi?
Ora te li metto! Ma tu una piccola aggiunta non riesci proprio?Originariamente inviato da Osterello
Grazie!
Ma non ci sono i bordi?
Ecco i bordi
codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento senza titolo</title> <style type="text/css"> <!-- .Stile1 {color: #FFFFFF} --> </style> </head> <body> <table width="820" height="234" border="1" cellspacing="0" cellpadding="15" summary="Tabella realizzata da Gufo"> <caption> Qui la didascalia </caption> <tr> <th height="30%" rowspan="2" align="center" valign="middle" scope="col"></th> <th height="10%" align="center" valign="middle" bgcolor="#5BA2B7" scope="col"><span class="Stile1">dfadsfda A</span></th> <th height="10%" align="center" valign="middle" bgcolor="#377B91" scope="col"><span class="Stile1">PEfdsafadsRIODO B</span></th> <th height="10%" align="center" valign="middle" bgcolor="#1A4D5E" scope="col"><span class="Stile1">fdsafads C</span></th> </tr> <tr> <td height="20%" align="center" valign="middle" bgcolor="#F0EEE5">Testo Testo</td> <td height="20%" align="center" valign="middle" bgcolor="#F0EEE5">Testo Testo</td> <td height="20%" align="center" valign="middle" bgcolor="#F0EEE5">Testo Testo</td> </tr> <tr> <td height="20%" align="left" valign="middle" bgcolor="#D4CDB3">Ufsad fast</td> <td height="20%" align="center" valign="middle" bgcolor="#EFF6F8">7.200,00</td> <td height="20%" align="center" valign="middle" bgcolor="#E0EBEE">9.000,00</td> <td height="20%" align="center" valign="middle" bgcolor="#E0EBEE">12.000,00</td> </tr> <tr> <td height="20%" align="left" valign="middle" bgcolor="#E0DCCD">10 Gifads fadsfORN</td> <td height="20%" align="center" valign="middle" bgcolor="#EFF6F8">10.000,00</td> <td height="20%" align="center" valign="middle" bgcolor="#E0EBEE">12.500,00</td> <td height="20%" align="center" valign="middle" bgcolor="#E0EBEE">16.500,00</td> </tr> <tr> <td height="20%" align="left" valign="middle" bgcolor="#D4CDB3">WEEKdsaf asd fasdfsa-END</td> <td height="20%" align="center" valign="middle" bgcolor="#EFF6F8">2.500,00</td> <td height="20%" align="center" valign="middle" bgcolor="#E0EBEE">2.800,00</td> <td height="20%" align="center" valign="middle" bgcolor="#E0EBEE">3.700,00</td> </tr> </table> </body> </html>
Attenzione Gufo, che la tua tabella ha alcuni problemi, che poi diventano grossi il momento in cui vuoi formattare.
Anzitutto hai inserito formattazione nel codice HTML: questo comporta che poi i CSS non funzionano, o funzionano solo in alcuni browser.
Secondo non hai usato i tag <col> e/o <colgroup>, che servono per marcare le colonne in modo da formattarle in modo omogeneo.
Quindi dal codice di Gufo vanno tolti tutti gli attributi.
Poi la formattazione va inserita tramite CSS: si ottiene un codice molto piu` pulito e manutenibile, oltre che adatto anche ai browser di ultima generazione (che potrebbero non accettare formattazione di tipo vecchio).
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
Permessi di invio
Rispondi quotando