2014年04月21日

表組 その3

表組 その3

■表とセルの大きさの指定

表全体の大きさや、セルの大きさを指定することが出来ます。ただし、指定の仕方が不適切だと、とんでもない形でブラウザに表示されてしまいますので、注意が必要です。

指定出来るタグ 
@表全体 <table border> <table>
A見出しセル <th>
Bデータセル <td>

●横幅の指定

width=""

●高さの指定
height=""

指定する単位は、「ピクセル」と「%」です。この指定をすると、表の中の文字の分量に関わらず、指定した大きさ または比率で表示されます。
幅/高さの数値は " と " の間に半角英数文字で記述します。

●ピクセルで指定…指定した数字の幅/高さの表 またはセルができます。

●%で指定…表全体で指定する場合と、セルで指定する場合で違ってきます。
表全体で指定:ブラウザの大きさの幅/高さに対する比率(%)になります。
セルで指定:テーブル全体の幅/高さに対する比率(%)になります。

記述例:

<table border width="90%"> 
 … 
</table>

表全体が、ブラウザの幅の 90% で表示されます。

<td width="200">
 … 
</td> 

データセルの幅が、200ピクセル(約 70ミリ)で表示されます(標準的なパソコンのディスプレイの場合)。

■表とセルの高さの指定

表全体やセルの高さを指定するのは、データの種類や分量などとのからみで、難しい問題があり、ここでは説明を省略しています。私自身のホームページでも、高さの指定はしていません。高さについては、ブラウザに任せた方が無難ではないかと思います。

■セルの中の文字の表示

セル内の文字列は、セルの大きさに合わせて、自動的に右端で折り返して表示されます。
このセルの中は折り返してほしくない、という時は、「折り返し禁止」の指定をします。
折り返し禁止のタグは、
nowrap
です。

例:

<td nowrap>
折り返してほしくないという時は「折り返し禁止」の指定をします。
</td>

逆に、セルの中で必ずここで改行してほしいという時は、改行タグ <br> を挿入します。

例:

<td>
セルの中で必ずここで改行してほしいという時は<br>
改行タグを挿入します。
</td>

■データの横の位置の指定

表組の中のセルは、ほとんどが横長の形になります。その中に入れるデータの横の位置を指定することが出来ます。

文字の表示位置を指定するタグ、

align=" " 

の " と "の間に、左 中 右 という位置をつけて記述します。

left 左寄せ  ALIGN="left" 
center 中央揃え  ALIGN="center" 
right 右寄せ   ALIGN="right" 

この指定は、<tr> <th> <td> の、どれでも指定することが出来ます。
<tr> のところで指定すると、その行の全部のセルに対して、指定が有効になります。
なお、初期値 = 何も指定しない時は、次のように表示されますので、それ以外の位置に表示したい時に書き加えて下さい。

見出しセル <th></th> … 中央揃え
データセル <td></td> … 左寄せ

■HTMLタグの入力支援メニュー

ここでは例として、データセルの中の文字列を「右寄せ」に指定してみます。

<td>
3,000円
</td>

というデータセルを作り、カーソルを開始タグ <td> の > の上に置きます。
HTMLタグの入力支援メニューから、「行そろえ」を選択し、サブメニューから「右寄せ」を実行します。「右寄せ属性 挿入」と音声がして、次のように挿入されます。

<td align="right">
3,000円
</td>

※終了タグ </td> では、この指定の記述は必要ありません。

この「右寄せ」の指定は、金額などの数字を書き込んだセルに効果的です。

10,000円
5,000円
300円

というふうに、金額の桁が違っている場合、何も指定しないと、左寄せで表示されてしまい 円 の位置がバラバラになってしまいます。
右寄せに表示するように指定すると、右端の 円 の位置が、各セルで同じ位置にそろって表示されるようになりますので、見やすくなり見栄えも良くなります。

■データの縦の位置の指定

セルの中のデータ(文字)が、全て一行の場合は問題ないのですが、文字数が多くて何行にもわたるセルがある場合は、他のセルの文字の位置を調節する必要が出てくる時があります。

valign=" "

という、文字の縦方向の表示位置を指定するタグの " と " の間に、次の項目を入力して位置を指定します。

top 上に詰める VALIGN="top" 
bottom 下に詰める VALIGN="bottom" 
middle 中段に配置する VALIGN="middle" 

なお、初期値=何も指定がない時は、自動的に中段に表示されます。目視で確認するのが難しい場合は、何も指定せずにおくのが無難です。
posted by yanikun at 08:06| Comment(0) | 日記