caption-side: ***;
caption-side は、表題の表示位置を指定するプロパティです。
このスタイルはcaption要素に適用することができます。
caption {
caption-side: bottom;
}
プロパティ名 | 値 | 説明 |
---|---|---|
caption-side | top | 表の上に配置 (初期値) |
bottom | 表の下に配置 | |
left | 表の左に配置 | |
right | 表の右に配置 |
left と right の指定は、IE、Safari、Chrome、Operaではうまく機能しないようです。
【より細かい位置指定】
text-alignプロパティやvertical-alignプロパティ(top、middle、bottomのみ)と組み合わせて使用すると、より細かい位置指定が可能になります。
例えば、次のように組み合わせることができます。
caption { caption-side: bottom; text-align: right; }
… 表の下 + 右寄せで表示caption { caption-side: left; vertical-align: middle; }
… 表の左 + 垂直方向の中央に表示
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
div {
margin-bottom: 30px;
}
table, td, th {
border: 2px #2b2b2b solid;
}
table.example1 caption {
caption-side: top;
}
table.example2 caption {
caption-side: bottom;
}
table.example3 caption {
width: 6em;
caption-side: left;
}
table.example4 caption {
width: 6em;
caption-side: right;
}
table.example5 caption {
caption-side: bottom;
text-align: right;
}
</style>
</head>
<body>
<div>
<table class="example1">
<caption>topを指定</caption>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
</table>
</div>
<div>
<table class="example2">
<caption>bottomを指定</caption>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
</table>
</div>
<div>
<table class="example3">
<caption>leftを指定</caption>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
</table>
</div>
<div>
<table class="example4">
<caption>rightを指定</caption>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
</table>
</div>
<div>
<table class="example5">
<caption>下+右寄せ</caption>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
</table>
</div>
</body>
</html>
表示例
見出しセル1 | 見出しセル2 |
---|---|
データセル1 | データセル2 |
見出しセル1 | 見出しセル2 |
---|---|
データセル1 | データセル2 |
見出しセル1 | 見出しセル2 |
---|---|
データセル1 | データセル2 |
見出しセル1 | 見出しセル2 |
---|---|
データセル1 | データセル2 |
見出しセル1 | 見出しセル2 |
---|---|
データセル1 | データセル2 |
- サイト内検索