Proprietà CSS caption-side

La proprietà caption-side definisce il posizionamento dell'elemento HTML <caption> all'interno di una tabella HTML. Il tag <caption> viene utilizzato per assegnare un titolo a una tabella. Il titolo (didascalia) della tabella può essere posizionato in fondo o in cima alla tabella.

Questa proprietà ha due valori standardizzati: top e bottom. Il valore top definisce che il box della didascalia deve essere posizionato sopra la tabella. Il valore bottom definisce che il box della didascalia deve essere posizionato sotto la tabella.

Esistono altri quattro valori non standardizzati: left, right, top-outside e bottom-outside. Questi valori erano stati proposti in CSS 2 ma non sono stati inclusi in CSS 2.1. Sono attualmente obsoleti e supportati solo da Firefox. Non sono consigliati per l'uso in produzione.

La proprietà caption-side può essere applicata anche a qualsiasi elemento la cui proprietà display sia impostata su table-caption.

Valore iniziale	top
Si applica a	Elementi table-caption.
Ereditata	No.
Animabile	Discreta.
Versione	CSS 2.1
Sintassi DOM	object.style.captionSide = "top";

Proprietà caption-side per una didascalia di tabella

Utilizza una didascalia di tabella per impostare un breve titolo alla tabella, ad esempio una descrizione sintetica. Questo descriverà la struttura di una tabella. L'elemento <caption> deve essere utilizzato a tale scopo. Deve essere inserito immediatamente dopo il tag di apertura <table>, rendendolo il primo figlio della tabella. (Nota: l'attributo summary sul tag <table> è deprecato in HTML5 e non dovrebbe essere utilizzato.) Con l'aiuto della proprietà caption-side, è possibile modificare la posizione della didascalia.

Sintassi

Sintassi della proprietà CSS caption-side

caption-side: top | bottom | left | right | top-outside | bottom-outside | initial | inherit;

Ecco un esempio in cui viene applicato il valore "top". Posiziona la didascalia sopra la tabella.

Esempio della proprietà CSS caption-side:

Esempio della proprietà CSS caption-side con il valore top

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      caption {
        background: #1c87c9;
        color: #fff;
      }
      .top caption {
        caption-side: top;
      }
      table,
      th,
      td {
        border: 1px solid #1c87c9;
        padding: 3px;
      }
      td {
        background-color: #ccc;
        color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Caption-side property example</h2>
    <p>Here the caption-side is set to "top":</p>
    <table class="top">
      <caption>Some title here</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
  </body>
</html>

Provalo tu stesso »

Risultato

![Proprietà CSS caption-side](/uploads/media/default/0001/03/273b1e51c9d5a4a9ee88f0aa85c7a0958ae2d787.png "CSS caption-side property with top value" =420x)

Esempio della proprietà caption-side con due valori:

Esempio della proprietà CSS caption-side con i valori top e bottom

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      caption {
        background: #ccc;
      }
      .top caption {
        caption-side: top;
      }
      .bottom caption {
        caption-side: bottom;
      }
      table,
      th,
      td {
        border: 1px solid #cccccc;
        padding: 3px;
      }
      td {
        background-color: #1c87c9;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h2>Caption-side property example</h2>
    <p>Here the caption-side is set to "top":</p>
    <table class="top">
      <caption>ABOVE</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
    <br />
    <p>And here the caption-side is set to "bottom":</p>
    <table class="bottom">
      <caption>BELOW</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
  </body>
</html>

Provalo tu stesso »

Quando usare caption-side

Per impostazione predefinita, la didascalia appare sopra la tabella (caption-side: top), che è il posto convenzionale per un titolo di tabella. Imposta il valore su bottom quando la didascalia si legge più come una nota a piè di pagina o una fonte di dati — ad esempio "Figura 1: Ricavi trimestrali (in migliaia)" posizionata sotto una tabella simile a un grafico. La scelta è puramente visiva; il <caption> rimane il primo figlio della tabella nel markup in entrambi i casi, quindi i lettori di schermo lo annunciano come nome accessibile della tabella indipendentemente da dove viene visualizzato.

Cose da tenere a mente

La posizione nel markup è fissa, la visualizzazione no. Anche quando si usa caption-side: bottom, il <caption> deve rimanere il primo figlio del <table>. CSS sposta solo dove viene disegnato il box, non dove l'elemento si trova nel DOM.
Utilizza solo top e bottom. I valori left, right, top-outside e bottom-outside sono stati eliminati da CSS 2.1 e sono supportati solo in Firefox. In tutti gli altri browser vengono ignorati e ricadono su top, quindi evitali in produzione.
Non è ereditata. Sebbene la proprietà si applichi ai box table-caption, non è ereditata, quindi impostarla su un elemento contenitore non influisce sulle tabelle annidate a meno che non si puntino direttamente le relative didascalie.
Nessun box di layout proprio da dimensionare. caption-side non può modificare la larghezza o l'allineamento del testo della didascalia — usa text-align e width sul <caption> per quello.

Supporto dei browser

I valori standardizzati top e bottom sono supportati in tutti i browser moderni, incluso Internet Explorer 8 e versioni successive. I valori non standard sono supportati solo in Firefox.

Valori

Valore	Descrizione	Provalo
top	Posiziona la didascalia sopra la tabella. Questo è il valore predefinito di questa proprietà.	Provalo »
bottom	Posiziona la didascalia sotto la tabella.	Provalo »
left	Posiziona la didascalia sul lato sinistro della tabella. Valore non standard supportato solo da Firefox.
right	Posiziona la didascalia sul lato destro della tabella. Valore non standard supportato solo da Firefox.
top-outside	Posiziona la didascalia sopra la tabella. La larghezza e il comportamento dell'allineamento orizzontale non sono vincolati al layout orizzontale della tabella. Valore non standard supportato solo da Firefox.
bottom-outside	Posiziona la didascalia sotto la tabella, mentre la larghezza e il comportamento dell'allineamento orizzontale non sono vincolati al layout orizzontale della tabella. Valore non standard supportato solo da Firefox.
initial	Imposta la proprietà al suo valore predefinito.	Provalo »
inherit	Eredita la proprietà dal suo elemento padre.

Pratica

Cosa fa la proprietà 'caption-side' in CSS?

Imposta la posizione della didascalia in cima alla tabella.Imposta la posizione della didascalia in fondo alla tabella.Applica uno stile alla didascalia con un colore specifico del testo.Ingrandisce le dimensioni del testo della didascalia.

Proprietà correlate per lo stile delle tabelle

border-collapse — scegli se i bordi della tabella si uniscono in una singola linea o rimangono separati.
empty-cells — controlla se i bordi e gli sfondi vengono visualizzati nelle celle vuote.
table-layout — passa tra algoritmi automatici e fissi per la larghezza delle colonne.
text-align — allinea il testo della didascalia all'interno del suo box.