パソコンと赤い観葉植物

table要素で表を作る

表を作る

table要素にはこんなものがあります

表を作成する時はtable要素を使います、table要素は単体では機能しません。

子要素の「tr要素」や「td要素」とセットで使用します。

tr要素は行を表し、この要素に挟まれた項目を横に並ばせることができます。
行は一行で完結するので、行の数だけ「tr要素」を記述します。

td要素はセルを表しこの要素に挟まれた項目を一つのセルとして扱います。

他にもこのような要素が

th要素これは見出しを表すセルになります。

thead:ヘッダー部分になる行を表します。

tbody:表のメインになるグループの行です。

tfoot:表のフッター部分になる行です。

caption:表の見出しや説明に使用します。

trやtdを使って簡単な表を作る

<table>要素で簡単な表を作ってみましょう、htmlに<table>要素で囲んだ中に<tr>要素これは1列の行を指定します、その中に<th>要素が見出しを表し、<td>要素が一つのセルを表しています。

この記述をブラウザで表すと下の画像のように文字だけが現れた形になります。

文字だけでは表になっているか分からないので、tableタグにborder="1"を記述して枠の所に線を入れてみます。

線が二重になりました、これはtableとthやtdのborderの線が表示されて二重の線になっています。

これを一本の線にするのは「dorder-collapse」を使用します。

このように「th要素」を使うと見出しに指定されるので文字も強調された文字になります。

<th><td>要素の中に何も記述しないと空白のセルになります。

二段の表を作ってみよう

表を複数段にするには<tr>要素で囲んだものを増やしていくだけです。

<tr>要素で囲んだ中に<p>要素を記述して、記述したものがどのように表示されるかを見てみましょう。

htmlに二段目の表を作るための記述をします。

表の中には表示されずに、枠外に表示されます。

二段の表ができました

表に見出しや説明をつける

caption要素を利用する

table開始タグの後に「capution要素」を記述してその中に表の見出しや説明を記述します。

csption要素を利用して表に説明文をつける

capution要素以外のものではどうなる

表の説明などでは「capution要素」を利用します、試しに<p>要素で記述してみると

表から離れた、表とは関係のないような感じになっています、「capution要素」で記述されている文字は表の中心に配置され表の説明書きのようになっています。

セルを結合してみよう

セルを横方向に結合するcolspan

セルを横方向に結合する時には「colspan属性」を使用します、横方向に結合するセルの数を指定します。

2行目の2個目の<td>にcolspanと結合するセルの数を記述します。

黄色のセルが二つ分結合されています。

セルを縦方向に結合するrowspan

セルを縦方向に結合する時は「rowspan属性」を使用します。

1行目の3番目の<td>にrowspan="2"と記述します。

3列目のオレンジの列で縦2つのセルが結合されています。

このように「rowspan」を使ってセルを縦方向に結合できます。

セルをグループ化してみよう

セルをグループ化するcolgroup

colgroupを使うと一つ以上の列をグループ化することができます、グループ化の指定を行うとグループ単位でスタイルを設定出来たりします(セルの幅や背景色などが設定可能)

指定の方法その1 開始タグの中に記述

指定方法はcolgroup開始タグの中にspan属性で指定するか

colgroup開始タグに中に「id属性」でCSSで装飾できるようにして「span属性」で列数を指定しています。

CSSで二つの列をグループ化して色を付けています。

指定の方法その2 colgroup要素の中に記述

colgroup要素の中にcol要素を使って、記述していく方法があります、指定の方法は<col>のみでは一列の指定になり、span属性を使用して複数列を指定します。

<col span="2"> これで2列を指定したことになります。

一列目をグループ化して、2列目3列目の二つの列をグループ化しています。

混在すると上手く表示されない

colgroupタグの中に書いたり要素の中に書いたりと混在すると表示が正しく行われません。

colgroup要素の中にspan属性で列を指定してCSSで装飾をした場合(col要素はコメントにしています)

このように背景色を指定すると

このような結果になりますが。

その後に「col要素」で記述すると後から記述したものが反映されて

このような結果になります、CSSが無効になって後から記述した色になっています。

タグ内、要素内に記述する時は必ず分ける

colgroupタグ内に記述する場合と要素内に記述する場合は必ず分けて記述をしないといけません。

上の2列はタグ内に記述しています、下の2列は要素内に記述をしています、このような記述の仕方は間違いやすいので要素内に同じように記述をする方がいいと思います。

高度な表も作れる

table要素の中で行をグループ分けする

tableの子要素の中には行をグループに分けてくれる役割をする要素があります。

HTMLの要素にもあるheadやbody、footerのような意味合いで使用する「thead要素」「tbody要素」「tfoot要素」があります。

thead要素は表の先頭で見出し的な働き
tbody要素は表のメインとなる内容を
tfoot要素は表の下部で内容のまとめ的な意味に使用します。

CSSで装飾する時に便利

表の見た目には変化はありませんが、表の構造が明確になりCSSを使って装飾を利用する時に便利です。

table要素の中にthead要素、tbody要素、tfoot要素をそれぞれ記述します。

テーブルのヘッダー部分のボーダーに色を付ける

theadだけCSSで色を付けています。

それぞれ独立した行になるのでそれぞれの装飾が可能でやり易くなります。

赤に色が付いた表

最後の表は文字の周りに余白があって読みやすいように感じませんか?

これは文字の周りにパディング(余白)を設定していたからです。

table要素で表を作る

Table要素を使って表を作るのは簡単です、皆さんも是非作ってみて下さい。

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

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事