text-align: ***;
text-align は、内容の水平方向の表示位置を指定するプロパティです。
このプロパティをcaption要素に対して設定すると、表題の表示位置を指定することができます。
caption {
text-align: left;
}
プロパティ名 | 値 | 説明 |
---|---|---|
text-align | left | 表の上部の左に表示 |
center | 表の上部の中央に表示 | |
right | 表の上部の右に表示 |
この指定がない場合は、表の上部の中央に表示されます。
使用例
<!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">
table {
width: 400px;
margin-bottom: 30px;
border: 2px #2b2b2b solid;
}
td, th {
border: 2px #2b2b2b solid;
}
table.example1 caption {
text-align: left;
}
table.example2 caption {
text-align: center;
}
table.example3 caption {
text-align: right;
}
</style>
</head>
<body>
<table class="example1">
<caption>leftを指定</caption>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
</table>
<table class="example2">
<caption>centerを指定</caption>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
</table>
<table class="example3">
<caption>rightを指定</caption>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
</table>
</body>
</html>
表示例
見出しセル1 | 見出しセル2 |
---|---|
データセル1 | データセル2 |
見出しセル1 | 見出しセル2 |
---|---|
データセル1 | データセル2 |
見出しセル1 | 見出しセル2 |
---|---|
データセル1 | データセル2 |
- サイト内検索