『Bootstrap4入門』テーブル【Udemyで学習】

www.youtube.com

このレクチャーでは、Bootstrap4のテーブルについてお話しします。

まずは、Bootstrap4の公式ページでテーブルの書式設定を確認したいと思います。

公式ページを開いたら、左メニューでContentのTablesをクリックします。ご覧の通り、table要素にtableというクラスを適用するだけで、Boostrap4は表を見やすい形に書式設定してくれます。

少しtableクラスのバリエーションを確認しましょう。

tableクラスに加えて、table-darkクラスを適用すると、色を反転して暗めのテーブルとなります。

また、thead要素にthead-lightクラスを適用すると、明るめの表見出しとなります。学習用アプリケーションPMMSではこのthead-lightクラスを使用します。

table-stripedクラスを適用すると交互に行の色が変わります。

また、table-hoverクラスを適用すると、tbody内のテーブル行でマウスオーバによるホバー状態が有効になります。学習用アプリケーションPMMSではこのtable-hoverクラスを使用します。

また、table-smクラスを適用することで、セルのpaddingが通常の半分となり、少し行間が狭いテーブルになります。学習用アプリケーションPMMSではこのtable-smクラスを使用します。

その他、罫線の無いテーブルの指定方法や、行やセルの背景色の指定方法などが紹介されています。

Bootstrap4で、見やすいテーブルを簡単に作成することができることをお分りいただけたと思います。

それではさっそく学習用アプリケーションのテーブルを作成していきましょう。

まずは、テーブルの骨格を作成します。 jumbotronの下で、.container>table>tbody>tr*10>td*6とタブキーをタイプしてください。 tdを6個含んだtrを10行、簡単に作成することができました。

ここでで完成系のHTMLソースを参照して、tdの中身や属性を入力しましょう。完成形は https://zunda-lab.github.io/Bootstrap4Sample を参照してください。追加するとご覧のようなHTMLになります。ご覧の通り、罫線なしのテーブルになっていることがご確認いただけると思います。

それではここでtable要素にtableクラスを追加してみましょう。 tableクラスを適用しただけで横罫線が表示されたことをプレビューでご確認いただけたと思います。

次に、table要素にtable-smクラスを追加します。パディングが狭くなってコンパクトで見やすい表になったと思います。

次に、table要素にtable-hoverクラスを追加します。プレビューの行にマウスオーバしてみましょう。背景色が変化することがお分りいただけると思います。マウスカーソルがどの行にあるか分りやすくなりました。

次は、見出し行を追加します。tbody行の上で、thead.thead-light>tr>th*6とタブキーをタイプしてください。thを6個含んだtrを、簡単に作成することができました。完成形のHTMLソースを参照し、thの中身や属性を入れてください。追加するとご覧のようなHTMLになります。

最後に、ページ送りを追加します。まずは、Bootstrap4の公式ページでページ送りの書式設定を確認したいと思います。公式ページを開いたら、左メニューでComponentsのPagenationをクリックします。ここでページ送りの様々なバリーションを見ることができます。学習用アプリケーションでは記号を使用したシンプルなページ送りを使用しています。ここでCopyボタンをクリックして、table要素の終端の次に貼り付けましょう。aria-labelやsr-onlyはスクリーンリーダー用の指定です。

これで、学習用アプリケーションのテーブル要素は完成です。

最後にブラウザでindex.htmlを確認しましょう。このように、Bootstrap4を利用すると、見た目に優れたテーブルを簡単に作ることができることを実感いただけたと思います。

以上で、Bootstrap4のテーブルの解説を終わります。