ぱたぱたアニメ館◆ テーブルタグ、何も指定しない時の表示
<table border="1"> <tr> <td></td> <td></td> </tr> </table>
このセルの中に文字を入れたり画像を入れたりします。（セルとは、一つ一つのマス目のこと） 幅や高さを指定してない時は、表示可能領域いっぱいまで使えます。内容は、表示可能領域の端まで来ると自動的に折り返されます。↓
| ああああああああああああああああああああああああああああああああああああああああああああああああああ | いいいいいいいいいいいいいいいいいいいいいいいいいいいい |
◆ テーブルタグの位置指定
表は何も指定していなければ左に寄ります。表の位置を中央、右寄せにするには、align属性を使用します。
<table border="1" align="center">
<tr>
<td></td>
<td></td>
</tr>
</table>
align=""に、left（左、デフォルト）center（中央、センタリング）right（右）のいずれかを指定します。
// HTML5において、table要素におけるalign属性は廃止されました。指定するならスタイルシートになります。 //
◆ 幅と高さを指定してみよう
次に、幅300px（width="300"）と高さ120px（height="120"）の表を作ってみます。 幅や高さは、表示可能領域の大きさに対する割合％でも指定できます。
<table border="1" width="300" height="120"> <tr> <td></td> <td></td> </tr> </table>
大きさをピクセル単位で指定してます。横幅はwidth、高さはheightで指定します。指定した300pxを等分割してセルが表示されています。 300pxの幅までしか文字を打ち込んだり、画像を入れたりは出来ません。
表示可能領域の大きさに対する割合で指定してみます。width="50%" height="30%" （ここの表示ボックスは縦100pxに指定していますので、表は100pxの30%の高さで表示されます。表示ボックスの上下には30pxの余白もあります。）
<table border="1" width="50%" height="30%">
<tr>
<td></td>
<td></td>
</tr>
</table>
// HTML5において、table要素におけるwidth属性は廃止されました。指定するならスタイルシートになります。 height属性については、td要素で指定する方が望ましいです。 //
◆ 列や行を増やしてみよう
表の列を増やしたい時は<td></td>、行を増やしたい時は<tr></tr>を挿入します。 表に１列１行増やしたら下記のようなソースになります。枠線borderも10pxに指定してみました。 （こちらも表示ボックスは縦100pxに指定しています。表示ボックスの上下には30pxの余白もあります。）
<table border="10" width="50%" height="30%"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
// 前ページにも書いてますが、HTML5において、table要素におけるborder属性は"1"の指定のみ許されています。 //
◆ セルごとに横幅を決めてみよう
セルの横幅を少し変えてみます。<td>タグにも％で指定できます。その場合、その表に対する割合 （ここでは300pxに対して）になります。表示例はピクセル単位で指定しています。
<table border="1" width="300"> <tr> <td width="70"></td> <td width="200"></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
// HTML5において、td要素におけるwidth属性は廃止されました。指定するならスタイルシートになります。 //
◆ セル内の文字を揃えてみよう
文字を揃える位置の指定は、横位置にalign属性を、縦位置にvalign属性を使います。 alignの属性値は、left、center、right、valignの属性値は、top、middle、bottom等があります。 何も指定しないときは左揃えになります。これらの位置関係は次の表の様になります。
| 位置関係 | align（横） | |||
|---|---|---|---|---|
| left | center | right | ||
| valign （縦） |
top | ☆ | ☆ | ☆ |
| middle | ☆ | ☆ | ☆ | |
| bottom | ☆ | ☆ | ☆ | |
// HTML5において、table要素におけるalign属性、tr要素、td要素、th要素におけるalign属性、valing属性は廃止されました。指定するならスタイルシートになります。 //
◆ テーブルの見出しタグを使ってみよう
<th></th>は見出し項目を付けたい時に使用します。 見出しに使いたい所を<th>タグに変えてください。（このタグは、自動的に太字の中央揃えになります。）
| 食べ物万歳！ | 肉 | 魚 |
|---|---|---|
| 私 | 牛 | 鮭 |
| ハニー | 豚 | 鰆 |
<table border="1" width="300" height="120"> <tr> <th>食べ物万歳！</th> <th>肉</th> <th>魚</th> </tr> <tr> <th>私</th> <td>牛</td> <td>鮭</td> </tr> <tr> <th>ハニー</th> <td>豚</td> <td>鰆</td> </tr> </table>
指定したセル内の文字だけを揃えたい場合は、<th>や<td>タグで指定します。 行全体の指定したい時には、<tr>タグで指定します。
// HTML5において、table要素におけるwidth属性は廃止されました。指定するならスタイルシートになります。 height属性については、td要素で指定する方が望ましいです。 //
◆ セル内の文字を中央に揃えてみよう
行全体の文字を中央揃えにしてみましょう。<tr>タグの中に半角スペースを空けてalign="center"を挿入します。 何も指定しない時には、文字が左に揃うことになります。
| あ | あ | あ |
| か | か | か |
<table border="1" width="300"> <tr align="center"> <td>あ</td> <td>あ</td> <td>あ</td> </tr> <tr align="center"> <td>か</td> <td>か</td> <td>か</td> </tr> </table>
// HTML5において、table要素におけるwidth属性、tr要素におけるalign属性は廃止されました。指定するならスタイルシートになります。 //
◆ セル内の文字の縦位置の指定してみよう
行全体の文字をセルの上と下に指定してみましょう。valign=""で指定します。 縦位置の場合は、中に挿入する文字よりもセルの高さが高くなるように指定します。
| あ | あ | あ |
| か | か | か |
<table border="1" width="300" height="100"> <tr valign="top"> <td>あ</td> <td>あ</td> <td>あ</td> </tr> <tr valign="bottom"> <td>か</td> <td>か</td> <td>か</td> </tr> </table>
// HTML5において、table要素におけるwidth属性、height属性、tr要素におけるvalign属性は廃止されました。 指定するならスタイルシートになります。height属性については、スタイルシートで指定するにしても、td要素で指定する方が望ましいです。 //
◆ テーブルに色をつけてみよう
枠線の色の指定にbordercolorを使用します。 枠線は少し大きくしてみます。（border="8"）各行やセルにも背景色の指定はできます。bgcolor=""で指定してください。 <th>や<td>はそのセルの背景色だけの指定、<tr>は行全体のセルの背景色の指定になります。
| 食べ物万歳！ | 肉 | 魚 |
|---|---|---|
| 私 | 牛 | 鮭 |
| ハニー | 豚 | 鰆 |
<table border="8" bordercolor="#33ccff"> <tr bgcolor="#66ccff"> <th>食べ物万歳！</th> <th>肉</th> <th>魚</th> </tr> <tr> <th>私</th> <td>牛</td> <td>鮭</td> </tr> <tr> <th>ハニー</th> <td>豚</td> <td bgcolor="#66cc99">鰆</td> </tr> </table>
（ブラウザによっては表示のされ方が違う場合があります。）
// HTML5において、table要素におけるborder属性は"1"の指定のみ以外は廃止となりました。bordercolor属性に関しては、あまり使われない方が良いでしょう。これらを指定するならスタイルシートになります。 //
ページの表示速度を少しでも早くする為に、画像においては、width、heightをきちんと指定してやる、 容量の大きな画像やテーブルを多用しない、タグを少なくする、入れ子を少なくする、このような点に気をつけてページ作りをしましょう。
HTML5によって廃止された属性が多いのですけど、HTML文書のみでホームページが作れる簡単さからこのページは残すことにしました。 まずは、細かいことを気にせずに作ってみることだと思います。これだけ覚えればスタイルシートもすぐに使いこなせるようになると思いますし。どうぞ、ホームページ制作頑張ってくださいね。＾＾
もっと勉強したいと思われる方はこちらへ行かれてみてね。→「とほほのWWW入門」
次は、[タグを使おう！<１>] です。
<tr align="" valign=""></tr> … 行単位の指定
<td align="" valign=""></td> … セル単位の指定
<th align="" valign=""></th> … セル単位の指定・文字は太字・中央揃え