１１．ＨＴＭＬでホームページを作る。表の設定<table>のところで、align="center"やalign="right"を使って、表全体を真ん中に配置したり、右寄せにしたり出来ることを書きました。
では、これを見てください。
| 真ん中 | 真ん中 | 真ん中 |
| 真ん中 | 左寄せ | このセルには文字がたくさんあってわかりにくいですが、ここも左寄せになっています。 |
| 真ん中 | 右寄せ | このセルには文字がたくさんあってわかりにくいですが、ここも右寄せになっています。 |
表全体は中央に配置しています。
セルの中の文字は、中央寄せになっていたり、左寄せ、右寄せになっていたりします。
この表のＨＴＭＬソースを下に書いておきますので見てください。
（もちろん、これは<body></body>の間に書きますよ。）
|
<table border="1" width="300" align="center">
<tr align="center">
<td width="100">真ん中</td>
<td width="100">真ん中</td>
<td width="100">真ん中</td>
</tr>
<tr>
<td align="center" width="100">真ん中</td>
<td width="100">左寄せ</td>
<td width="100">このセルには文字がたくさんあってわかりにくいですが、ここも左寄せになっています。</td>
</tr>
<tr>
<td align="center" width="100">真ん中</td>
<td align="right" width="100">右寄せ</td>
<td align="right" width="100">このセルには文字がたくさんあってわかりにくいですが、ここも右寄せになっています。</td>
</tr>
</table>
|
表全体の位置は<table>タグの中にalign="center"と書いて、中央寄せにしています。
表の幅は３００、それぞれのセルの幅は１００と指定しています。width="300"、width="100"
ところで、<tr>や<td>にもalign="center"やalign="right"が指定できます。
そうすると、セルの中身が中央寄せになったり、右寄せになったりします。
一番上の段は、すべて中央寄せにしています。その場合、<tr>の中でalign="center"と指定すればいいのです。
それで、その段にあるセルはすべて、中央寄せになります。
個別のセルに指定する場合は、<td>に指定します。
左寄せの場合は、align="left"と指定するのですが、何も指定されていなければ、基本的には自動的に左寄せになっています。
ですから、表の２段目にある左寄せには、align="left"とは、指定していません。
◆
上の表ではwidthを使って幅を指定しています。
もし幅を指定しないとどうなるか？上のＨＴＭＬソースからwidthの指定を全部取り除くと・・・
|
<table border="1" align="center">
<tr align="center">
<td>真ん中</td>
<td>真ん中</td>
<td>真ん中</td>
</tr>
<tr>
<td align="center">真ん中</td>
<td>左寄せ</td>
<td>このセルには文字がたくさんあってわかりにくいですが、ここも左寄せになっています。</td>
</tr>
<tr>
<td align="center">真ん中</td>
<td align="right">右寄せ</td>
<td align="right">このセルには文字がたくさんあってわかりにくいですが、ここも右寄せになっています。</td>
</tr>
</table>
|
こんな風に表示されます。
| 真ん中 | 真ん中 | 真ん中 |
| 真ん中 | 左寄せ | このセルには文字がたくさんあってわかりにくいですが、ここも左寄せになっています。 |
| 真ん中 | 右寄せ | このセルには文字がたくさんあってわかりにくいですが、ここも右寄せになっています。 |
このように、文字の数に従って、自動的に幅が決まってしまいます。
ブラウザが（ＩＥやネットスケープ）勝手に幅を決めて表示します。
自動的に適当に改行されます。
ここで、セルにnowrapを指定すると、改行せずに表示できるセルの幅になります。
たとえば、
<td align="center">真ん中</td>
<td>左寄せ</td>
<td>このセルには文字がたくさんあってわかりにくいですが、ここも左寄せになっています。</td>
を
<td align="center" nowrap>真ん中</td>
<td>左寄せ</td>
<td nowrap>このセルには文字がたくさんあってわかりにくいですが、ここも左寄せになっています。</td>
に変えると・・
| 真ん中 | 真ん中 | 真ん中 |
| 真ん中 | 左寄せ | このセルには文字がたくさんあってわかりにくいですが、ここも左寄せになっています。 |
| 真ん中 | 右寄せ | このセルには文字がたくさんあってわかりにくいですが、ここも右寄せになっています。 |
このようにnowrapを指定したセルは改行しないで済む幅に自動的に広がっています。
しかし、もし、widthで幅を指定していたら、nowrapを指定してもwidthで指定した方が優先されます。
つまり、
<td width="100" nowrap>このセルには文字がたくさんあってわかりにくいですが、ここも左寄せになっています。</td>
とした場合、nowrapよりもwidth="100"が優先されて、実際には改行されてしまいます。
alignでは、左右の位置を指定できました。
セル内の上下の位置を指定できる属性もあります。
valign="top"はセルの中身を上に寄せます。
valign="middle"はセルの中身を真ん中に寄せます。
valign="bottom"はセルの中身を下に寄せます。
このように使います。
|
<table border="1" width="300" align="center">
<tr align="center" valign="top">
<td width="100">真ん中</td>
<td width="100">真ん中</td>
<td width="100">真ん中</td>
</tr>
<tr>
<td align="center" width="100" valign="bottom">真ん中</td>
<td width="100" valign="top">左寄せ</td>
<td width="100">このセルには文字がたくさんあってわかりにくいですが、ここも左寄せになっています。</td>
</tr>
<tr>
<td align="center" width="100" valign="top">真ん中</td>
<td align="right" width="100">右寄せ</td>
<td align="right" width="100">このセルには文字がたくさんあってわかりにくいですが、ここも右寄せになっています。</td>
</tr>
</table>
|
実際に表示すると・・
| 真ん中 |
真ん中 |
真ん中 |
| 真ん中 |
左寄せ |
このセルには文字がたくさんあってわかりにくいですが、ここも左寄せになっています。 |
| 真ん中 |
右寄せ |
このセルには文字がたくさんあってわかりにくいですが、ここも右寄せになっています。 |
こんな感じです。
valignを指定しなければ、valign="middle"を指定したのと同じ結果になります。
ＰＣ−ＰＡＲＫトップに戻る
２３．ＨＴＭＬでホームページを作る。属性編・・その他の属性
心の話サイコロＴｏｗｎ！へ