個別記事のページです

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の常識
過度な営業は一切しておりません。

簡単無料お見積もり

問い合せ内容 見積り  相談  更新管理  PPC広告・SEO対策
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
内容
お問合せ