ホームページ作成Fの業務での気づきをスタッフが毎日更新しています

サイトマップ
ヘッダー画像

中小企業の売上の上がるホームページ作成をしています。

ホームページ作成会社F日記
テーブルタグの行の考え方について

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

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

今回はソフトで「3行、2列」という指定でテーブルを作りました。
何も指定しないで作ったテーブルタグのサンプル
<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」=行であると覚えていますと
段々慣れてくると思いますので、是非お試しください。


日時:2014/10/01    08:27