Esempi di CSS nelle tabelle

Inserisco qua di seguito una serie di codici di stile CSS per realizzare tabelle, testi, ecc...

Per elencare una serie di dati può essere furbo che le righe abbiano diversi colori. Per evitare di inserire tutti i codici di una tabella uno di fila all'altro, cosa possibile (vedi qua), possiamo inserire un codice CSS

<style type="text/css">
#rigachiara {
     background: #708090;
     color: #FFFFF0;
}
</style>


Ora vediamo cosa succede nella tabella:

<table>
<tr id= rigachiara> <td>
Viva la vita
 </td>  </tr> </table>

Che diventa in altre parole:

Viva la vita



Colore sfondo e testo alternati

Vediamo se vogliamo fare una tabella con le due righe alternate. Dobbiamo fare un altro codice CSS:

<style type="text/css">
#rigascura {
     background: #FFE4C4;
     color: #1C39BB;
}

#rigachiara {
     background: #708090;
     color: #FFFFF0;
}
</style>


La tabella diverrà un po' differente:

<table>
   <tr id= rigachiara> <td>
      id rigachiara
    </td></tr>
   <tr id= rigascura > <td>
      id rigascura
   </td></tr>
   <tr id= rigachiara> <td>
      id rigachiara
    </td></tr>
   <tr id= rigascura > <td>
      id rigascura
    </td></tr>
</table>

id rigachiara
id rigascura
id rigachiara
id rigascura



Larghezza

Questa tabella è infinitamente semplice, vediamo di complicarci la vita e realizzarne una più complessa. Consideriamo i due tipi di CSS che andremo a definire per lo sfondo delle singole righe, ora vediamo di impostare la larghezza della tabella tabella:

<style type="text/css">
#tabella {
     width: 450px; 
}
</style>

Creiamo un codice di una tabella:

<table id="tabella">
   <tr id= rigachiara> <td>
      id rigachiara
    </td></tr>
   <tr id= rigascura> <td>
      id rigascura
   </td></tr>
   <tr id= rigachiara> <td>
      id rigachiara
    </td></tr>
   <tr id= rigascura> <td>
      id rigascura
    </td></tr>
</table>

Ecco cosa succede:

id rigachiara
id rigascura
id rigachiara
id rigascura






BORDI

Vediamo di specificare anche i bordi della nostra tabella:

<style type="text/css">
#tabellabordi {
     width: 450px;
     border: 2px solid black;
}
</style>

Creiamo un codice di una tabella:

<table id="tabellabordi">
   <tr id= rigachiara> <td>
      id rigachiara
    </td></tr>
   <tr id= rigascura> <td>
      id rigascura
   </td></tr>
   <tr id= rigachiara> <td>
      id rigachiara
    </td></tr>
   <tr id= rigascura> <td>
      id rigascura
    </td></tr>
</table>

Ecco cosa succede:



id rigachiara
id rigascura
id rigachiara
id rigascura



Nessun commento:

Posta un commento

Ti ringrazio per ogni commento, appunto, modifica o richiesta di chiarimento. Mantenendo sempre un tono civile. Ogni commento che non rispetta tali regole, sarà eliminato, sopratutto se fatto in maniera anonima. TI ricordo che cerchiamo nuovi collaboratori o appunti, per implementare il materiale presente sul sito.

Related Posts Plugin for WordPress, Blogger...