27. Le tabelle di esempio

Il documento presenta due tipi di tabelle di esempio: un tipo puramente presentazionale, senza dati di effettiva rilevanza ed un tipo strutturale con dati effettivi. La formattazione richiede quindi degli stili completamente diversi. È importante notare a questo punto che le tabelle del primo tipo non sono di fatto necessarie alla comprensione del testo, e quindi potrebbero essere sostituite da immagini con opportuna descrizione. Decidiamo di inserirle come marcatura a scopo puramente dimostrativo. Nel documento originale tali tabelle si presentano come segue.

Una tabella di esempio Figura 16: Una tabella di esempio [D]

La marcatura utilizzata per rendere questo tipo di tabella è la seguente:

  1. <table summary="Example table" class="example-table">
  2. <tr>
  3. <td class="a1">A1</td>
  4. <td class="b1">B1</td>
  5. <td class="c1">C1</td>
  6. </tr>
  7. <tr>
  8. <td class="a2">A2</td>
  9. <td class="table" colspan="2">
  10. <table summary="Nested table">
  11. <tr>
  12. <td class="b2a1">.B2.A1</td>
  13. <td class="b2b1">.B2.B1</td>
  14. </tr>
  15. <tr>
  16. <td class="b2a2" colspan="2">.B2.A2</td>
  17. </tr>
  18. </table>
  19. </td>
  20. </tr>
  21. </table>
  22. <p class="caption">Sample 1</p>

Abbiamo usato l'attributo summary per dare informazioni aggiuntive sulle tabelle presentate. In questo caso avremmo potuto anche aggiungere una breve nota sul fatto che le tabelle sono puramente dimostrative e non presentano dati essenziali.

La didascalia in fondo alla tabella non è stata marcata con l'elemento caption, come ci si attenderebbe, per un motivo molto semplice: attualmente per ottenere l'effetto della didascalia in fondo alla tabella si sarebbe dovuto ricorrere alla dichiarazione caption-side: bottom, che non è ampiamente supportata dai browser. Questo è un altro motivo per cui tabelle dimostrative come questa andrebbero evitate ove possibile.

A questo punto passiamo all'applicazione degli stili:

  1. table.example-table {
  2. width: 450px;
  3. border-collapse: collapse;
  4. border: 1px solid #000;
  5. table-layout: fixed;
  6. background: #ccc;
  7. color: #000;
  8. }
  9. table.example-table td {
  10. border: 1px solid;
  11. vertical-align: middle;
  12. text-align: center;
  13. padding: 0;
  14. }
  15. table.example-table .a1, table.example-table .a2 {
  16. width: 90px;
  17. font-weight: bold;
  18. }
  19. table.example-table .b1 {
  20. width: 110px;
  21. font-weight: bold;
  22. }
  23. table.example-table .c1 {
  24. width: 250px;
  25. font-weight: bold;
  26. }
  27. table.example-table .table {
  28. width: 360px;
  29. }
  30. table.example-table table {
  31. background: #eee;
  32. border-collapse: collapse;
  33. width: 360px;
  34. table-layout: fixed;
  35. }
  36. table.example-table table .b2a1 {
  37. border-width: 0 1px 0 0;
  38. width: 110px;
  39. }
  40. table.example-table table .b2b1 {
  41. border-width: 0 0 1px 0;
  42. width: 250px;
  43. }
  44. table.example-table table .b2a2 {
  45. width: 360px;
  46. border-width: 1px 0 0 0;
  47. }
  48. .caption {
  49. font-size: 0.85em;
  50. font-style: italic;
  51. margin: 0;
  52. padding-top: 2px;
  53. }

Le 53 righe di codice necessario alla formattazione di questo tipo di tabelle ci convincono del fatto che un approccio del genere è controproduttivo. Tuttavia, il codice usato presenta alcune caratteristiche interessanti nella formattazione delle tabelle.

  1. L'algoritmo del layout delle due tabelle è impostato su fixed. Questo significa che la somma complessiva della larghezza delle singole celle (compresi i bordi), dovrà essere uguale alla larghezza generale impostata sulla prima tabella (450 pixel). Si noti comunque che anche se si supera tale larghezza, i browser si limiteranno semplicemente ad allargare la tabella principale, senza nascondere il contenuto.
  2. Le tabelle presentano un modello di bordi collassato (border-collapse: collapse), che fa in modo che i bordi delle singole celle si fondano insieme per formare un unico bordo.

Tuttavia, Internet Explorer 7 (ed inferiori), presenta un problema nel collassamento dei bordi, per cui si rende necessario aggiungere un commento condizionale con il seguente codice:

  1. <--[if lt IE 8]>
  2. <style type="text/css" media="screen">
  3. table.example-table table .b2a1 {
  4. border-bottom: 1px solid;
  5. }
  6. </style>
  7. <![endif]-->

Il commento condizionale viene indirizzato alle versioni di Internet Explorer inferiori alla 8 (riga 1). Il risultato si può osservare nell'immagine che segue.

La tabella di esempio realizzata con i fogli di stile Figura 17: La tabella di esempio realizzata con i fogli di stile [D]

Passiamo alle tabelle di dati effettivi. Nel documento originale, esse hanno il seguente layout:

La tabella di dati effettivi Figura 18: La tabella di dati effettivi [D]

La marcatura necessaria è la seguente:

  1. <table summary="svg:title" class="code-example">
  2. <tr>
  3. <th scope="col">ODF 1.1 Element</th>
  4. <th scope="col">HTML element using alt=</th>
  5. <th scope="col">HTML element using title=</th>
  6. </tr>
  7. <tr>
  8. <td><draw:rect><br />
  9. <draw:line><br />
  10. <draw:polyline><br />
  11. <draw:polygon><br />
  12. <draw:regular-polygon></td>
  13. <td><code><IMG alt=></code></td>
  14. <td></td>
  15. </tr>
  16. ...omissis...
  17. </table>

In questa tabella abbiamo usato l'attributo scope sulle intestazioni di tabella in modo da associare ciascuna colonna ad un'intestazione. Abbiamo usato un elemento presentazionale (br) per mandare a capo il testo. Volendo si sarebbe potuta inserire ogni riga di testo in un elemento span e poi trasformarlo in blocco. Gli stili, meno ridondanti di quelli della precedente tabella, sono:

  1. table.code-example {
  2. border: 1px solid #000;
  3. border-collapse: collapse;
  4. }
  5. table.code-example td,
  6. table.code-example th {
  7. width: 30%;
  8. border: 1px solid #000;
  9. padding: 0.2em;
  10. vertical-align: middle;
  11. }

In questo caso viene usato il layout automatico di tabella, e il risultato è quello di una tabella fluida. Possiamo osservarlo nell'immagine che segue.

La tabella di dati effettivi realizzata con i fogli di stile Figura 19: La tabella di dati effettivi realizzata con i fogli di stile [D]