https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

表示位置を指定する

下記の属性を加えるとテーブルやセル内の文字の表示位置を指定することが できます。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">
テーブルの右に回り込んでいた文字が解除されテーブルの
下の行にこれました。

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

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

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