Archivio tag: tabelle

Come realizzate il layout dei vostri form?

lunedì 2 novembre 2009 - 10:35

di Cesare Lamanna

Questo breve tutorial mi serve solo come spunto. Spiega come creare il layout di un form facendo a meno delle tabelle. La tecnica adottata è quella già  nota basata sull’adozione di elementi li per contenere gli input e le label.

Voi quale tecnica adottate e/o preferite per impostare il layout dei moduli? Avete buttato a mare le tabelle pure per questi scopi?…

Continua a leggere Come realizzate il layout dei vostri form?

Tags:, ,

Categoria: tabelle | Permalink | Commenta

Progettare e realizzare tabelle efficaci

giovedì 1 ottobre 2009 - 8:19

di Cesare Lamanna

A prescindere da una buona strutturazione a livello di markup, la realizzazione di tabelle efficaci sul web è questione di buone pratiche in termini di usabilità  e architettura dell’informazione, specie quando i dati da presentare sono tanti e complessi.

A quali siano queste buone pratiche e ad un’analisi dettagliata dei vari tipi di tabelle è dedicato l’articolo Designing Tables 101 uscito su UXMatters. Davvero molto illuminante pur essendo, a partire dal titolo, una sorta di introduzione generale e di base all’argomento.

Passando al lato pratico, quello degli esempi di formattazione di tabelle via CSS, segnalo a quanti non la …

Continua a leggere Progettare e realizzare tabelle efficaci

Tags:, ,

Categoria: tabelle | Permalink | Commenta

Usare inline-block

lunedì 23 febbraio 2009 - 8:18

di Cesare Lamanna

Nell’articolo di cui si parlava l’altro giorno, quello in cui Douglas Bowman spiegava il processo di creazione dei bottoni adottati nell’interfaccia di GMail e GReader, il designer di Google attribuiva gran parte del merito per la riuscita implementazione alla dichiarazione CSS display:inline-block:

The magical inline-block solved everything, except in IE. That’s where the genius of Google engineers came in. They knew how to get tricks working in all browsers, and this technique interested a couple of them enough that they dedicated the time to make it work.

Di cosa si tratta?…

Continua a leggere Usare inline-block

Tags:, ,

Categoria: tabelle | Permalink | Commenta

Toh, ancora tabelle vs. div…

mercoledì 4 febbraio 2009 - 8:59

di Cesare Lamanna

Chi l’avrebbe detto… All’alba dell’anno di grazia 2009, su uno dei siti più frequentati da sviluppatori web di ogni dove, si accatastano centinaia di commenti in calce ad un thread intitolato I CSS non dovrebbero essere usati per i layout (il link punta a questo articolo).

Non vi basta? Ancora decine di commenti ad un thread, sempre su Reddit, che prende spunto da un altro intervento sul tema.

L’origine di tutto? Un lungo post tutto dedicato ai troll dei CSS pronti a spararti addosso appena tiri in ballo idee come quella che le tabelle per i layout …

Continua a leggere Toh, ancora tabelle vs. div…

Tags:, ,

Categoria: tabelle | Permalink | Commenta

TableSorter.js: tabelle ordinabili in versione “standalone”

venerdì 7 novembre 2008 - 8:19

di Riccardo Degni

TableSorter.js è un plug-in Javascript dal peso irrisorio (solo 1.7kb circa), realizzato da Michael Leigeber, che permette di trasformare le tabelle in una sorta di “griglie ordinabili”. L’ordinamento è effettuabile con numeri e stringhe (mail, indirizzi di posta elettronica,…).

TableSorter.js (libero dalla presenza di qualsiasi framework) è standalone ed è compatibile con i seguenti browser: Firefox 2/3, IE 6/7/8, Opera, Safari e Google Chrome.

Ecco la demo che mostra come è possibile interagire con una corposa tabella tramite l’ordinamento delle righe delle stessa.…

Continua a leggere TableSorter.js: tabelle ordinabili in versione “standalone”

