個別記事のページです

2014年10月 1日(水)
このエントリーをはてなブックマークに追加

テーブルタグの行の考え方について

htmlのテーブルタグについて、分かっているようで
いざ説明しようとしたらあれ...?となってしまった事があり、
もしかしたら同じような事を疑問に思っている方が
いらっしゃるのではないかと思いまとめてみました。

市販のホームページ作成ソフトでは「表を挿入」という便利な機能があって、
行数や列数を指定したら自動的にテーブルタグを生成してくれますが、
だからこそコードの1つ1つの意味を知らずに使い続ける事もしばしば。

今回はソフトで「3行、2列」という指定でテーブルを作りました。
20141001_01.gif
<th></th>は見出し用のセルで項目名などを入れ、
<td></td>は見出し(項目名)に対するデータや内容を入れます。

それでは、余った<tr></tr>は何を指しているのでしょうか。
<th>と<td>は1つのセルを表すのに対し、
<tr></tr>は1行を表しています。

上記では「会社名」と「テスト株式会社」の2つが1行に収まっているので、
コードでは<tr></tr>の中に<th></th>となっています。

そして、以下のように<tr></tr>内に<td></td>が多い程
テーブルの列が増える事になります。
列数が多いテーブルタグのサンプル

応用として、セルを結合するコードを使い、上の1行目は1列、
2行目は2列以上...というテーブルを作ることもできます。
セルを結合して作ったテーブルのサンプル
こちらの例の場合、下に5列あるので1行目には「セルを5つ結合する」
という意味で「colspan="5"」と入れています。

結合するセルの数の指定が間違っていると以下のように
おかしな見た目のテーブルが完成してしまいます。
結合するセルの数を間違えたテーブルのサンプル

また、「colspan="5"」のように結合するセルの数を指定したとしても
<tr></tr>が正しく入っていないと認識されないので注意が必要です。
trが足りないテーブルのサンプル

テーブルタグは苦手...という方も「tr」=行であると覚えていますと
段々慣れてくると思いますので、是非お試しください。

書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。
お問合せ