テーブル

HTML超入門!押さえておきたいマークアップの基本
JavaScriptでプログラミングの基本的概念を学ぼう!
Webページに動きをつけるプログラミングを学ぼう!
Javaマスターへの第一歩!プログラミングの基本を学びましょう!
ライン公式アカウント
オンラインレッスンのお得なクーポン配信しています!
このチャプターの目次

テーブル

テーブルは表形式のデータを表示する際に使うタグです。

table tr td th caption

用途
書式サンプルソース参照
  • 表形式は、行と列から成り立っています。HTMLタグで表す場合、全体を表すためにタグが使用されます。
  • 行はタグで表されます(table rowの略)。
  • 列はタグで表されます。HTMLタグでは、列ではなくセルを表すものになります(table dataの略)。tdタグはtr要素の子要素として使用されます。trタグ内に、セルの数だけtdタグを記述します。
  • セルの値を見出しとしたい場合は、タグを使います。ブラウザで表示すると、見出しは少し太字になります(table headerの略)。
  • 表自体に見出しを付けたい場合には、タグを使います。

サンプルコード1

表形式の表示でよく使う属性について説明します。
  • rowspan属性
    • セルを縦に結合したい場合に使用する属性です。"rowspan"の"row"は行という意味です。属性=値という形で書きますので、というように書きます(2つのセルを結合する場合)。この属性はtdタグの中に書きます。
  • colspan属性
    • セルを横に結合したい場合に使用します。"colspan"の"col"は"column"の略で、列を意味します。例えば、のように書きます。この属性も、tdタグ内に書きます。

サンプルコード2