Codice esempio per tabella con div e CSS

**Hobby** · 10-03-2008, 17:56

Ho ricevuto richieste per realizzare tabelle con div e css, pertanto per chi fosse interessato, riporto di seguito un codice esempio di tabella 100% 3 colonne e 3 righe adattata a risoluzione 1024x768

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>
<title>Tabella con CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
@charset "utf-8";
/* CSS Documento */

.contenitore {
	border: 1px outset black; 
	height: 194px; 
	position: relative; 
	text-align: left; 
	width: 987px;
}
.cella_1 {
	height: 46px; 
	left: 6px; 
	border: 1px outset black; 
	padding: 5px; 
	position: absolute; 
	top: 5px; 
	width: 306px;
}
.cella_2 {
	height: 46px; 
	left: 329px; 
	border: 1px outset black; 
	padding: 5px; 
	position: absolute; 
	top: 5px; 
	width: 320px;
}
.cella_3 {
	height: 46px; 
	left: 666px; 
	border: 1px outset black; 
	padding: 5px; 
	position: absolute; 
	top: 5px; 
	width: 303px;
}
.cella_4 {
	height: 46px; 
	left: 6px; 
	border: 1px outset black; 
	padding: 5px; 
	position: absolute; 
	top: 68px; 
	width: 306px;
}
.cella_5 {
	height: 46px; 
	left: 329px; 
	border: 1px outset black; 
	padding: 5px; 
	position: absolute; 
	top: 68px; 
	width: 320px;
}
.cella_6 {
	height: 46px; 
	left: 666px; 
	border: 1px outset black; 
	padding: 5px; 
	position: absolute; 
	top: 68px; 
	width: 303px;
}
.cella_7 {
	height: 46px; 
	left: 6px; 
	border: 1px outset black; 
	padding: 5px; 
	position: absolute; 
	top: 131px; 
	width: 306px;
}
.cella_8 {
	height: 46px; 
	left: 329px; 
	border: 1px outset black; 
	padding: 5px; 
	position: absolute; 
	top: 131px; 
	width: 320px;
}
.cella_9 {
	height: 46px; 
	left: 666px; 
	border: 1px outset black; 
	padding: 5px; 
	position: absolute; 
	top: 131px; 
	width: 303px;
}
/* Fine CSS Documento */
</style>

</head>
<body>

<div class="contenitore">
	<div class="cella_1">
    	Prima cella / Prima colonna /Prima riga
    </div>
    <div class="cella_2">
    	Prima cella / Seconda colonna /Prima riga
    </div>
    <div class="cella_3">
    	Prima cella / Terza colonna /Prima riga
    </div>
    <div class="cella_4">
    	Seconda cella / Prima colonna /Seconda riga
    </div>
    <div class="cella_5">
    	Seconda cella / Seconda colonna /Seconda riga
    </div>
    <div class="cella_6">
    	Seconda cella / Terza colonna /Seconda riga
    </div>
    <div class="cella_7">
    	Terza cella / Prima colonna /Terza riga
    </div>
    <div class="cella_8">
    	Terza cella / Seconda colonna /Terza riga
    </div>
    <div class="cella_9">
    	Terza cella / Terza colonna /Terza riga
    </div>
</div>

</body>
</html>

**salasir** · 10-03-2008, 18:06

Scusa, ma non ho capito la ragione di realizzare una tabella con i div. :master:

Se è realmente una tabella, si usano le tabelle ... Sono fatte apposta.

**Vincent.Zeno** · 10-03-2008, 18:31

Originariamente inviato da salasir
Scusa, ma non ho capito la ragione di realizzare una tabella con i div. :master:

perché magari non contiene dati tabellari? (corrispondenza riga-colonna)

l'esempio è un po' rigido... ma credo d'aiuto a chi comincia

bravo Hobby

**salasir** · 11-03-2008, 10:28

Può essere.

Ma la mia riflessione era più che altro di concetto. Se i dati sono tabellari si usano le tabelle, altrimenti si utilizzano sicuramente i div, ma non assegnandogli una funzione "tabellare".

