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

■ 表示する文字の位置

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

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

【ブラウザ表示】

<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;}

<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>

■ その他の項目

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