Stili e tabelle

Applicare stili a tabelle HTML non è il lavoro più stimolante che esista, ma di tanto in tanto va fatto. Questo articolo vi guiderà nel compito di rendere gradevoli le tabelle HTML, usando gli attributi spiegati in articoli precedenti.

Prerequisiti: Basi HTML (vedi Introduction to HTML), tabelle HTML (vedi il modulo tabelle HTML (TBD)), e un'idea di come funzioni un CSS (studia Introduction to CSS.)
Obiettivo: Uso efficace degli stili su tabelle HTML.

Una tipica tabella HTML

Iniziamo a vedere una tipica tabella HTML. Beh, diciamo tipica — gli esempi di tabella contengono scarpe, meteo, dipendenti; rendiamo le cose più interessanti usando le più famose band punk del Regno Unito. Il codice quindi sarà questo:

<table>
  <caption>A summary of the UK's most famous punk bands</caption>
  <thead>
    <tr>
      <th scope="col">Band</th>
      <th scope="col">Year formed</th>
      <th scope="col">No. of Albums</th>
      <th scope="col">Most famous song</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Buzzcocks</th>
      <td>1976</td>
      <td>9</td>
      <td>Ever fallen in love (with someone you shouldn't've)</td>
    </tr>
    <tr>
      <th scope="row">The Clash</th>
      <td>1976</td>
      <td>6</td>
      <td>London Calling</td>
    </tr>
       
     ... alcune righe rimosse per concisione

    <tr>
      <th scope="row">The Stranglers</th>
      <td>1974</td>
      <td>17</td>
      <td>No More Heroes</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Total albums</th>
      <td colspan="2">77</td>
    </tr>
  </tfoot>
</table>

La tabella è ben formata, è facile applicarle stili, è accessibile, grazie all'uso di attributi come scope, <caption>, <thead>, <tbody>, ecc. Però non ha un bell'aspetto quando vista su schermo (vedila su punk-bands-unstyled.html):

Ha un aspetto rozzo, poco leggibile e noioso. Dobbiamo usare un po' di CSS per rimediare.

Apprendere attivamente: Diamo stile alla tabella

In questa sezione di apprendimento attivo daremo stile insieme alla nostra tabella.

  1. Per iniziare, fai una copia in locale del codice di esempio, scarica le immagini (noise e leopardskin), e e metti i tre files in una directory di lavoro sul tuo computer.
  2. Quindi, crea un nuovo file e salvalo col nome style.css nella stessa directory degli altri file.
  3. Collega il file CSS all'interno del codice HTML scrivendo questa riga di HTML all'interno della sezione <head>:
    <link href="style.css" rel="stylesheet" type="text/css">

Spaziatura e layout

La prima cosa da fare è mettere ordine nella spaziatura/layout, visto che lo stile predefinito è davvero rozzo! Per ottenere questo risultato, mettiamo queste definizioni CSS al file style.css:

/* spaziatura */

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th, td {
  padding: 20px;
}

Le definizioni più importanti da notare sono:

  • Impostare il valore di table-layout a fixed è una buona idea per le tabelle: ne renderà l'aspetto di default più prevedibile. Di norma, le colonne adattano la loro larghezza in base ai contenuti, il che può portare a strani risultati. Con table-layout: fixed, puoi dimensionare le colonne in base alla larghezza delle intestazioni, e far fluire i contenuti di conseguenza. Ecco perché selezionare le 4 intestazioni con thead th:nth-child(n) (:nth-child)  ("Seleziona il figlio nesimo in una sequenza di elementi <th>, dentro un elemento <thead>") e ne impostarne la larghezza in percentuale. L'intera colonna avrà la larghezza dell'intestazione; e le colonne sono a posto. Chris Coyier parla in dettaglio di questa tecnica in Fixed Table Layouts.

    A questo associamo un width al 100%, cioè la tabella riempie in larghezza il suo contenitore, in automatico (anche se ci vuole del lavoro per farcela stare su schermi molto stretti).
  • Impostare l'attributo border-collapse a collapse è ormai una buona pratica standard. Per default, se imposti i bordi alle caselle, avranno un spazio tra loro, come mostrato dall'immagine: Non è bellissimo da vedere (anche se magari è ciò che volevi). Con border-collapse: collapse; i bordi collassano diventando singoli, e l'aspetto migliora notevolmente:
  • Abbiamo messo un border intorno alla tabella: serve perché poi metteremo dei bordi attorno a intestazione e footer della tabella. L'aspetto sarebbe strano e sconnesso senza un bordo intorno alla tabella e avremmo anche spazi vuoti.
  • Impostiamo anche del padding nei <th> e nei <td> — questo darà un respiro maggiore ai dati rendendo la tabella più leggibile.

A uesto punto, la nostra tabella ha già un aspetto molto migliore:

Semplici concetti tipografici

Ora diamo una sistemata al contenuto.

Innanzi tutto, abbiamo trovato un font su Google Fonts intonato alle nostre band punk. Puoi andare a sceglierne uno diverso se vuoi; devi solo sostituire l'elemento <link> e la font-family con quelli che Google Fonts ti fornirà.

Prima, inserisci il seguente elemento <link> nella sezione head, prima dell'altro elemento <link>:

<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>

Ora aggiungi in testa al tuo file style.css i seguenti attributi CSS:

/* tipografia */

html {
  font-family: 'helvetica neue', helvetica, arial, sans-serif;
}

thead th, tfoot th {
  font-family: 'Rock Salt', cursive;
}

th {
  letter-spacing: 2px;
}

td {
  letter-spacing: 1px;
}

tbody td {
  text-align: center;
}

tfoot th {
  text-align: right;
}

Non c'è nulla di specifico per tabelle; in generale impostiamo lo stile dei caratteri per rendere tutto di più facile lettura:

  • We have set a global sans-serif font stack; this is purely a stylistic choice. We've also set our custom font on the headings inside the <thead> and <tfoot> elements, for a nice grungy, punky look.
  • We've set some letter-spacing on the headings and cells, as we feel it aids readability. Again, mostly a stylistic choice.
  • We've center-aligned the text in the table cells inside the <tbody> so that they line up with the headings. By default, cells are given a text-align value of left, and headings are given a value of center, but generally it looks better to have the alignments set the same for both. The default bold weight on the heading fonts is enough to differentiate their look.
  • We've right-aligned the heading inside the <tfoot> so that it is visually associated better with its data point.

The result looks a bit neater:

Grafica e colori

Now onto graphics and colors! Because the table is full of punk and attitude, we need to give it some bright imposing styling to suit. Don't worry, you don't have to make your tables this loud — you can opt for something more subtle and tasteful.

Start by adding the following CSS to your style.css file, again at the bottom:

thead, tfoot {
  background: url(leopardskin.jpg);
  color: white;
  text-shadow: 1px 1px 1px black;
}

thead th, tfoot th, tfoot td {
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
  border: 3px solid purple;
}

Again, there's nothing specific to tables here, but it is worthwhile to note a few things.

We've added a background-image to the <thead> and <tfoot>, and changed the color of all the text inside the header and footer to white (and given it a text-shadow) so it is readable. You should always make sure your text contrasts well with your background, so it is readable.

We've also added a linear gradient to the <th> and <td> elements inside the header and footer for a nice bit of texture, as well as giving those elements a bright purple border. It is useful to have multiple nested elements available so you can layer styles on top of one another. Yes, we could have put both the background image and the linear gradient on the <thead> and <tfoot> elements using multiple background images, but we decided to do it separately for the benefit of older browsers that don't support multiple background images or linear gradients.

Zebra striping

We wanted to dedicate a separate section to showing you how to implement zebra stripes — alternating rows of color that make the different data rows in your table easier to parse and read. Add the following CSS to the bottom of your style.css file:

tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

tbody tr:nth-child(even) {
  background-color: #e495e4;
}

tbody tr {
  background-image: url(noise.png);
}

table {
  background-color: #ff33cc;
}
  • Earlier on you saw the :nth-child selector being used to select specific child elements. It can also be given a formula as a parameter, so it will select a sequence of elements. The formula 2n-1 would select all the odd numbered children (1, 3, 5, etc.) and the formula 2n would select all the even numbered children (2, 4, 6, etc.) We've used the odd and even keywords in our code, which do exactly the same things as the aforementioned formulae. In this case we are giving the odd and even rows different (lurid) colors.
  • We've also added a repeating background tile to all the body rows, which is just a bit of noise (a semi-transparent .png with a bit of visual distortion on it) to provide some texture.
  • Lastly, we've given the entire table a solid background color so that browsers that don't support the :nth-child selector still have a background for their body rows.

This color explosion results in the following look:

Now, this may be a bit over the top and not to your taste, but the point we are trying to make here is that tables don't have to be boring and academic.

Stile del titolo

There is one last thing to do with our table — style the caption. To do this, add the following to the bottom of your style.css file:

caption {
  font-family: 'Rock Salt', cursive;
  padding: 20px;
  font-style: italic;
  caption-side: bottom;
  color: #666;
  text-align: right;
  letter-spacing: 1px;
}

There is nothing remarkable here, except for the caption-side property, which has been given a value of bottom. This causes the caption to be positioned on the bottom of the table, which along with the other declarations gives us this final look (see it live at punk-bands-complete.html):

Apprendere attivamente: Uno stile per la tua tabella

At this point, we'd like you to take our example table HTML (or use some of your own!) and style it to make something considerably better designed and less garish than our table.

Trucchi per gli stili delle tabelle

Before moving on, we thought we'd provide you with a quick list of the most useful points illustrated above:

  • Make your table markup as simple as possible, and keep things flexible, e.g. by using percentages, so the design is more responsive.
  • Use table-layout: fixed to create a more predictable table layout that allows you to easily set column widths by setting width on their headings (<th>).
  • Use border-collapse: collapse to make table elements borders collapse into each other, producing a neater and easier to control look.
  • Use <thead>, <tbody>, and <tfoot> to break up your table into logical chunks and provide extra places to apply CSS to, so it is easier to layer styles on top of one another if required.
  • Use zebra striping to make alternative rows easier to read.
  • Use text-align to line up your <th> and <td> text, to make things neater and easier to follow.

Sommario

With the dizzy exciting heights of styling tables now behind us, we need something else to occupy our time. Never fear — the next chapter provides a look at some advanced box effects, some of which have only landed in browsers very recently (such as blend modes and filters), and some of which are a bit more established (such as box shadows.)

In questo modulo