Si potrebbe semplificare il tutto ripetendo i <div> "cella" definiti una sola volta ed utilizzando il clear (non l'ho provato a fondo ed eventualmente vanno sistemati i margini):

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>
<title>Tabella con CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
@charset "utf-8";
/* CSS Documento */

.contenitore {
	padding: 0 0 5px 5px; margin: 0;
	border: 1px outset black; 
	height: 194px; 
	text-align: left; 
	width: 980px; 
}
.cella {
	height: 45px; 
	float:left; 
	border: 1px outset black; 
	padding: 5px; 
	width: 306px; 
	margin: 5px 5px 0 0;
}
.clear {
	clear: left; 
}

/* Fine CSS Documento */
</style>

</head>
<body>

<div class="contenitore">
    <div class="cella">
    	Prima cella / Prima colonna /Prima riga
    </div>
    <div class="cella">
    	Prima cella / Seconda colonna /Prima riga
    </div>
    <div class="cella">
    	Prima cella / Terza colonna /Prima riga
    </div>
    <div class="cella clear">
    	Seconda cella / Prima colonna /Seconda riga
    </div>
    <div class="cella">
    	Seconda cella / Seconda colonna /Seconda riga
    </div>
    <div class="cella">
    	Seconda cella / Terza colonna /Seconda riga
    </div>
    <div class="cella clear">
    	Terza cella / Prima colonna /Terza riga
    </div>
    <div class="cella">
    	Terza cella / Seconda colonna /Terza riga
    </div>
    <div class="cella">
    	Terza cella / Terza colonna /Terza riga
    </div>
</div>

</body>
</html>

**Vincent.Zeno** · 11-03-2008, 13:30

Originariamente inviato da salasir
Ma la mia riflessione era più che altro di concetto. Se i dati sono tabellari si usano le tabelle, altrimenti si utilizzano sicuramente i div, ma non assegnandogli una funzione "tabellare".

e come la metti con la solita domanda...
"ho un sito fatto a tabelle e voglio passare ai div. CHI MI AIUTA?"

i vostri due sono esempi dai quali partire, no?
quindi anche tu hai contribuito, bravo!

**salasir** · 11-03-2008, 14:38

Originariamente inviato da Vincent.Zeno
e come la metti con la solita domanda...
"ho un sito fatto a tabelle e voglio passare ai div. CHI MI AIUTA?"

Sì, potrebbe essere, una sorta di transitional layout ...

Però credo che, quando uno desidera passare ai CSS, sia meglio si dimentichi il passato e ricominci da capo a strutturare il layout. Personalmente credo che riuscirei a fare un minestrone incredibile durante la trasformazione ...

*pragma · 11-03-2008, 17:20

concordo in tutto con salasir.
quando uno comincia guarda solo all'effetto, poi comincia a confrontare con browser diversi e gli effetti sono diversi, poi comincia a parlare di accessibilità (per la quale i tag vanno usati per il motivo per il quale sono nati e non per raggiungere solo l'effetto visivo) e con il tempo si accorge che l'accessibilità non è solo alla disabilità ma contemporaneamente accessibilità a media diversi (cellulari, televisori, monitor in digitale, stampanti ecc...)
Allora è meglio non prendere il vizio di usare in modo inappropriato i tag, ma usare subito la sintassi corretta. E se è stato fatto qualche errore di valutazione si fa come dice salasir

ciao

**Hobby** · 11-03-2008, 18:26

Se volete trovare per forza dei difetti su tutto allora non c'è niente privo di difedetti e migliorabile sotto ogni aspetto, bisogna avere solo l'apertura mentale di usare ogni cosa quando necessita, e non fossilizzarsi su alcuni concetti e non vedere altro.

Il codice che io ho postato vuole essere solo un punto di partenza migliorabile per chi non vuole usare le tabelle (fra l'altro ancora molto usate e fino a poco tempo fa usate da tutti) e ha da posizionare degli oggetti in una struttura tipo tabella e usando i float da voi menzionati il risultato non cambia, non credo inoltre di avere stravolto la funzione dei tag.

Questa cosa mi è stata chiesta più volte da chi vuole abbandonare la struttura a tabelle impressionato dal fatto che sentono continuamente a dire che le tabele non si usano.

Se voi aveste degli oggetti da posizionare in fila su diverse righe cosa consigliereste a queste persone?

**salasir** · 11-03-2008, 18:31

Dipende dall'argomento cui riguardano gli oggetti. Potrebbe essere una lista non ordinata <ul>[*], una lista di definizione <dl><dt><dd>, una serie di div flottati e affiancati come l'esempio di cui sopra, ...

I contenuti dovrebbero essere racchiusi nel tag che semanticamente li descrive.

**Hobby** · 11-03-2008, 18:52

Originariamente inviato da salasir
Dipende dall'argomento cui riguardano gli oggetti. Potrebbe essere una lista non ordinata <ul>[*], una lista di definizione <dl><dt><dd>, una serie di div flottati e affiancati come l'esempio di cui sopra, ...

I contenuti dovrebbero essere racchiusi nel tag che semanticamente li descrive.

Div flottanti ecc.. Pensi che sia un concetto, da spiegare e da far assimiliare a uno che comincia?

codice:

I contenuti dovrebbero essere racchiusi nel tag che semanticamente li descrive.

Perchè se uno ha delle foto o del testo ecc. i div che ho usato non vanno bene?

Se si vuole rendere le cose difficili, allora mi trovi d'accordo e non ribatto più, ma in questo caso secondo me vuole solo essere una critica per confondere le idee a un principiante che legge questa thread.

Ho visto la stessa proposta in un'altro forum e non ci sono stati pareri negativi! Addiritura è stata proposta in una versione di tabelle annidate, se l'avessi proposta qui, apriti o cielo.

Discussione: Codice esempio per tabella con div e CSS

Strumenti discussione

Ricerca discussione

Visualizza

Codice esempio per tabella con div e CSS

Permessi di invio