Visualizzazione dei risultati da 1 a 6 su 6
  1. #1

    come realizzare questa tabella

    Ciao,

    come posso realizzare questa tabella con i CSS?
    Immagini allegate Immagini allegate
    http://www.ecogiochi.it - il primo blogames del pianeta
    http://www.grogonet.com - Grog on network

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    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

  3. #3
    Utente bannato
    Registrato dal
    Sep 2007
    Messaggi
    2,777
    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>

  4. #4
    Grazie!
    Ma non ci sono i bordi?
    http://www.ecogiochi.it - il primo blogames del pianeta
    http://www.grogonet.com - Grog on network

  5. #5
    Utente bannato
    Registrato dal
    Sep 2007
    Messaggi
    2,777
    Originariamente inviato da Osterello
    Grazie!
    Ma non ci sono i bordi?
    Ora te li metto! Ma tu una piccola aggiunta non riesci proprio?

    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>

  6. #6
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    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

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.