Proprietà caption-side

La proprietà caption-side imposta la posizione della didascalia della tabella, creata utilizzando il tag <caption>. La proprietà può avere due valori: top (in alto rispetto alla tabella, predefinito) o bottom (sotto la tabella).

Sintassi

cssselettore {
  caption-side: top | bottom;
}

Esempio

Posizioniamo la didascalia sopra la tabella:

html<table border="1" width="300">
  <caption>Tabella</caption>
  <tr>
    <th>Intestazione</th>
    <th>Descrizione</th>
  </tr>
  <tr>
    <td>testo1</td>
    <td>testo2</td>
  </tr>
</table>

csstable {
  width: 100%;
  border-collapse: collapse;
}
td {
  width: 200px;
  height: 100px;
  text-align: center;
}
caption {
  caption-side: top;
  font-weight: bold;
}

Результат:

Esempio

Ora spostiamo la didascalia sotto la tabella:

html<table border="1" width="300">
  <caption>Tabella</caption>
  <tr>
    <th>Intestazione</th>
    <th>Descrizione</th>
  </tr>
  <tr>
    <td>testo1</td>
    <td>testo2</td>
  </tr>
</table>

csstable {
  width: 100%;
  border-collapse: collapse;
}
td {
  width: 200px;
  height: 100px;
  text-align: center;
}
caption {
  caption-side: bottom;
  font-weight: bold;
}

Результат:

Vedi anche