Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it
    Registrato dal
    Oct 2005
    Messaggi
    311

    tabella con bordo sottile

    Ragazzi mi aiutate a fare una tabella così:
    tabella.jpg
    intendo con i bordi così sottili.

    se imposto border="1" non viene così...
    come devo impostare il codice?
    grazie

  2. #2
    Devi applicare il bordo ai tag td:
    CSS:
    codice:
    table td{
         border:1px solid #666;
         background:#aaa;
    }
    HTML:
    codice:
    <table cellspacing="0" cellspadding="0">
    
    </table>

  3. #3
    Utente di HTML.it
    Registrato dal
    Oct 2005
    Messaggi
    311
    Quote Originariamente inviata da lucavizzi Visualizza il messaggio
    Devi applicare il bordo ai tag td:
    CSS:
    codice:
    table td{
         border:1px solid #666;
         background:#aaa;
    }
    HTML:
    codice:
    <table cellspacing="0" cellspadding="0">
    
    </table>
    va bene però solo la parte esterna viene sottile... quella interna no. ho sbagliato qualcosa?
    tabella.jpg

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Quoto lucavizzi in linea generale, ma aggiungo una precisazione. In quel caso il bordo, essendo applicato alle singole celle, risulta doppio tra una cella e l'altra, come tu stesso hai notato.

    In tal caso puoi risolvere "collassando" i bordi. Devi comunque andare di css.
    Puoi mettere sul tag: style="border-collapse: collapse;"

    Oppure fare tutto da css. Un esempio:
    codice:
    <!DOCTYPE HTML>
    <html>
      <head>
        <title>Esempio</title>
        <meta charset="utf-8">
        <style type="text/css">
          table{
            background: #c3c3c3;
            border-collapse: collapse;
          }
          td{
            border: 1px solid #7f7f7f;
            padding: 5px;
          }
        </style>
      </head>
      <body>
        <table>
          <tr><td>Lorem</td><td>ipsum dolor</td></tr>
          <tr><td>sit</td><td>amet, consectetur adipisicing</td></tr>
          <tr><td>elit</td><td>sed do eiusmod</td></tr>
        </table>
      </body>
    </html>
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Utente di HTML.it
    Registrato dal
    Oct 2005
    Messaggi
    311
    perfetto.
    grazie ad entrambi

  6. #6
    Anche così:
    codice:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Documento senza titolo</title>
    <style type="text/css">
    td {
        border-bottom: 1px #000000 solid;
        border-right: #000000 1px solid;
    }
    table {
        border-top: 1px #000000 solid;
        border-left: 1px #000000 solid;
    }
    </style>
    </head>
    
    <body>
    <table width="500" border="0" cellspacing="0" cellpadding="0">
          <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
          </tr>
          <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
          </tr>
          <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
          </tr>
          <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
          </tr>
    </table>
    
    </body>
    </html>
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

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.