» » » Convertire le tabelle HTML in CSS

Convertire le tabelle HTML in CSS

Una guida pratica per costruire una tabella di base utilizzando i CSS.

Convertire le tabelle HTML in CSS

Tramite questo articolo desideriamo spiegare come realizzare una tabella mediante codice CSS e senza l'ausilio dell'attributo table.

Foglio di stile

.table {
   width: 860px;
   border: 1px solid #ccc;
   text-align: center;
   margin-bottom: 20px;
   height: auto;
   overflow: hidden;
}
.tr {
   clear: both;
   background: url("table_background");
}
.td_left {
   width: 50%;
   float: left;
}
.td_right {
   width: 50%;
   float: left;
}


È importante notare che quando una cella contiene una maggiore quantità di contenuti rispetto a quella corrispondente nella colonna accanto, non è possibile avere due .td con la stessa altezza, come invece si otterrebbe usando le tabelle HTML.
Per fare in modo di avere una sfondo lineare, che suddivida perfettamente le due colonne, è quindi necessario assegnare uno sfondo al div .tr.

Codice html

<div class="table">
	<div class="tr">
		<div class="td_left">
	      <h2>Titolo della colonna 1</h2>
		</div>
	   <div class="td_right">
	      <h2>Titolo della colonna 2</h2>
	   </div>
	</div>
	<div class="tr">
		<div class="td_left">
	      <p>Il contenuto della prima colonna, riga 1.</p>
		</div>
	   <div class="td_right">
	      <p>Il contenuto della seconda colonna, riga 1.</p>
	   </div>
	</div>
	<div class="tr">
		<div class="td_left">
	      <p>Il contenuto della prima colonna, riga 2.</p>
		</div>
	   <div class="td_right">
	      <p>Il contenuto della seconda colonna, riga 2.</p>
	   </div>
	</div>
</div>

Dettagli pubblicazione

Categoria: CSS

Pubblicato da: loris.genetti in data: 06.01.2008 16:15:20

Ultima modifica di: loris.genetti in data: 15.06.2009 15:56:29

Statistiche

Segnala presso

add to oknotizie add to ziczac add to technotizie add to fai_informazione add to segnalo add to facebook add to delicious add to google add to technorati

Votazioni

0 commenti

Solo gli utenti registrati possono lasciare commenti.

Accedi o crea un account

©2008-2016 - Via Lambertenghi, 61 - 23030 Villa di Tirano (SO) - Italia - P.IVA: 00902570142