ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >テーブル

セルの文字の位置を指定する

td{text-align:位置; vertical-align:位置;}でテーブルのセルの文字の位置を指定する ことが出来ます。二つの属性を組み合わせて指定すると目的の位置に配置 できます。

■ 表示する文字の位置

セルの文字の表示位置は以下のとおりです。

text-align(水平方向)に文字を表示する場合

位置説明
left左に表示します。
center中央に表示します。
right右に表示します。

vertical-align(垂直方向)に文字を表示する場合

位置説明
baselineベースラインに揃えます。
top上に表示します。
middle中央に表示します。
bottom下に表示します。

【ブラウザ表示】

中央
中央

ソース

<table class="place1">
<tr>
<td class="place2" id="p1">左</td>
<td class="place2" id="p2">中央</td>
<td class="place2" id="p3">右</td>
</tr>
<tr>
<td class="place2" id="p4">上</td>
<td class="place2" id="p5">中央</td>
<td class="place2" id="p6">下</td>
</tr>
</table>

外部ファイル

table.place1{border:1px black solid;}
td.place2{
border:1px black solid;
width:100px;
height:100px;
}
td#p1{text-align:left;}
td#p2{text-align:center;}
td#p3{text-align:right;}
td#p4{vertical-align:top;}
td#p5{vertical-align:middle;}
td#p6{vertical-align:bottom;}


<body>〜</body>に直接記入する場合

<table style="border:1px black solid;">
<tr>
<td style="border:1px black solid; width:100px; height:100px;
text-align:left;">左</td>
<td style="border:1px black solid; width:100px; height:100px;
text-align:center;">中央</td>
<td style="border:1px black solid; width:100px; height:100px;
text-align:right;">右</td>
</tr>
<tr>
<td style="border:1px black solid; width:100px; height:100px;
vertical-align:top;">上</td>
<td style="border:1px black solid; width:100px; height:100px;
vertical-align:middle;">中央</td>
<td style="border:1px black solid; width:100px; height:100px;
vertical-align:bottom;">下</td>
</tr>
</table>

■ その他の項目

枠線の太さ、色、種類を指定する
枠線を重ねて表示する
テーブルやセルの幅、高さを指定する
外側、内側の余白を指定する
テーブルに文字を回り込ませる
テーブルやセルに背景色を指定する
テーブルやセルに画像を指定する

スタイルシート一覧のページに戻る

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.