Con jQuery possiamo trasformare una lista in una tabella con relativa semplicità. A volte infatti le tabelle sono più pratiche da usare delle liste, soprattutto quando dobbiamo gestire elementi a dimensione variabile (come le immagini). Tuttavia le liste sono senz'altro più indicate per quello che riguarda l'indicizzazione e l'accessibilità di una pagina. Per questo motivo possiamo usare una lista nella marcatura ma visualizzarla come una tabella tramite jQuery e il DOM. Vediamo come.
Abbiamo la seguente marcatura:
<ul id="gallery">
<li><img src="img/1.jpg" alt="Immagine" />
<p>Didascalia</p></li>
<li><img src="img/2.png" alt="Immagine" />
<p>Didascalia</p></li>
<li><img src="img/3.jpg" alt="Immagine" />
<p>Didascalia</p></li>
</ul>
La lista diverrà un elemento table, le voci di lista verranno trasformate in elementi tr e il contenuto di ciascuna voce verrà inserito in elementi td. Per questo motivo il nostro CSS dovrà dare degli stili come se l'elemento fosse già una tabella:
body {
margin: 0 auto;
width: 620px;
padding: 2em 0;
font: small Arial, sans-serif;
background: #fff;
color: #555;
}
#gallery {
width: 456px;
margin: 0 auto;
border-collapse: collapse;
table-layout: fixed;
}
#gallery td {
width: 147px;
padding-right: 5px;
}
#gallery td img {
display: block;
width: 100%;
}
#gallery td p {
margin: 0;
padding: 0.3em 0;
text-align: center;
text-transform: uppercase;
}
Con jQuery non dobbiamo far altro che assemblare il nostro nuovo contenuto sotto forma di una stringa HTML che poi andremo a sostituire al contenuto della nostra lista tramite il metodo replaceWith():
$(function(){
var html = '';
html += '<table id="gallery">';
html += '<tr>';
$('li', '#gallery').each(function() {
var $li = $(this);
var imgSrc = $li.find('img').attr('src');
var imgAlt = $li.find('img').attr('alt');
var caption = $li.find('p').text();
html += '<td><img src="'+imgSrc+ '" alt="'+imgAlt+ '"/>'+'<p>'+caption+'</p></td>';
});
html += '</tr>';
html += '</table>';
$('#gallery').replaceWith(html);
});
In pratica non abbiamo fatto altro che ricreare il nuovo contenuto costruendo la nostra tabella un componente alla volta.
Potete visionare l'esempio finale in questa pagina.