Tags:,

Categoria: tabelle | Permalink | Commenta

Layout con le tabelle CSS

venerdì 10 ottobre 2008 - 9:27

di Cesare Lamanna

Qualcuno tra i lettori più affezionati ricorderà  un vecchio post con cui segnalavamo questo esperimento consistente nel realizzare un layout basato sui CSS senza però float o posizionamenti, ma attraverso l’uso delle proprietà  associate alle tabelle e a certi valori speciali di display come display: table. In sintesi, un elemento a cui venga associata qualcuna di queste definizioni di stile si comporta in fase di resa come una tabella o uno dei suoi elementi costitutivi (celle, colonne, righe, etc). Una specie di uovo di Colombo con cui si ripristina tramite i CSS cià che prima si faceva con HTML.…

Continua a leggere Layout con le tabelle CSS

Tags:, ,

Categoria: tabelle | Permalink | Commenta

Code-It: tabelle Excel con Ext JS

mercoledì 16 luglio 2008 - 12:32

di Cesare Lamanna

Secondo appuntamento con Code-It. Il video di questa settimana mostra come inserire in pochi minuti una tabella simile a quelle di Excel nelle nostre pagine web usando Ext JS, tabella che sarà  poi possibile ordinare, ridimensionare e modificare grazie alle potenti funzionalità  di questo framework.

Continua a leggere Code-It: tabelle Excel con Ext JS

Tags:,

Categoria: tabelle | Permalink | Commenta

Dragtable

martedì 1 luglio 2008 - 8:41

di Riccardo Degni

Quella delle tabelle ordinabili è un’applicazione parecchio diffusa e desiderata.
Dragtable è uno script creato da Dan Vanderkam che permette appunto di rendere trascinabili e quindi ordinabili le colonne delle nostre tabelle.

Nell’articolo viene spiegato molto bene come utilizzare Dragtable. In breve, dopo avere inserito lo script dragtable.js, basta semplicemente aggiungere “draggable” come valore dell’attributo class della tabella che vogliamo rendere ordinabile.

Ecco infine i link alla demo ed allo spazio del progetto ospitato da Google Code.…

Continua a leggere Dragtable

Tags:,

Categoria: tabelle | Permalink | Commenta

Table & Form CSS gallery

giovedì 20 marzo 2008 - 8:18

di Gianluca Brindisi

L’evoluzione delle fonti di ispirazione (al secolo showcase, o gallery css, etc) passa finalmente dalla specializzazzione dei contenuti!

Ne sono una dimostrazione questa utilissima CSS Table Gallery, showcase davvero ricca di contenuti che raccoglie i design CSS delle classiche tabelle per i dati, e CSS Form Garden, una showcase di form design di tutto rispetto.

Adesso ne aspetto in gloria una per i menu di paginazione e un altra per gli header grafici e sono a posto! O forse esistono gia ma io non le conosco? E voi non ne conoscete qualcuna?…

Continua a leggere Table & Form CSS gallery

Tags:, ,

Categoria: tabelle | Permalink | Commenta

Toh, di nuovo layout con le tabelle…

venerdì 29 febbraio 2008 - 7:47

di Cesare Lamanna

Non proprio nel senso classico, non con codice HTML infarcito di <tr> e <td> annidati, ma secondo Kevin Yank, che ci fa un post sul blog di SitePoint, il binomio layout/tabelle potrebbe avere una seconda vita grazie ai CSS.

Come sapete, la specifica prevede una serie di proprietà  per la gestione delle tabelle e altri valori legati alla tabelle per la proprietà  display. Proprio usando una combinazione di queste proprietà  Yank ha realizzato un layout a tre colonne a suo dire robusto, che non necessita di hack, che non usa float e posizionamenti, che non ha il problema dell’altezza …

Continua a leggere Toh, di nuovo layout con le tabelle…

Tags:,

Categoria: tabelle | Permalink | Commenta