Exemple de code de la propriété CSS caption-side.

<style type="text/css">
.captiont {
  caption-side : top; 
}
.captionb {
  caption-side : bottom; 
}
.captionr {
  caption-side : right; 
}
.captionl {
  caption-side : left; 
}

.ex-caption { border: 1px solid #ccc }
</style>
<table width="100" border="1" class="captiont">
<CAPTION class="ex-caption">
Légende caption-side : top
</CAPTION>
 <tr>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
</table>
<br>
<table width="100" border="1" class="captionb">
<CAPTION class="ex-caption">
Légende caption-side : bottom
</CAPTION>
 <tr>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
</table>
<br>
<table width="100" border="1" class="captionl">
<CAPTION class="ex-caption">
Légende  caption-side : left
</CAPTION>
 <tr>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
</table>
<br>
<table width="100" border="1" class="captionr">
<CAPTION class="ex-caption">
Légende  caption-side : right
</CAPTION>
 <tr>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
</table>
<br>
<table width="100" border="1">
<CAPTION class="ex-caption captiont">
Légende avec class  caption-side : top
</CAPTION>
 <tr>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
</table>
<br>
<table width="100" border="1">
<CAPTION class="ex-caption captionb">
Légende avec class  caption-side : bottom
</CAPTION>
 <tr>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
</table>
<br>
<table width="100" border="1">
<CAPTION class="ex-caption captionl">
Légende avec class caption-side : left
</CAPTION>
 <tr>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
</table>
<br>
<table width="100" border="1">
<CAPTION class="ex-caption captionr">
Légende avec class caption-side : right
</CAPTION>
 <tr>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
</table>