CSS - lato didascalia

Descrizione

La proprietà caption-side determina la posizione del riquadro dell'elemento di una didascalia table.s.

Possibili valori

  • top - Posiziona il riquadro dell'elemento della didascalia sopra il riquadro della tabella.

  • bottom - Posiziona il riquadro dell'elemento della didascalia sotto il riquadro della tabella.

  • left - Posiziona il riquadro dell'elemento della didascalia a sinistra del riquadro della tabella.

  • right - Posiziona il riquadro dell'elemento della didascalia a destra del riquadro della tabella.

Si applica a

Tutto l'elemento posizionato in HTML.

Sintassi DOM

object.style.captionSide = "left";

Esempio

Ecco l'esempio che mostra l'effetto di questa proprietà:

<html>
   <head>
      <style type = "text/css">
         caption.top {caption-side:top}
         caption.bottom {caption-side:bottom}
         caption.left {caption-side:left}
         caption.right {caption-side:right}
      </style>
   </head>

   <body>
   
      <table style = "width:400px; border:1px solid black;">
         <caption class = "top">
            This caption will appear at the top
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "bottom">
            This caption will appear at the bottom
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "left">
            This caption will appear at the left
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "right">
            This caption will appear at the right
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      
   </body>
</html>

Questo produrrà il seguente risultato: