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

表示位置を指定する

下記の属性を加えるとテーブルやセル内の文字の表示位置を指定することが できます。align="位置"とvalign="位置"を組み合わせればセルのいろんな位置に 文字や画像を配置できます。

<table>、<tr>、<th> <td>共通の属性
属性説明
align="位置"テーブルやセル内の文字の横方向の表示位置を 指定します。
left(左側)center(中央)right(右側)
<tr>、<th> <td>共通の属性
valign="位置"セル内の文字の縦方向の表示位置を 指定します。
top(上側)middle(真中)bottom(下側)

【ブラウザ表示】

右側右上
左上右側

中央中央上
真中左下
左下右下
右側中央下


ソース(左)

<table border="1" align="left" width="300" height="130">
<tr align="right">
<td>右側</td><td valign="top">右上</td>
</tr>
<tr>
<td valign="top">左上</td><td align="right">右側</td>
</tr>
</table>

ソース(真中)

<table border="1" align="center" width="300" height="130">
<tr align="center">
<td>中央</td><td valign="top">中央上</td>
</tr>
<tr>
<td valign="middle">真中</td><td valign="bottom">左下</td>
</tr>
</table>

ソース(右)

<table border="1" align="right" width="300" height="130">
<tr valign="bottom">
<td>左下</td><td align="right">右下</td>
</tr>
<tr>
<td align="right">右側</td>
<td align="center" valign="bottom">中央下</td>
</tr>
</table>

■ テーブルの周囲の文字の回り込みを解除

<table align="位置">〜</table>のすぐ後に文字や別のテーブル を持ってこようとすると改行されず次のように文字やテーブルが回り込んでしまうので <br clear="all">を用いて 回り込みを解除します。この要領はイメージタグの回り込み解除 の方法と同じです。

【ブラウザ表示】

左寄せのテーブル
文字がテーブルの右に回り込んでしまいます。
テーブルの右に回り込んでいた文字が解除されテーブルの下の行に これました。
ソース

<table border="1" align="left" width="200" height="100">
<tr>
<td>左寄せのテーブル</td>
</tr>
</table>
文字がテーブルの右に回り込んでしまいます。
<br clear="all">
テーブルの右に回り込んでいた文字が解除されテーブルの
下の行にこれました。

■ その他の項目

テーブルを作る
横幅、高さを指定する
画像や背景色を指定する
テーブルに表題をつける
間隔、余白を指定する
セルを結合する
枠線の色やスタイルを指定する
行と列をグループ化する
枠線の表示方法を指定する
細い枠線のテーブル
テーブルを横に並べる
テーブルで空白を作る

HTMLタグ一覧のページに戻る

HTMLタグ
テキスト
イメージ
マーキー
テーブル
リンク
リスト
水平線
フォーム
メタタグ
フレーム
音楽タグ
埋め込みタグ

HOME

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