表題の位置と整列のレンダリング

<style type="text/css"><!--
.eg1 {caption-side:top;}
--></style>

<table border="1">
<caption class="eg1">表題</caption>
<tbody>
<tr><td>データ</td><td>データ</td></tr>
<tr><td>データ</td><td>データ</td></tr>
</tbody>
</table>

<style type="text/css"><!--
.eg1 {caption-side:bottom;}
--></style>

<table border="1">
<caption class="eg1">表題</caption>
<tbody>
<tr><td>データ</td><td>データ</td></tr>
<tr><td>データ</td><td>データ</td></tr>
</tbody>
</table>

<style type="text/css"><!--
.eg1 {caption-side:left;}
--></style>

<table border="1">
<caption class="eg1">表題</caption>
<tbody>
<tr><td>データ</td><td>データ</td></tr>
<tr><td>データ</td><td>データ</td></tr>
</tbody>
</table>

<style type="text/css"><!--
.eg1 {caption-side:right;}
--></style>

<table border="1">
<caption class="eg1">表題</caption>
<tbody>
<tr><td>データ</td><td>データ</td></tr>
<tr><td>データ</td><td>データ</td></tr>
</tbody>
</table>