初心者HTML講座：テーブルの基本タグ

　テーブルの基本タグをここで押さえておきましょー！　テーブルタグはその本来の用途で表作成以外にも、ホームページのレイアウト用としても使えるタグです。スタイルシート(CSS)では微調整が難しいことやブラウザにより、表示が違ったりすることがあるので、テーブルタグでレイアウトするという方も多いはず!?　
ちなみに管理人は大まかなレイアウトはスタイルシート(CSS)で分けて、こまかい微妙な距離などを保つレイアウトはテーブルタグを使うというふうに分けて使ってます。

・テーブルタグの基本構成
　<table><tr><td>テキストや画像</td></tr></table>

表作成、レイアウトと便利に使えるテーブルタグですが、管理人は結構苦手なタグです。……記述が大変というのが、苦手な理由なんですが!?ソースコード上ではブラウザでどう表示されるかはっきりわからないために何度もやり直したもんです。では早速いきましょう。管理人が苦手なので、タグ一つずつから解説を行います(笑)

<table>〜</table>はテーブルタグの一番外側の部分ですね。これでテーブル全体を現します。波線の部分には‘行’と‘列’のタグが入ります。

<tr>〜</tr>は‘列'つまり‘横の一列’を現します。波線の部分には‘行’のタグが入ります。

<td>〜</td>は‘行'を、つまり‘縦の一行'を現します。波線の部分には文字や画像などが入ります。

実際に表を作ってみましょう！

1列、1行 1列、2行
2列、1行 2列、2行

この表はタグでみるとどんな風になっているのでしょうか。みてみましょう！

<table border="1">
<tr>
<td>1列、1行</td>
<td>2列、1行</td>
</tr>
<tr>
<td>1列、2行</td>
<td>2列、2行</td>
</tr>
</table>
ややこしいのが、『tdタグ』の方でしょうか。『tdタグ』同士は横にもってくるようにすれば、表と重ねてみることが出来るので、見やすくてわかりやすいと思うのです。しかーし、なぜか独学した際になぜか上記のようになっていました…なぜ？いまだになぞはとけていません。　慣れるまではなかなかややこしいと思います！

テーブルタグの中にある、『border="数値"』、例の場合は数値が１になっていましたね。この数値を大きくすると枠の線が太くなります。 この数値を‘0'にすると枠線は見えなくなります。テーブルタグを使ってレイアウトするときは数値を0にします。

HTMLタグのよくある間違い！

HTMLタグは必ず半角英数字で入力してください。

　HTMLタグはコピー・貼り付けでも大丈夫です。しかし、サイズ・カラーコード・アドレスなどの数字や文字を入力する場合に半角英数字以外の文字で入力すると正しく表示されないことやおかしな表示になることがあります(ほぼ表示されないと思います)

HTMLタグを入力する際は半角英数字ですが大文字と小文字の区別は特に気にしなくてもいいようです。

HTMLタグには開始タグと終了タグがあります。
例えば、<Font Size="1〜7">〜</Font>　最初の<Font Size="1〜7">が開始タグといいます。後の/スラッシュが付いた</Font>が終了タグになります。　終了タグを入れ忘れた場合ページのレイアウトが崩れることがあり、さっきまで崩れていなかったのに突然崩れたって言う場合は終了タグが無くなったことを疑いましょう！

他にも、HTMLタグの『<>←カッコ』、『"←ダブル クォーテーション』やHTMLタグ内の記号・文字・数字などを消したり、スペースを空けたり・くっつけたり、改行したりするとブラウザがHTMLタグを正しく認識しないので注意して下さいね。

HTMLタグを複数使う場合。
例えば、
<u><font color="#FF0000">初心者講座</font></u>→初心者講座
これを開始タグ(又は終了タグ)の位置を入れ替えてみると正しく表示されません。試してみましょう。

<font color="#FF0000"><u>初心者講座</font></u>→初心者講座
『uタグ』の開始タグが外側なら、終了タグも外側でなければいけません。どのタグにも当てはまるので、気をつけましょう！(管理人のブラウザでは普通に表示されていますが、あなたはどうですか。表示されても間違いは間違いなので、気をつけてくださいね)

終了タグが抜けてしまってるなどが原因で思うようにブラウザに表示されないということがよくあるので、もう一度よく見直しみましょう！

HTMLタグは最初は見なれない文字や記号が多いので勉強し始めは意味が解らないと思います。でも、続けていくうちに読めるようになります。　あきらめずに少しずつ勉強していきましょうね！