JOHOBASEJOHOBASEプログラミング・データベース・Webなどの備忘録情報を中心としたナレッジベースフォローするプログラミングデータベースWebWindowsサイトマップホームWebBootstrapBootstrapのテーブル(Table)BootstrapBootstrapでテーブル(Table)を装飾する方法を紹介します。BootstrapはTwitter社が開発したCSSフレームワークです。Bootstrapではtableタグ(<table>)のclass属性に用意されているをクラスを指定するだけで、簡単にテーブルを装飾することができます。Bootstrapを導入する方法については、以下の記事を参照してください。まとめテーブルの設定ルールBootstrapに用意されているテーブルのスタイルを適用するには、class属性に「table」を指定します。class=".table">サンプルコード以下に.tableクラスを適用したテーブルの装飾例を記載します。次郎</td><td>jiro.joho@example.com</td><td>000-5555-6666</td></tr></tbody></table>ブラウザーでの表示テーブルの色を反転させるclass属性に「table-dark」を指定することで、テーブルの色を反転することができます。次郎</td><td>jiro.joho@example.com</td><td>000-5555-6666</td></tr></tbody></table>ブラウザーでの表示テーブルのヘッダーの色を設定するtheadタグ(<thead>)のclass属性にBootstrapに用意されているクラスを適用することで、テーブルのヘッダーの色を灰色にしたり、反転させたりすることができます。「thead-light」を指定すると灰色になり、「thead-dark」を指定すると色が反転します。(<tbody>内の<tr>)の色が交互に変わります。次郎</td><td>jiro.joho@example.com</td><td>000-5555-6666</td></tr></tbody></table>ブラウザーでの表示セルの罫線を表示するtableタグ(<table>)のclass属性に「table-bordered」を指定すると、セルに罫線を表示することができます。境界線の罫線を表示しないtableタグ(<table>)のclass属性に「table-borderless」を指定すると、テーブル、行、セルの罫線をなくすことができます。次郎</td><td>jiro.joho@example.com</td><td>000-5555-6666</td></tr></tbody></table>ブラウザーでの表示ホバー(マウスオーバー)時に行をハイライトするtableタグ(<table>)のclass属性に「table-hover」を指定すると、マウスがある行をハイライト表示することができます。明細の2行目にマウスカーソルを合わせた状態。セル内の余白(パディング)を狭くするtableタグ(<table>)のclass属性に「table-sm」を指定すると、セルのパディング(padding)が指定しないときの半分になります。行またはセルに色を設定するtrタグ(<tr>)またはtdタグ(<td>)のclass属性に色を表すコンテキスト「table-active」などを指定すると、行またはセルの色を設定することができます。class="table-dark">dark</td><td>ダーク</td></tr></tbody></table>ブラウザーでの表示テーブルの見出し(キャプション)captionタグ(<caption>)を使用するとテーブルに見出し(キャプション)を付けることができます。次郎</td><td>jiro.joho@example.com</td><td>000-5555-6666</td></tr></tbody></table>ブラウザーでの表示レスポンシブテーブルレスポンステーブルを使用すると、テーブルにスクロールバーを表示し、水平方向にスクロールさせることができます。レスポンシブテーブルを指定する際は、tableタグ(<table>)をラップする要素を用意し、class属性に「table-responsive」を指定します。ブラウザーの幅に対応したブレークポイントごとにレスポンシブテーブルを指定する場合は「table-responsive-sm」「table-responsive-md」「table-responsive-lg」「table-responsive-xl」を指定します。上記の例では「table-responsive-sm」を指定して、ブラウザーの幅がSmall以下の場合にのみスクロールするようにしているので、幅がMideum以上の場合はスクロールバーが表示されず、テーブルがブラウザーの幅をはみ出して表示されます。まとめ今回はBootstrapのテーブルの使い方をご紹介しました。Bootstrapのテーブルの装飾は、様々な形式が用意されているので、独自のスタイル(CSS)を定義しなくても、すぐに見栄えの良いテーブルのスタイルが適用できます。レスポンシブに対応するための定義も用意されているので、色々なデザインのWebサイトに柔軟に対応することができます。h1~h6)CSSフレームワークのBootstrapを使った見出し(ヘッダー)のスタイルを紹介します。本文中に使える体裁(タイポグラフィ)CSSフレームワークのBootstrapには文章を装飾するためのスタイルが用意されています。