Appunti sulla realizzazione di questo sito web

Tabelle

Alcuni consigli sulle tabelle.

Lo stile delle tabelle di questo sito

Lo stile delle tabelle di questo sito è piuttosto semplice ma secondo me accattivante e funzionale. Questo è il codice usato nel mio css per definire la classe tablestyle1. I colori sono facilmente modificabili. Per quanto riguarda il font, per ora ho scelto di lasciare quello usato nel resto della pagina (ho commentato la riga per cambiarlo).

.table1
{
	/*font-family: "Lucida Sans Unicode", Sans-Serif;*/
	background: #EEF;
	margin: 2em 0em 2em 0em;
	border-collapse: collapse;
	text-align: left;
  border-bottom: 0.15em solid #000;
  border-top: 0.15em solid #000;
}

.table1 caption{margin: 0.3em 0em 0.3em 0em; font-size: 0.85em;}

.table1 th
{
	font-weight: bold;
	padding: 0.6em 1em 0.6em 0.5em;
	border-bottom: 0.1em solid #000;
  background: #CCF;
}

.table1 td{padding: 0.4em 1em 0.4em 0.5em; font-size: 0.85em;}

.table1 tbody tr:hover td{background: #DDD;}

Ecco il codice di una tabella (vedi in fondo alla pagina) di questo sito: 

<table class="table1 leftthencenter">
  <caption><b>Tabella 1.</b> Comparazione visualizzatori pdf.</caption>
    
    <thead>
      <tr>
        <th>Caratteristica</th>
        <th>Foxit Reader</th>
        <th>PDF XChange</th>
        <th>SumatraPDF</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Qualità video</td>
        <td>buona</td>
        <td>scarsa</td>
        <td>scarsa</td>
      </tr>
      <tr>
        <td>Qualità stampa</td>
        <td>scarsa</td>
        <td>?</td>
        <td>buona</td>
      </tr>
      <tr>
        <td>Pop-up notes</td>
        <td>yes</td>
        <td>yes</td>
        <td>no</td>
      </tr>
      <tr><td>Highlight Text</td><td>yes</td><td>yes</td><td>no</td></tr>
      <tr><td>Underline Text</td><td>yes</td><td>yes</td><td>no</td></tr>
      <tr><td>Strikeout Text</td><td>yes</td><td>yes</td><td>no</td></tr>
      <tr><td>Squiggly Text</td><td>yes</td><td>yes</td><td>no</td></tr>
      <tr><td>Replace Text</td><td>yes</td><td>yes</td><td>no</td></tr>
      <tr><td>Insert Text</td><td>yes</td><td>yes</td><td>no</td></tr>
      <tr><td>Drawing Markup Tools</td><td>no</td><td>yes</td><td>no</td></tr>
      <tr><td>Measure Tools</td><td>no</td><td>yes</td><td>no</td></tr>
      <tr><td>Typewriter Tools</td><td>no</td><td>yes</td><td>no</td></tr>
      <tr><td>Attach file</td><td>no</td><td>yes</td><td>no</td></tr>
    </tbody>
</table>

Il problema della formattazione per colonne

Come sapete i tag colgroup e col servono per formattare le colonne di una tabella. Purtroppo però non accettano molti attributi utili, per esempio tutte le proprietà relative al testo. Pertanto non potete specificare, come per esempio si fa in LaTeX, l'allineamento del testo per ogni colonna.

Per ovviare a questo inconveniente potete fare così: definite lo stile della vostra tabella come volete o non definitelo affatto. Io uso solitamente le classi. 

.table1
{
  ...
  text-align: left;
  ...
}

Create poi una classe vuota apposita per ogni allineamento. Per esempio fate una classe che allinei a sinistra il testo della prima colonna e centralmente nelle altre: 

.leftthencenter th+th{text-align:center;}
.leftthencenter td+td{text-align:center;}

Abbiamo sfruttato gli adjacent sibling selectors. Usando combinazione del tipo th+th+th e così via potete assegnare un allineamento a ciascuna colonna, fissata la classe. Potete giocare anche sui selettori figlio per alcune cose particolari.

Ora non vi resta che usare queste regole nel vostro file xhtml:

<table class="miaclasse leftthencenter">
...
</table>