皆さんこんばんにちは、ユウです。
HTMLのタグ紹介の第7回目となります。
他の回の記事については以下にリンクを張っておくので興味がある方は、そちらも見て下さると嬉しいです。
今回は table タグ（表）について紹介していきたいと思います。
表を作れるようになると、わかりやすいWebページを作成することが出来ます。
ですので、この記事を読んで少しでも表の作り方について理解してもらえればなと思います。
今回は一通り説明した後に、使用例を載せているので、最後まで見てもらうと理解が深まるのではないかなと思います。
それでは、紹介していきたいと思います。
<table> テーブル（表）を作成
| ～は | ～の | ～を | ～のもの | |
| 私 | I | my | me | mine |
| あなた | you | your | you | yours |
| 彼女 | she | her | her | hers |
こうゆうのですね。
表を書いていくうえで基本的なタグとなります。
この table タグの中にタグを書いていくことで表を作っていきます。
表を作りたい際には、まずこのタグを書いてから始まります。
<caption> 表に見出しや説明をつける
表についての見出しや説明をつける際に使用します。
このタグは table タグの中身に入れていくのですが、その中でも一番上に入れておく必要があります。
caption タグの中には p タグを入れる事も可能で、表に対しての補助的なテキストを入れる事が出来ます。
<colgroup> 表の縦列をグループ化
表の縦列をグループ化する際に使用します。
このタグを使用すると表の一つ以上の縦列をグループ化することが出来ます。
それをグループ化することによって、グループになった縦列全体に属性やスタイルを指定できるようになります。
このタグには span 属性が指定できます。
この span 属性の値にグループ化させたい縦列の数を指定します。
この値は0よりも大きい正の整数となります。
colgroup タグには配置場所がある程度決まっており、 caption タグと theadタグ や tr タグの間に置きます。
<col> 表の縦列に属性やスタイルを指定
表の縦列に属性やスタイルを指定する際に使用します。
このタグは colgroup タグの中に配置します。
colgroup タグの span タグの値が指定されていないときに col タグを中に配置することが出来ます。
colgroup タグの span タグに値が入っていてグループ化されていると配置することは出来ません。
col タグは表の縦列をグループ化はしません。
しかし、複数の縦列に対して同じ属性やスタイルをまとめて指定できます。
ここが colgroup タグとの違いです。
グループ化して属性やスタイルを変更するのが colgroup タグ、個別にするのが col という感じでニュアンス的でも良いので覚えておきましょう。
col タグにも span 属性が指定できます。
属性やスタイルを指定する縦列の数を指定していきます。
span 属性の値は colgroup タグと同様に0よりも大きく正の整数となります。
<thead>, <tbody> ,<tfoot> 表を明確にし管理
表の head 部分、body 部分、foot 部分を明確に定義することが出来ます。
これを指定しておく事によって、テーブル構造が分かりやすくなり管理しやすい。
これらのタグの記述は必須ではないですが、管理のしやすさから言うとできるだけ書いていた方が良いです。
thead タグは必ず tbody タグと tfoot タグよりも前に書いておくようにしましょう。
thead タグと tfoot タグは各 table タグに1つずつですが tbody タグは複数個書いても大丈夫です。
また、tfoot タグにおいては書かなくても良いです。
<tr>, <td>, <th> 表の行を作成
tr タグは table row の略で横1行を作成してくれます。
td タグは table data cell の略で tr タグで定義した行内にデータセルを作成していきます。
th タグは table header cell の略で見出しセルを作成することが出来ます。
おさらい＋α・・・テーブルの基本的な構造
table タグの中に tr タグで横1行を定義して、さらにその中に th タグや td タグで中身を書いていきます。
テーブルは行（横）とカラム（縦）を持っていますが、からの行やカラムを持つことは出来ません。
テーブルの各セルには見出しを定義するヘッダセル（ th タグ）とデータを定義するデータセル（ td タグ）がある。ヘッダセルの中のテキストは太文字でセンタリング（中央寄せ）されて表示される。
テーブルの見出しなどは、caption タグで指定します。
各テーブルのヘッダ、ボディ、フッタは thead, tbody, tfoot タグで定義します。
table タグには summary 属性が使用できます。
この属性は表の目的や構造をわかりやすくするための説明・要約を付け加えることが出来るものです。
これを使う際に気をつけなければいけないことは、表を見るユーザーが理解しやすいかどうか考えて作らなければなりません。
＜使用例＞
See the Pen
qBWgXQj by 悠(人) (@yutohanabusa)
on CodePen.
最後に
今回は表を作るためのタグについて紹介してきました。
見やすい表を作ることが出来ると、Webページ全体が見やすくなっていき、よりよいWeb制作が出来ます。
今回紹介した表を作るタグは非常に便利なので、簡単なものから作っていき、徐々にでも良いので理解するようにしていきましょう。
今回はこれで以上になります。
最後まで読んでいただきありがとうございました。
