Tabelle -> div: spiegatemi

**k.b** · 19-06-2009, 14:53

Scrivo HTML da tempo, ho usato tantissimo i CSS, ma una cosa che non riesco proprio a capire e' come utilizzare l'approccio ai layout fatto incastrando i div invece di usare le tabelle. Ogni soluzione che trovo o provo mi sembra un hack piu' complesso del necessario, e vorrei capire se cio' dipende da mia ignoranza in materia, o proprio da limiti dei CSS.

Vi chiedo per favore di indicarmi il modo piu' corretto per realizzare questo layout senza tabelle:

codice:

/---------------------------------------------------\
|                      HEADER                        |
|                                                    |
+----------------------------------------------------+
|          |                                         |
|          |                                         |
|          |                                         |
|          |                                         |
|          |                                         |
|          |                                         |
|  MENU    |                                         |
|  200px   |                                         |
|          |                                         |
|          |                                         |
|          |                                         |
|          |                                         |
|          |                                         |
|          |                                         |
|          |                                         |
|          |                                         |
|          |                                         |
+----------------------------------------------------+
|                      FOOTER                        |
|                                                    |
\----------------------------------------------------/

il tutto largo 900px, centrato nella finestra e con un border di 1px che racchiude il tutto.

Grazie!

**loop** · 19-06-2009, 15:54

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>Documento senza titolo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.div-1 {
	border: 1px outset #e0dfe3;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	width: 902px;
}

.div-1-1 {
	border: 1px inset #e0dfe3;
	clear: both;
	float: left;
	padding: 0px;
	width: 900px;
}

.div-2 {
	border: none;
	margin-top: 25px;
	text-align: left;
	width: 900px;
}

.div-2-1 {
	border: none;
	clear: both;
	display: inline;
	float: left;
	line-height: 100px;
	margin-left: 5px;
	margin-top: 5px;
	padding: 5px;
	text-align: center;
	width: 880px;
}

.div-2-2 {
	border: none;
	clear: both;
	display: inline;
	float: left;
	margin-left: 5px;
	margin-top: 5px;
	padding: 5px;
	width: 193px;
}

.div-2-3 {
	border: none;
	float: left;
	line-height: 250px;
	margin-left: 5px;
	margin-top: 5px;
	padding: 5px;
	text-align: center;
	width: 672px;
}
</style>
	</head>
	<body>
		<div class="div-1">
			<div align="center" class="div-1-1">
				<div class="div-2">
					<div align="center" class="div-2-1">Header</div>
					<div align="center" class="div-2-2">
						

Menu</p>
						

200px</p>
					</div>
					<div align="center" class="div-2-3">Contenuti</div>
					<div align="center" class="div-2-1">Footer</div>
					<div style="clear: both;"></div>
				</div>
			</div>
			<div style="clear: both;"></div>
		</div>
	</body>
</html>

**moonba** · 19-06-2009, 16:39

io lo farei così:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header{position:relative}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}

div#container{width:900px;margin:0 auto;border: 1px solid black}
div#content{float:right;width:500px}
div#navigation{float:left;width:200px}
div#extra{float:left;clear:left;width:200px}
div#footer{clear:both;width:100%}
</style>
</head>
<body>
<div id="container">
<div id="header"><h1>Header</h1></div>
<div id="wrapper">
<div id="content">


1) Contenuto column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>


very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>


fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p>


column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p>
</div>
</div>
<div id="navigation">


2) Navigazione long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>
</div>

<div id="footer">

Il footer</p></div>
</div>

</body>
</html>

**k.b** · 20-06-2009, 23:47

Vi ringrazio molto per le risposte, pero' continuo a non capire perche' dovrebbe essere preferibile una soluzione del genere quando la versione a tabella e' enormemente piu' semplice, leggibile e logica. Mi sembra che si debba impazzire a contare i pixel per far combaciare le cose (il layout di loop ha i div non adiacenti l'uno all'altro e distanziati in modo non uniforme, quello di moonba ha i due div centrali allineati a sx e dx con dello spazio vuoto in mezzo) e non capisco perche' cercarsi questa complicazione. Vorrei davvero capire qual e' il vantaggio (per il resto uso ed apprezzo i CSS da molto tempo), perche' se vale la pena bene altrimenti lascio perdere e continuo con le tabelle.

**loop** · 21-06-2009, 00:33

Originariamente inviato da k.b
Vi ringrazio molto per le risposte, pero' continuo a non capire perche' dovrebbe essere preferibile una soluzione del genere quando la versione a tabella e' enormemente piu' semplice, leggibile e logica. Mi sembra che si debba impazzire a contare i pixel per far combaciare le cose (il layout di loop ha i div non adiacenti l'uno all'altro e distanziati in modo non uniforme, quello di moonba ha i due div centrali allineati a sx e dx con dello spazio vuoto in mezzo) e non capisco perche' cercarsi questa complicazione. Vorrei davvero capire qual e' il vantaggio (per il resto uso ed apprezzo i CSS da molto tempo), perche' se vale la pena bene altrimenti lascio perdere e continuo con le tabelle.

I due layout hanno due impostazioni diverse ma funzionano benissimo, quello che ti ho postato mi sembra anche abbastanza pulito e non ho capito le tue osservazioni.

Per i motivi che si deve usare i div al posto delle tabelle, ti posso dire che le tabelle vanno usate solo per dati tabellari e le parole "standard, compatibilità, accessibilità, semantica" non ti dicono nulla?

**k.b** · 21-06-2009, 01:27

Originariamente inviato da loop
I due layout hanno due impostazioni diverse ma funzionano benissimo, quello che ti ho postato mi sembra anche abbastanza pulito e non ho capito le tue osservazioni.

Per i motivi che si deve usare i div al posto delle tabelle, ti posso dire che le tabelle vanno usate solo per dati tabellari e le parole "standard, compatibilità, accessibilità, semantica" non ti dicono nulla?

Non fraintendermi, ti ringrazio molto per la tua risposta, il tuo layout e' interessante, pero' quello che mi fa storcere il naso e' che mi sembra strano che debbano essere necessarie 66 righe di codice *escluso il markup* per realizzare un layout cosi' semplice. Teoricamente le uniche due misure necessarie in pixel per definire in maniera esauriente il layout sono la larghezza totale e quella della barra del menu, invece tu hai dovuto specificare ben 6 width: ha senso doversi mettere a fare i conti per far combaciare margini e allineamenti?

Contrariamente all'impressione che hai avuto, mi interessa molto studiare gli standard, d'altra parte se cosi' non fosse potrei tranquillamente ignorare la cosa invece di cercare di migliorare le mie conoscenze. Scrivo il codice esclusivamente a mano con l'editor da cui il mio avatar e non ho problemi a validare markup e CSS. Ho scritto questo post non perche' la cosa mi sembrasse impossibile, ma perche' pensavo ci dovesse essere un modo molto piu' semplice per farla, perche' l'idea che mi sono fatto - anche guardando le vostre soluzioni - e' che l'approccio table-less funziona, ma e' una specie di tira e molla finche' le cose non tornano. Dov'e' la logica nella necessita' di usare due div vuoti solo per "clear: both"? O di dover usare due div wrapper annidati?

**loop** · 21-06-2009, 11:37

La logica stà nel fatto di fare una pagina rispettando delle regole, come la compatibilità con tutti i browser, gli standad predefiniti, la semantica ogni tag ha la sua ragione d'essere, le tabelle come dice la parola sono state create per dati tabellari, da disporre in corrispondenza di riga e colonna e non per posizionare oggetti, l'accessibilità, rivolta specialmente a chi ha qualche disabilità, come i non vedenti, prova a pensare un non vedente che accede a un sito che non rispetta queste regole, tutti gli strumenti che usa compreso i sintetizzatori vocali sarebbero nel pallone

**k.b** · 21-06-2009, 12:14

Mi spieghi in che modo le tabelle compromettono l'accessibilita'?

In quanto a compatibilita' coi browser, il supporto alle tabelle e' sempre stato molto molto piu' uniforme che agli standard CSS (specialmente per il browser piu' usato), quindi

**StefanoC** · 24-06-2009, 09:59

2 scuole di pensiero diverse.

anche io ho usato tabelle a go-go per anni per fare il layout del sito, ma tutte le volte c'erano da fare gli scongiuri sul rendering. Immagini non perfettamente allineate, cell padding, margin, border tutte le volte da specificare a 0. Layout misti fluidi e fissi che potevano convivere solo con la famigerata linea da 1 px trasparente che "puntellasse" le celle delle colonne che dovevano rimanere fisse. E poi sostanzialmente impossibilità di creare layout complessi.
Insomma un inferno.

Il passaggio ai div è stato benvenuto: forse un po' più ostici all'inizio, ma in fondo bazzecole, rispetto ai vantaggi:

- gestione grafica di background: senza scomodare le tecniche tipo css sprites, prova a posizionare lo sfondo in un punto preciso e a farlo ripetere una sola volta ...
- image replacement e contenuti.... come la mettiamo con le tabelle ?
- floating e clearing dei div - impossibili con <table>
- posizionamenti relativi/assoluti ecc - impossibili con <table>
- margin e padding davvero precisi al px - impossibili con <table>
- bordi di facilissima gestione.

Le tabelle, intendiamoci, le uso ancora moltissimo per i dati tabellari; in effetti alternative pratiche non ne esistono. Esse poi hanno alcuni tag dedicati piuttosto comodi:
thead, tfoot e caption.

Stefano

**fcaldera** · 24-06-2009, 10:16

Originariamente inviato da k.b
Vi ringrazio molto per le risposte, pero' continuo a non capire perche' dovrebbe essere preferibile una soluzione del genere quando la versione a tabella e' enormemente piu' semplice, leggibile e logica.

Non è affatto logica perchè le tabelle vanno usate per i dati realmente tabellari, mentre le division <div> sono più indicate per strutture generiche

Non è più leggibile, perchè più annidi contenuti e tabelle dentro altre tabelle, più diventa
impossibile capire la gerarchia degli elementi.

Non è più semplice, perchè le tabelle - a differenza delle division che sono contenitori neutri - sono rese in maniera molto disomogenea tra i vari browser i quali applicano bordi, stili di font, allineamenti e spaziature che magari de default non si vorrebbero.

Inoltre un layout tableless è più corto da scrivere, in termini di codice, del 20%/60% rispetto alle tabelle e ti fornisce una flessibilità di posizionamento che le tabelle non possono garantirti

Discussione: Tabelle -> div: spiegatemi

Strumenti discussione

Ricerca discussione

Visualizza

Tabelle -> div: spiegatemi

Permessi di invio