Cell. +39 3479684755
Il Blog di Instant Websites
TABELLE, BORDI E INTERNET EXPLORER
La parola “tabelle” tende a generare un sentimento di ripulsa tra molti sviluppatori web, anche al di là del ragionevole a parere di chi scrive.
Naturalmente, non si sta parlando dell’uso delle tabelle per realizzare un layout di pagina. Si tratta di una prassi oggettivamente superata, sia per la sovrabbondanza di codice generato, sia per la mancata corrispondenza semantica tra i tag usati e risultato ottenuto.
L’uso del tag table e dei tag relativi è invece da considerarsi semanticamente corretto quando occorre rappresentare dei dati appunto in forma tabellare, con righe e colonne.
Ipotizziamo dunque una semplicissima tabella a cui viene assegnata una classe:
<table class=”datiVendita”>
…
</table>
Tramite la classe .datiVendita formatteremo graficamente la nostra tabella, usando le proprietà border, padding e width invece dei corrispondenti attributi precedentemente usati nell’HTML di pagina (border, cellpadding e width).
Supponendo di volere assegnare dei bordi solo alle righe e non alle colonne, la corrispondente regola dovrebbe essere:
.datiVendita tr {
border-bottom: 1px solid #333333;
}
Ma ecco la sorpresa: mentre Firefox, Safari, Google Chrome, Opera raffigurano correttamente il bordo inferiore della riga, Internet Explorer 7 e precedenti non lo visualizzano.
Ho googlato per trovare soluzioni a questo baco e ne ho trovate alcune abbastanza demenziali, ma in realtà il tutto si risolve molto semplicemente riscrivendo la regola come segue:
.datiVendita tr td {
border-bottom: 1px solid #333333;
}
Quanto sopra offre lo spunto per discutere se e quanto sia ragionevole continuare ad offrire piena compatibilità con le versioni precedenti di IE.
Quest’ultimo è ancora di gran lunga il browser più usato, a dispetto dalle statistiche troppo ottimistiche sulla diffusione di Firefox.
Personalmente, nello sviluppo dei siti ai quali lavoro garantisco retrocompatibilità con IE6 e versioni successive, anche perché spesso tale risultato è ottenuto con relativamente poca fatica (come nell’esempio riportato in questo articolo).
IE può non piacere – e di certo non piacciono le versioni zeppe di bachi e di interpretazioni errate quali appunto IE6 e soprattutto IE 5.5 – ma finché non sarà stato soppiantato del tutto, è a mio avviso necessario considerarlo.
Frames addio e tabelle … demoni da scacciare?
E’ notizia di questi giorni: HTML 5 non includerà più i tag relativi ai frames. Certo, gli sviluppatori già evitavano l’uso dei frames come la peste da tempo e quindi si tratterà semplicemente di una presa d’atto della obsolescenza di un dispositivo deprecabile per una serie di motivi molto concreti. Discorso chiuso. Non ci mancheranno.
Più complesso, invece, il discorso riguardante le tabelle. I puristi dei CSS hanno smesso di impiegarle per la realizzazione dei layout a favore dei più flessibili e precisi tag div ed anche l’impiego per il semplice inquadramento dei contenuti di pagina è considerato da taluni in maniera negativa.
Personalmente, credo che in questo – così come su quasi tutto … – sia preferibile trovare una posizione intermedia che tenga da un lato conto dello sviluppo tecnologico e della necessità di evitare le “zuppe di codice” e, dall’altro, permetta di adottare senza preclusioni di tipo quasi ideologico soluzioni tecniche semplici ed efficaci.
Io non uso più da tempo il tag table per realizzare dei layout. Da quando ho acquisito una buona pratica dei CSS-P, semplicemente non ne sento più il bisogno e oltretutto è chiaro che i fogli di stile consentono un controllo molto superiore dei layout complessi.
Quando però mi trovo a dovere inquadrare dei contenuti all’interno di un div definito tramite CSS, non disdegno l’uso delle tabelle se questa soluzione si prospetta come più semplice ed immediata.
A titolo di esempio, prendiamo una pagina con molte miniature fotografiche cliccando le quali si aprono delle altre pagine del sito. Se le foto sono soggette a frequente aggiornamento è preferibile usare una lista non ordinata debitamente formattata tramite CSS, come ho fatto in questa pagina: http://www.lebarbiedifulvia.it/html/barbies/fantasy.html (fra le molte per le quali ho usato questa soluzione). In tale modo è infatti possibile aggiungere immagini in qualsiasi punto della lista senza dovere spostare le altre, inoltre se la pagina ha dimensione elastica le miniature si riallineano in automatico (a ciascuna voce li dell’elenco si assegna un float: left; mentre a ciascuna immagine si applica la regola: display: block; per affiancarle). Se però non si prevedono aggiornamenti e soprattutto il tempo disponibile per sviluppare il codice è molto ristretto, è molto più facile usare una tabella ed inserire le miniature nelle singole celle: è forse una strada tecnicamente errata? Assolutamente no…
HTML 5 manterrà l’uso delle tabelle e questo può fare comodo. Quindi, se non ci sono controindicazioni e nemmeno limitazioni, usiamole senza paura dei … demoni.