初心者HTML講座：テーブルセルの連結

　テーブルタグでレイアウトするときには必須だ！　テーブルセルの連結はこれまた結構ややこしいと思うので(初心者には特に…えっ僕だけ？)、まずはノートかなんかにどのように枠を区切るのかを描いてから、テーブルタグがどのくらい必要かを考えた上でパソコンに入力することをお勧めいたします。そうでないと結構無駄な労力がいりますよ･･････。以下を見れば、なるほどって思うはず!?

　テーブルセルの連結ってどういうもんか説明するのを忘れていました!?(すみません)　　マイクロソフトの表計算ソフトのエクセルを利用したことがある方なら分かりやすいと思います。セル(表の一つ一つの部分ちょうどこんな白い四角の「□」)がテーブルの枠に似ていますね。あれも連結ができるので、ちょうどエクセルのような感じですよ。よーし、では実際にどんなものか見てみましょう！

連結させるためのプロパティは『tdタグ』の中に使います。具体的には <td rowspan="縦の行数">文字</td>、または<td colspan="横の列数">文字</td>っという風になります。

もうわかっちゃったと思いますが、一応…。

縦(行)の連結の際に使うのが『 rowspan="縦の行数"』

横(列)の連結に使うのが『colspan="横の列数"』
二つのプロパティを使い分けます。もちろん二つ同時に設定することも可能です。でぇは、下で試してみましょう。まずは基本的なテーブル表から、表示しておきます。

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

ちなみにテーブルタグはこうなります。
<table width="300" border="1">
<tr>
<td>1列、1行</td>
<td>1列、2行</td>
<td>1列、3行</td>
</tr>
<tr>
<td>2列、1行</td>
<td>2列、2行</td>
<td>2列、3行</td>
</tr>
<tr>
<td>3列、1行</td>
<td>3列、2行</td>
<td>3列、3行</td>
</tr>
</table>

このテーブル表の(1列、1行)から(1列、3行)まで連結させてみましょう。

連結させました
2列、1行 2列、2行 2列、3行
3列、1行 3列、2行 3列、3行

ちなみにテーブルタグを表示するとこうなります。
<table width="300" border="1">
<tr>
<td colspan="3">連結させました</td>
</tr>
<tr>
<td>2列、1行</td>
<td>2列、2行</td>
<td>2列、3行</td>
</tr>
<tr>
<td>3列、1行</td>
<td>3列、2行</td>
<td>3列、3行</td>
</tr>
</table>

今度は(2列、2行)と(3列、2行)を連結させてみましょう

1列、1行 1列、2行 1列、3行
2列、1行 連結！ 2列、3行
3列、1行 3列、3行

テーブルタグを表示するとこんな感じになります。
<table width="300" border="1">
<tr>
<td>1列、1行</td>
<td>1列、2行</td>
<td>1列、3行</td>
</tr>
<tr>
<td>2列、1行</td>
<td rowspan="2">連結！</td>
<td>2列、3行</td>
</tr>
<tr>
<td>3列、1行</td>
<td>3列、3行</td>
</tr>
</table>

今度は行と列の両方を組み合わせて、連結してみましょう。えーと、(2列、1行)と(3列、1行)の行と(2列、2行)と(2列、3行)の列を連結してみますね。

1列、1行 1列、2行 1列、3行
行の連結 列の連結
3列、2行 3列、3行

テーブルタグは以下のようになります。
<table width="300" border="1">
<tr>
<td>1列、1行</td>
<td>1列、2行</td>
<td>1列、3行</td>
</tr>
<tr>
<td rowspan="2">行の連結</td>
<td colspan="2">列の連結</td>
</tr>
<tr>
<td>3列、2行</td>
<td>3列、3行</td>
</tr>
</table>

作成してて、疑問に思ったのですが、行と列を同時に連結する場合はどうしたらいいのでしょうか？試してみましょう。　えーと、(1列、2行)と(1列、3行)と(2列、2行)と(2列、3行)を連結してみましょう。

1列、1行 行と列を同時に連結してみました
2列、1行
3列、1行 3列、2行 3列、3行

テーブルタグはこんな風になりました。見たら、なるほどって感じがします。
<table width="300" border="1">
<tr>
<td>1列、1行</td>
<td colspan="2" rowspan="2">行と列を同時に連結してみました</td>
</tr>
<tr>
<td>2列、1行</td>
</tr>
<tr>
<td>3列、1行</td>
<td>3列、2行</td>
<td>3列、3行</td>
</tr>
</table>

初心者講座の管理人はテーブルタグがとてもとっつきにくいのですが……。あなたはいかがですか？説明が悪くてまだまだという方もいるでしょうねー。よくなるように更新の努力をしていきますよー。共に頑張ろう♪

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