サイト内検索
...スタイルシート(css)...
スタイルシート・table
セル内・左右の位置の指定
文字の左右の位置は、text-alignプロパティを指定します。
- [使い方]
- .sample{
text-align: left;
}
プロパティ名 | 値 | 説明 |
---|---|---|
text-align: | left | 左側に表示します。 |
center | 中央に表示します。 | |
right | 右側に表示します。 | |
justify | 両端に揃えます。 |
セル内・上下の位置の指定
文字の上下の位置は、vertical-align:プロパティを指定します
- [使い方]
- .sample{
vertical-align: top;
}
プロパティ名 | 値 | 説明 |
---|---|---|
vertical-align: | baseline; | 先頭行のベースラインに揃えます。 |
top;
または text-top; |
上部に文字を表示します。 | |
middle; | 中央に表示します。 | |
bottom;
または text-bottom; |
下部に表示します。 |
サンプル
[headの中]
<style type="text/css"><!--
table{
border: 1px #999999 solid;
width: 80%;
height: 150px;
}
td, th{
border: 1px #999999 solid;
}
.sample1{
text-align: left;
vertical-align: top;
}
.sample2{
text-align: center;
vertical-align: middle;
}
.sample3{
text-align: ight;
vertical-align: bottom;
}
-->
</style>
[bodyの中]
<table><tr>
<td>指定なし</td>
<td id="sample1">left;・top;</td>
<th id="sample2">center;・middle; </td>
<td id="sample3">right;・bottom; </td>
</tr>
</table>
[ブラウザ上]
指定なし | left;・top; |
center;・middle; | right; ・bottom; |