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
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
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 */
}
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:
| Nome | Cognome |
|---|---|
| John | Doe |
| 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
IP: 216.73.216.192
