CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS caption-side

La proprietà CSS caption-side definisce la posizione della didascalia della tabella (CSS2)

La proprietà caption-side consente di spostare la didascalia di una tabella in posizione superiore (top) o inferiore (bottom) rispetto al contenuto della tabella stessa. Il valore predefinito è top, ma può essere facilmente modificato in base alle necessità di design.

Sintassi

caption-side: top | bottom;

Significato dei valori principali:

  • top: Posiziona la didascalia sopra la tabella. Questo è il valore predefinito e viene utilizzato per la maggior parte delle tabelle.

  • bottom: Posiziona la didascalia sotto la tabella. Può essere utilizzato per scopi stilistici o per scelte di design particolari.


Esempio proprietà: caption-side


Codice Esempio: caption-side

CODE: CSSpreleva codice
  1. table {
  2.   width: 80%;
  3.   border-collapse: collapse;
  4.   margin: 20px auto;
  5. }
  6.  
  7. caption {
  8.   font-size: 24px;
  9.   font-weight: bold;
  10.   color: #50a14f;
  11. }
  12.  
  13. .caption-top caption {
  14.   caption-side: top; /* Didascalia sopra la tabella */
  15. }
  16.  
  17. .caption-bottom caption {
  18.   caption-side: bottom; /* Didascalia sotto la tabella */
  19. }

Contenuto Esempio: caption-side

Esempio di utilizzo di caption-side

In questo esempio, la proprietà caption-side viene utilizzata per spostare la didascalia sopra o sotto una tabella:


Tabella con didascalia sopra
Nome Cognome
John Doe
Tabella con didascalia sotto
Nome Cognome
Jane Smith

CSS e HTML per l'elemento con didascalia sopra e sotto:

  
  <style>
    table {
      width: 80%;
      border-collapse: collapse;
      margin: 20px auto;
    }

    caption {
      font-size: 24px;
      font-weight: bold;
      color: #50a14f;
    }

    .caption-top caption {
      caption-side: top; /* Didascalia sopra la tabella */
    }

    .caption-bottom caption {
      caption-side: bottom; /* Didascalia sotto la tabella */
    }
  </style>

  <table class="caption-top">
    <caption>Tabella con didascalia sopra</caption>
    <tr>
      <th>Nome</th>
      <th>Cognome</th>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
  </table>

  <table class="caption-bottom">
    <caption>Tabella con didascalia sotto</caption>
    <tr>
      <th>Nome</th>
      <th>Cognome</th>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Smith</td>
    </tr>
  </table>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies