back
コンテンツの基本要素 (2/5)
■テーブル
続いて、「テーブル」です。テーブルは、通常の<table>タグを使って作成します。が、テーブルに関するスタイルが用意されており、スタイルクラスを指定することでデザインを設定することができます。
このクラスは、<table>タグに指定するもので、以下のようなクラスが用意されています。
・テーブルの基本表示
基本のテーブルクラスと言えるでしょう。一般的なテーブルです。各行ごとに横線が入り、見やすくなっています。テーブル表示では、必ずこのクラスを用意します。
・ストリップ表示
・ボーダー表示
・ホバー
これらは、基本のtableクラスに、必要に応じてその他のクラスを追加して使います。例えば、<table class="table table-bordered table-hover">とすれば、テーブルを表の形で表示し、更にマウスポインタのある行を目立たせるようになります。
この他、特定の行やセル（項目）を目立たせるためのものとして、以下のようなクラスが用意されています。これらは、<tr>タグや<td>タグなどで使えます。
class="info" ――インフォメーション。ちょっとしたメッセージ表示など。
class="warning" ――注意・警告など、infoより目立たせる表示に使うもの。
class="success" ――何らかの動作が正しく終了したことを示すメッセージ用。
class="error" ――何らかの動作に失敗したことを示すメッセージ用。
これらを組み合わせてテーブルを作成します。下の利用例を挙げておきましょう。<table class="table">でテーブルを作成し、３つ目の<tr>タグにclass="info"を指定してあります。
このクラスは、<table>タグに指定するもので、以下のようなクラスが用意されています。
・テーブルの基本表示
<table class="table">
基本のテーブルクラスと言えるでしょう。一般的なテーブルです。各行ごとに横線が入り、見やすくなっています。テーブル表示では、必ずこのクラスを用意します。
・ストリップ表示
<table class="table table-striped">表示される偶数行と奇数行で背景色を変えるストリップ表示です。table-stripedクラスを追加します。
・ボーダー表示
<table class="table table-bordered">いわゆる「表」です。全体を四角い枠で囲み、各項目ごとに罫線を引いて表にしたものです。able-borderdクラスを追加します。
・ホバー
<table class="table table-hover">マウスポインタのある行の背景を変えて目立たせるためのものです。table-hoverクラスを追加します。
これらは、基本のtableクラスに、必要に応じてその他のクラスを追加して使います。例えば、<table class="table table-bordered table-hover">とすれば、テーブルを表の形で表示し、更にマウスポインタのある行を目立たせるようになります。
この他、特定の行やセル（項目）を目立たせるためのものとして、以下のようなクラスが用意されています。これらは、<tr>タグや<td>タグなどで使えます。
class="info" ――インフォメーション。ちょっとしたメッセージ表示など。
class="warning" ――注意・警告など、infoより目立たせる表示に使うもの。
class="success" ――何らかの動作が正しく終了したことを示すメッセージ用。
class="error" ――何らかの動作に失敗したことを示すメッセージ用。
これらを組み合わせてテーブルを作成します。下の利用例を挙げておきましょう。<table class="table">でテーブルを作成し、３つ目の<tr>タグにclass="info"を指定してあります。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap</title> <script src="./js/jquery-3.1.1.min.js"></script> <script src="./js/bootstrap.min.js"></script> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/bootstrap-theme.min.css"> </head> <body > <div class="container"> <div class="row"> <div class="col-md-12"> <div class="page-header"> <h1>コンテンツの表示</h1> <h2 >テーブル</h2> </div> <table class="table"> <thead> <tr> <th>No</th> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>SYODA-Tuyano</td> <td>syoda@tuyano.com</td> </tr> <tr> <td >2</td> <td>Yamada Hanako</td> <td>hanako@flower</td> </tr> <tr class="info"> <td>3</td> <td>Tanaka Sachiko</td> <td>sachiko@happy</td> </tr> </tbody> </table> </div> </div> </div> </body> </html>
| << 前へ | 次へ >> |