|
下記の属性を加えるとテーブルやセル内の文字の表示位置を指定することが
できます。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タグ一覧のページに戻る
|
