CSS
.sample-table {
border: 1px solid gray;
border-collapse: collapse;
margin: 1em;
}
.sample-table td {
border: 1px solid gray;
}
.sample-top {
caption-side: top;
}
.sample-bottom {
caption-side: bottom;
}
HTML
<h5>top</h5>
<table class="sample-table">
<caption class="sample-top">キャプション</caption>
<tr><td>AAAAAA</td><td>AAAAAA</td></tr>
<tr><td>AAAAAA</td><td>AAAAAA</td></tr>
</table>
<h5>bottom</h5>
<table class="sample-table">
<caption class="sample-bottom">キャプション</caption>
<tr><td>AAAAAA</td><td>AAAAAA</td></tr>
<tr><td>AAAAAA</td><td>AAAAAA</td></tr>
</table>
表示
top
キャプション
AAAAAA | AAAAAA |
AAAAAA | AAAAAA |
bottom
キャプション
AAAAAA | AAAAAA |
AAAAAA | AAAAAA |