tabella creata esclusivamente con i css

[albertozzo]

ciao raga;
ho creato una tabella esclusivamente con i css:

css:

<style type="text/css">
<!--
html,body{margin: 0;padding:0; background-color:#ffffff; background-image:url(../../../sfondo.jpg); background-repeat: repeat-x;font-family: arial,sans-serif;font-size: 12px; text-align: center;}

#basetabella {
	top:0;
	left:0;
	position:absolute;
	width:768px;
	height:115px;
             padding:0px;
             text-align:left;
}

.riga {
	position:relative;
	width:767px;
	height:20px;  
	margin-bottom:2px;
}


.colonna1 {
	position:absolute;
	width:30px;
	height:20px; 
	background-color:#0000FF
}

.colonna2 {
	position:absolute;
	width:304px;
	height:20px;
	margin-left:32px; 
	background-color:#FF0000
}

.colonna3 {
	position:absolute;
	width:134px;
	height:20px;
	margin-left:338px;
             background-color:#FF00FF
}

.colonna4 {
	position:absolute;
	width:75px;
	height:20px;
	margin-left:474px;
             background-color:#000000
}

.colonna5 {
	position:absolute;
	width:75px;
	height:20px;
	margin-left:551px;
             background-color:#FFF000
}

.colonna6 {
	position:absolute;
	width:137px;
	height:20px;
	margin-left:628px;
             background-color:#0000FF
}

</style>

html:

<div id="basetabella">


<div class="riga">
<div class="colonna1"></div>
<div class="colonna2"></div> 
<div class="colonna3"></div>
<div class="colonna4"></div> 
<div class="colonna5"></div>
<div class="colonna6"></div>
</div>

<div class="riga">
<div class="colonna1"></div>
<div class="colonna2"></div> 
<div class="colonna3"></div>
<div class="colonna4"></div> 
<div class="colonna5"></div>
<div class="colonna6"></div>
</div>


<div class="riga">
<div class="colonna1"></div>
<div class="colonna2"></div> 
<div class="colonna3"></div>
<div class="colonna4"></div> 
<div class="colonna5"></div>
<div class="colonna6"></div>
</div>


<div class="riga">
<div class="colonna1"></div>
<div class="colonna2"></div> 
<div class="colonna3"></div>
<div class="colonna4"></div> 
<div class="colonna5"></div>
<div class="colonna6"></div>
</div>



</div>

Volevo sapere se questo è il modo corretto per creare una tabella con i css, e/o se ci sono errori... :master:

Insomma questa tabella in css può essere una valida alternativa alla tabella classica fatta in html?

Grazie mille

[ricman]

Originariamente inviato da albertozzo
Insomma questa tabella in css può essere una valida alternativa alla tabella classica fatta in html?

Secondo me no.
A che ti serve una tabella fatta così? Ti incasini di molto...
(Per i dati tabellari va benissimo una table normale e la tua sembra proprio per per dati tabellari.)

[thomas_anderson]

ciao!
credo sia un bell'esperimento! guarda se ti garba il mio:
http://gabrieleromanato.altervista.o...senza-tabelle/

[TomStardust]

Dipende dall'utilizzo che ne vuoi fare.. come dice ricman se devi utilizzarla per dati tabellari, la cosa migliore è usare proprio il tag table che è fatto apposta, anche secondo gli standard w3c

[thomas_anderson]

Secondo me avete frainteso: si tratta di un ottimo esperimento sul posizionamento contestuale.
la prossima volta però scrivici un articolo in cui dici anche della compatibilità browser.

[albertozzo]

Ciao

thomas_anderson ho letto il tuo articolo, ed è sicuramente più professionale è corretto del mio...
Però c'è da dire che purtroppo "come indicavi anche tu" non tutti i browser si sono aggiornati alle nuove regole, es: "internet explorer"...
Il mio test invece sembra essere compatibile anche con quest'ultimi; cmq io l'ho provato con:"explorer, opera e mozilla firefox", e sembra che sia funzionale con tutti e tre i browser...può essere anche che non sia corretto! quindi consideratelo solo come un test!

Il mio scopo è creare una tabella in css, come valida alternativa alla classica tabella in html, che sia compoatibile e quindi accessibile dalla maggior parte dei browser più usati attualmente...quindi una tabella di transizione tra le tabelle di vecchio stampo e quella indicata dal celeberrimo thomas_anderson.

Grazie a tutti per l'interessamento

[pierofix]

Originariamente inviato da albertozzo
Il mio scopo è creare una tabella in css, come valida alternativa alla classica tabella in html, che sia compoatibile e quindi accessibile dalla maggior parte dei browser più usati attualmente...quindi una tabella di transizione tra le tabelle di vecchio stampo e quella indicata dal celeberrimo thomas_anderson.

Ehm, mi sa che si sta facendo un po' di confusione.

Le tabelle, in XHTML, sono uno strumento molto potente e molto articolato. Sto ovviamente parlando di markup, di struttura logica, non di rappresentazione delle informazioni.

Se parliamo quindi di 'tabelle accessibili', prima di pensare ai fogli di stile occorre concentrarsi sulla struttura a marcatura; questa guida (soprattutto la seconda parte) affronta in maniera approfondita l'argomento:

- www.webaim.org/techniques/tables/

Insomma, dopo essere state per tantissimo tempo usate in maniera impropria, le tabelle meritano di essere prese veramente in considerazione per quello che sono. Occorre ciò imparare quali tag e quali attributi mettono a disposizione.

Sostituire le tabelle con i div, nel caso di strutture che realmente necessitano di una organizzazione riga-colonna è un errore della stessa natura di usare le tabelle per l'impaginazione.

E' tutta una questione di significato.

[albertozzo]

Ciao

Se parliamo quindi di 'tabelle accessibili', prima di pensare ai fogli di stile occorre concentrarsi sulla struttura a marcatura; questa guida (soprattutto la seconda parte) affronta in maniera approfondita l'argomento:

Cmq in generale si sta cercando di sostituire una tabella di vecchio stampo con una strutturata interamente con i css, la chiara dimostrazione è che sono state create nuove regole css che permettono di fare proprio questo.

Insomma, dopo essere state per tantissimo tempo usate in maniera impropria, le tabelle meritano di essere prese veramente in considerazione per quello che sono. Occorre ciò imparare quali tag e quali attributi mettono a disposizione.

Secondo te perchè per tanto tempo sono state utilizzate le tabelle per impaginare una pagina?

Secondo il mio punto di vista, perchè tanto tempo fa non esistevano i css e quindi impaginare una pagina con particolari elementi risultava molto difficile, quindi si iniziarono a creare delle strutture tabellari per creare delle impaginazione secondo le proprie esigenze...adesso che ci sono i css si cerca di sfruttarli al massimo per strutturare una pagina.

Sostituire le tabelle con i div, nel caso di strutture che realmente necessitano di una organizzazione riga-colonna è un errore della stessa natura di usare le tabelle per l'impaginazione.
Sostituire le tabelle con i div, nel caso di strutture che realmente necessitano di una organizzazione riga-colonna è un errore della stessa natura di usare le tabelle per l'impaginazione.

Io non dico che sia corretto utilizzare il coltello al posto del cacciavite per svitare una vite, bensì ho cercato "a livello sperimentale" una soluzione che potesse costituire un aiuto per "i consevartori dei css" nel periodo di transizione dell'innovazione dei e quindi aggiornamento dei browser alle nuove e apposite regole css per creare tabelle interamente ed esclusivamente con l'utilizzo di esse.

Molti potrebbero domandarsi:"ma non e mejo continuare ad utilizzare le tabelle di vecchio stampo fino a quando non vengono aggiornate da tutti i browser le nuove regole css?"

Se volete essere corretti allora utilizzate le tabelle di vecchi stampo fino a quando...

Se invece "come nel mio caso" avete strutturato un sito interamente con i css con l'apporto minimo di tag html e quindi volete una tabella "mejo chimarla struttura similiare ad una tabella" più leggera fatta esclusivamente con i css con una compatibilità medio/alto da parte dei browser attuali, vi metto a disposizione il mio test-esperimento.

Il mio test potrebbè essere anche la caxxata più grande del nuovo millennio, e poichè sappiamo che non tutti i test fruttano qualcosa di utile e funzionale, consideratelo "solo" come un esperimento in corso di valutazione.

Grazie mille

[pierofix]

Ho capito il tuo discorso.

Quello che sto cercando di dirti io è che le tabelle si creano con le tabelle. Stiamo parlando di markup, no?

Cmq in generale si sta cercando di sostituire una tabella di vecchio stampo con una strutturata interamente con i css, la chiara dimostrazione è che sono state create nuove regole css che permettono di fare proprio questo.

Cosa intendi per 'tabella vecchio stampo'?

[salasir]

Originariamente inviato da albertozzo
Ciao
..

Io non dico che sia corretto utilizzare il coltello al posto del cacciavite per svitare una vite, bensì ho cercato "a livello sperimentale" una soluzione che potesse costituire un aiuto per "i consevartori dei css" nel periodo di transizione dell'innovazione dei e quindi aggiornamento dei browser alle nuove e apposite regole css per creare tabelle interamente ed esclusivamente con l'utilizzo di esse.

...

Se invece "come nel mio caso" avete strutturato un sito interamente con i css con l'apporto minimo di tag html e quindi volete una tabella "mejo chimarla struttura similiare ad una tabella" più leggera fatta esclusivamente con i css con una compatibilità medio/alto da parte dei browser attuali, vi metto a disposizione il mio test-esperimento.

:master: :master: :master:

Secondo il mio modesto parere, il tuo esperimento può essere interessante per sostituire layout tabellari, o particolari situazioni in cui un layout assomigli ad una tabella.

Non capisco invece la tua dichiarazione sulla transizione verso i nuovi css e la ipotetica messa al bando delle tabelle.

Le tabelle ci sono e DEVONO essere usate quando il contenuto lo richiede. Sarebbe come dire che fin'ora abbiamo usato le liste, ma dal CSS4 ci saranno degli attributi che le simulano e quindi dovremo buttarle nel cestino. VVoVe:

In molti interventi, Piero insiste sul fatto di utilizzare correttamente i tag per quello che devono descrivere e un insieme di dati con una correlazione riga/colonna è di fatto una tabella.