HTMLのtable要素

2020年10月14日

フロントエンド

だいぶ前にフォームについてまとめましたがtableもなかなか使わずに忘れてしまっているので復習と備忘録を兼ねてまとめていきます。

tableの基本的な構造

いきなりですがtableの基本的な使い方をコードで書いていきます。

それではこちらのコードを参考にしながら解説していきます。

表を作るにはまず、table要素で全体を囲みます。次に、tr要素を使って横の1行を定義します。そしてそのtr要素の中にth要素(表の見出し)やtd要素(表のデータ)を入れます。

CSSでは、border-collapseというプロパティがあまり見慣れないかもしれません。このプロパティは表の枠線を、collapseを指定して今の状態のように重ねて1本の線だけで表示するか、separateを指定して間隔をあけて表示するかを選べます。言葉だけだとわかりにくいので実際にCSSを書いてみるのがいいと思います。

表のタイトル

caption要素を使って、表を簡単に表すタイトルを表示させつことができます。caption要素は、table要素の開始タグの後ろに記述します。

以下が例になります。

上記のように表のすぐ上に表示されます。とくにCSSで指定しなければ中央ぞろえになります。アクセシビリティのことを考えるとあったほうがいいみたいです。

グループ化

列のグループ化

表の列をグループ化できるcol要素とcolgroup要素があります。列のグループ化をすることでまとめてCSSをかけたりすることができます。tableは行でひとまとまりになっているのでcol要素とcolgroup要素をつかわないと列でまとめてCSSはかけれないみたいですね。

以下が例になります。

col要素をcolgroup要素で囲まないといけません。また、col要素にはspan属性が指定でき、何列グループ化するか数値で指定できます。今回は1を指定しているので最初の1列だけ背景色がついていますね。2を指定すると2列CSSがかかるようになります。caption要素の下に記述します。

行のグループ化

続いて行のグループ化についてです。行のグループ化はthead要素、tbody要素、tfoot要素でできます。HTMLを理解しているならhead、body、footで何となくどこの要素を指しているのかわかるかと思います。

以下が例になります。

一番上にthead要素を、次に少し不自然な感じがしますがtfoot要素を入れます。その下にtbody要素を入れます。そうすると上の例のように3つにグループ分けができるようになります。

まとめ

ざっと基本的なtable要素の使い方をコードを書きながらまとめました。グループ化したりすると少し複雑になってくるので注意ですね。またHTML/CSSの基礎的なことも抜けてたりするのでしっかり復習して完璧にマスターしていきたいですね。

Pocket

related

Markdown記法備忘録

前回の記事でHexoを使ってサイトを制作しましたが、そのサイトの記事を書いていくには、Markdown記法を使う必要があります。いつもWordPressのGUIで記事を更新している私にとってはあまり馴

フロントエンド

2020.09.13

jQueryのeachメソッドの使い方

jQueryでは複数の要素に対して繰り返し処理を行う場合にeach()を使うことができます。そのeach()を使いこなしたていきたいので今回しっかりまとめていきます! eachメソッドって何? そもそ

フロントエンド

2020.06.10

gulpでsassのコンパイルするための環境構築

今回は、gulpでsassをコンパイルするために環境構築したので、まとめていこうと思います。Macで環境構築したのでMacでの手順でまとめていきます。とはいえほとんどWindowsも変わらないので同じ

フロントエンド

2020.08.22

GitHub PagesとNetlifyでポートフォリオを公開してみた

今回は無料で静的サイトを公開できるGitHub PagesとNetlifyでポートフォリオを公開してみたので手順やメリットなどについてまとめていこうと思います。下記のURLが公開したポートフォリオです

フロントエンド

2020.09.09

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き