jQuery Mobile: table

La seconda novità arrivata con la versione 1.3 di jQuery Mobile sono le tabelle!

In realtà in una versione adatta al mobile, ovvero dove l’intestazione della mia tabella, che normalmente è un intestazione di colonna di venta intestazione di riga per ciascuna delle righe della tabella.

Il codice è abbastanza famigliare a chi mastica html:

<table data-role="table" id="movie-table" data-mode="reflow">

Attenziona ovviamente al solito data-role, tabel, e al data-mode: reflow

La parte successiva riguarda l’intestazione della tabella,: ovviamente fatta a modo:

<tr>
<th data-priority="1">Ordine</th>
<th data-priority="persist">Titolo</th>
<th data-priority="2">Anno</th>
<th data-priority="3">Rating</th>
<th data-priority="4">Visite</th>
</tr>
</thead>

Per quanto riguarda invece il corpo della tabella riporteremo solo la prima riga di dati:

<tbody>
<tr>
<th>1</th>
<td>Citizen Kane</td>
<td>1941</td>
<td>100%</td>
<td>74</td>
</tr>

Di fronte  a questo codice per lo più noto, sara interessante vedere come viene renderizzata dai browser desktop e mobile una pagina vera:

esempio