グループ化する要領には!

table要素で作った表をcolgroup等を使いグループ化する
  • thead・tbody・tfoot要素を使う方法
  • colgroup要素を使う方法

thead・tbody・tfoot要素を使う方法

table要素の中に行をグループ分けできる要素を入れてやる方法です、表の中の見出し的な役割のthead要素、表のメインとなるtbody要素、表のまとめてきなtfoot要素があります。

作成した表の見た目的には変化がありませんが、CSSを使って装飾をする時に便利です。

thead・tbody・tfoot要素を使って記述してみる

tableの開始タグの中のborderは枠を付けて見やすくしているだけでCSSで装飾する時は削除します。

表をマークアップするためのhtmlの記述

thead要素の部分、tbody要素の部分、tfoot要素の部分にそれぞれth(見出し)やtd(セル)を記述します。

ブラウザに表示するとこの様な表になります。

表のブラウザの表示画像

この表で一番上の行と左端の列が見出しになっています、見出しのセルの色を変えたい時にCSSの記述に「th(見出し)」と記述して色を指定すると

背景色を付けるためのCSSの記述

表のすべての見出しの色が指定した色に変わります。

見出しをCSSで装飾した表の表示画像

個別にCSSで装飾をする

一番上の行だけを指定したい場合には先ほど記述したtheadをCSSに追加して記述すると

theadのth要素のみに装飾をする記述

この様にtheadの部分だけが指定されています、CSSでthead、tbody、tfootなどを指定すれば個別に装飾が可能になります。

theadのみ指定された画像

colgroup要素を使う方法

美しい十勝の山

colgroup要素は表の列をグループ化する要素ですtable要素の子要素として使用します.

記述の要領

  • 開始タグ内に記述する
  • 要素内に記述する

開始タグ内に記述する方法

開始タグに記述する方法には、下の様にタグ内にspan属性を記述します、ダブルクォーテーション間の数字は列数を表します。

<colgroup span="1"></colgroup>
<colgroup span="2"></colgroup>
<colgroup span="3"></colgroup>

上の記述は六列の表を三つのグループに分けています(1が一列、2が二列、3が三列)、colgroup要素を使用すると一つ以上の列を意味的なまとまりにします

colgroup要素を使った記述の例

クラス分けをするとクラス単位でCSSでスタイルが指定できるようになります、一部のプロパティは使用できませんがセルの幅や背景色などが指定可能です

背景色を指定した記述

要素内に記述をする方法

<colgroup>要素内に<col>要素を使って記述していきます。

colgroup要素のcol属性を使った記述の例

<col>だけでspanを省略した場合は1列のみの指定になります。

col属性の記述の例

span属性を指定することで複数の列を指定することができます、<col span="2">とすると2列を指定したことになります。

タグ内と要素内は別々にする

タグ内に記述する場合には終了タグで必ずその列は終了することが重要です、列ごとにタグ内や要素内と記述はできますが混在させると間違いの原因になると思います。

colgroupのタグ内と要素内の記述の例
ブラウザに表示された表の画像

行と列の色を指定してみる

thead要素やcolgroup要素を使うとこの様な色を表に指定できます。

行と列の背景色を指定した表の画像

色んな事を試してみるのも面白いと思います。

セルを結合するやり方については

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事