caption-side「テーブルのキャプションの表示位置」

<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css_table{
 border: solid 1px #000000;
 border-collapse: collapse;
}
.css_table td{
 border: solid 1px #000000;
}
.css_caption_side_top {caption-side:top;}
.css_caption_side_bottom {caption-side:bottom;}
</style>
<!-- html -->
<div class="common">
  <div class="cssTitle">caption-side:top</div>
  <div>
  <table class="css_table">
  <caption class="css_caption_side_top">表題　上<caption>
  <tbody>
  <tr><td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td></tr>
  <tr><td>2-1</td><td></td><td>2-3</td><td>2-4</td></tr>
  <tr><td>3-1</td><td>3-2</td><td></td><td>3-4</td></tr>
  </tbody>
  </table>
  </div>

  <div class="cssTitle">caption-side:bottom</div>
  <div>
  <table class="css_table">
  <caption class="css_caption_side_bottom">表題　下<caption>
  <tbody>
  <tr><td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td></tr>
  <tr><td>2-1</td><td></td><td>2-3</td><td>2-4</td></tr>
  <tr><td>3-1</td><td>3-2</td><td></td><td>3-4</td></tr>
  </tbody>
  </table>
  </div>

</div>