Calendario senza tabella? Da oggi è possibile!

Assembliamo le conoscenze

A questo punto del nostro cammino, abbiamo quasi tutte le informazioni per poter costruire il nostro calendario. Se lo facessimo ci renderemo conto di avere un elenco puntato di giorni per ciascuna settimana, riportante solo il numero del giorno, talvolta come testo talvolta come collegamento ipertestuale. Facciamo un esperimento, proviamo a disabilitare il foglio di stile (possibile grazie alla developer toolbar disponibile sia per Firefox che per Internet Explorer), attualmente costituito dalla sola classe �hidden�, ci renderemo conto che i giorni del mese sono organizzati in un modo particolarmente semplice da interpretare (utenti disabili o meno).

Elaboriamo lo stile del calendario

Siamo pronti quindi a costruire le regole di stile al quale il nostro elenco puntato sarà vincolato.

Prima regola. Il calendario avrà una dimensione prestabilita (elaborata in EM) e non avrà i pallini che identificano l’elenco puntato:

#box-calendario{

                background-color: #fffff0;

                border: 0px solid #404040;

                width: 16em;

                height: 11.95em;

                margin-left: 0px;

                margin-top: 0px;

                padding-left: 0px;

                list-style: none;

        }

Seconda regola. Tutti i giorni della settimana elencati avranno un altezza prestabilita, ed essendo un elenco puntato a loro volta, non avranno il pallino che solitamente lo identifica:

        #box-calendario li ul{

                margin-left: 0px;
                padding-left: 0px;
                padding-top: 0px;
                list-style: none;
                height: 2em;
        }

Terza regola. Tutti i margini devono essere a zero:

 
        #box-calendario li{
                margin-top: 0px;
                padding-top: 0px;
        }

        #box-calendario li ul{
                margin-left: 0px;
                margin-top: 0px;
        }

        #box-calendario .settimana li{
                margin-left: 0px;
        }

Quarta regola. Giorni e settimane saranno elementi fluttuanti:

 
        #box-calendario .settimana{
                float: left;
        }

        #box-calendario .giorno{
                width: 1.90em;
                height: 1.90em;
                text-align: center;
                display: block;
                float: left;
                border : 1px solid #808080;
                background-color:#ffffff;
                color: #800000;
        }

Pubblicato

in

, ,

da

Tag:

Commenti

6 risposte a “Calendario senza tabella? Da oggi è possibile!”

  1. Avatar Hydra
    Hydra

    A quanto pare, prescindendo dal fatto che un calendario di per sè non è accessibile, un calendario senza tabelle è semanticamente scorretto: http://dougal.gunters.org/blog/2003/02/21/tables-vs-css

    1. Avatar Diego La Monica
      Diego La Monica

      Sicuramente quello che dichiara Dougal non è affatto sbagliato, però quello che ho voluto indicare con questo articolo è che se una qualsiasi persona volesse proporre un calendario che semanticamente resta valido (come lo è la struttura di una tabella) può implementare degli elenchi puntati nidificati.
      Fornire tutte le informazioni presentate nell’esempio con solo una tabella avrebbe comportato una deformazione dei contenuti così da renderla illeggibile senza CSS.
      Ti propongo di fare una prova e riportare esattamente quello che ho fatto in tabella: con un CSS sicuramente resterà gradevole a leggersi, credo lo sia molto meno senza. :)

    2. Avatar Carlo Filippo Follis

      Perché semanticamente scorretto?
      Visivamente non cambia nulla, per di più è Usabile da parte di tutti …

  2. Avatar Mavimo

    Un layout table-less non vuol dire che non si possano usare tabelle (dove ha un senso) ma semplicemente che non sono state usate le tabelle per realizzare il layout. IMHO per un calendario è un controsenso, se non che si più modificare il modo di visualizzarlo ricorrendo ad interpretazione diversa del CSS per i diversi dispositivi (per esempio per i palmari/smartphone), ma se si vuole visualizzare come tabella è un uso sbagliato (nonche ci si complica la vita :P )
    Altra cosina da aggiungere, manca il mese, e il modo di cambiare mese, ma non dovrebbe essere un problema aggiungere quelle 5 righe di codice :P
    ciao
    PS: buona pasqua

    1. Avatar Diego La Monica
      Diego La Monica

      Questo tutorial è stato pensato per mostrare che con i CSS è possibile ottenere risultati realmente soddisfacenti: riuscendo ad elaborare un calendario altamente accessibile e gradevole d’aspetto. Disattivando i CSS il risultato non è dei peggiori. Anzi paragonato al possibile risultato ottenuto con una tabella che vuole mostrare le stesse informazioni, io credo che forse quanto ottenuto è anche superiore.
      Tableless vuol dire layout senza tabelle, ma se volessimo diventare così pignoli da richiedere un sito tableless nel senso stretto della parola?
      Credo di aver dato la soluzione per uno degli elementi che di fatto sono più adatti ad essere presentati con una tabella.

      1. Avatar Mavimo

        IMHO richiedere un layout tableless nel senso stretto della parola non ha senso, il tag <table> esiste nella definizione dello standard XHTML1.1 e anche nella bozza del 2.0 semplicemente perchè ha un senso se usato con coscienza, non vedo perche lo si voglia evitare (quando è utile e gusto usarlo).
        E’ come volere un sito con le immagini fatte di <div> di vari colori da un pixel posizionati con l’absolute perchè il sito non deve assolutamente avere immagini, si può fare, ma ha un senso?
        Ciao
        PS: non voglio sicuramente sminuire il tuo lavoro, ma ritengo che non sia giusto creare calendari senza tabelle, per lo meno se li si vuole visionare in quel modo…

%d blogger hanno fatto clic su Mi Piace per questo: