[新着] Webテンプレートを仮オープンしました
caption-side は、キャプション（表題）の表示位置を指定するプロパティです。
このスタイルはcaption要素に適用できます。
caption {
caption-side: bottom;
}
| caption-side | top … （表の上部に表示します）デフォルト   |
|---|---|
| bottom … （表の下部に表示します） |
|
left … （表の左に表示します） |
|
| right … （表の右に表示します） |
text-align（left、center、right） や vertical-align（top、middle、bottom） プロパティと組み合わせると、より細かい位置指定が可能になります。
■組み合わせ例
caption { caption-side: bottom; text-align: right; }
caption { caption-side: left; vertical-align: middle; }
left、またはrightを指定する場合は、キャプションが入る部分にマージンを指定しておくと綺麗に表示されます（下記の使用例でも指定しています）。この指定がないと、狭い範囲にキャプションを収めようとするので、縦長に表示されてしまいます。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
div { margin-bottom: 20px; }
table, td, th { border: 2px #2b2b2b solid; }
#example1 caption { caption-side: top; }
#example2 caption { caption-side: bottom; }
#example3 table { margin-left: 6em; }
#example3 caption { caption-side: left; }
#example4 table { margin-right: 6em; }
#example4 caption { caption-side: right; }
-->
</style>
</head>
<body>
<div id="example1">
<table>
<caption>topを指定</caption>
<tr>
<th>サーバー</th>
<th>Web制作</th>
</tr>
<tr>
<td>サーバーA社</td>
<td>Web制作A社</td>
</tr>
</table>
</div>
<div id="example2">
<table>
<caption>bottomを指定</caption>
<tr>
<th>サーバー</th>
<th>Web制作</th>
</tr>
<tr>
<td>サーバーA社</td>
<td>Web制作A社</td>
</tr>
</table>
</div>
<div id="example3">
<table>
<caption>leftを指定</caption>
<tr>
<th>サーバー</th>
<th>Web制作</th>
</tr>
<tr>
<td>サーバーA社</td>
<td>Web制作A社</td>
</tr>
</table>
</div>
<div id="example4">
<table>
<caption>rightを指定</caption>
<tr>
<th>サーバー</th>
<th>Web制作</th>
</tr>
<tr>
<td>サーバーA社</td>
<td>Web制作A社</td>
</tr>
</table>
</div>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
| サーバー | Web制作 |
|---|---|
| サーバーA社 | Web制作A社 |
| サーバー | Web制作 |
|---|---|
| サーバーA社 | Web制作A社 |
| サーバー | Web制作 |
|---|---|
| サーバーA社 | Web制作A社 |
| サーバー | Web制作 |
|---|---|
| サーバーA社 | Web制作A社 |
