初めての Twitter Bootstrap その２ 〜table編〜

こんにちは！ @taro_tnk です！

今日は昨日に引き続き、Twitter Bootstrap の table について勉強します。

※その１はこちら → 初めての Twitter Bootstrap　その１

基本形

まずは基本の形として、
以下のような html を準備します。

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>名前</th>
      <th>職業</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>田中太郎</td>
      <td>プログラマ</td>
    </tr>
    <tr>
      <td>2</td>
      <td>田中次郎</td>
      <td>デザイナー</td>
    </tr>
    <tr>
      <td>3</td>
      <td>田中小次郎</td>
      <td>大学生</td>
    </tr>
  </tbody>
</table>

上のソースに既にある通り、
table タグに .table をつけるだけでそれなりの見た目のテーブルができます。

詳しいカスタマイズは

http://twitter.github.com/bootstrap/base-css.html#tables

こちらに詳細に書いてあるので省きます。
それなりによさそうなものをピックアップします。

偶数行の背景色をグレーにする

table.table-striped を指定すると、
行の色が白、グレー、白、グレー... のように変更され、見やすくなります。

<table class="table table-striped">
  ...
</table>

これは見やすい。

テーブルを線で囲む

table.table-borderedを指定すると、
テーブルやセルを線で囲むことができます。

<table class="table table-bordered">
  ...
</table>

これもなかなか使えそうですね！

行を hover してるとき、その行の背景色を変える

table.table-hover を指定すると、
hover している行を目立たせることができます。

<table class="table table-hover">
  ...
</table>

これは上記の「偶数行の背景色をグレーにする」をしているとあまり目立たないので、
.table-striped は指定していない状態です。
どちらかがよさそうですね。

他にも

• 行の余白を狭くする
• エラー用に行の背景を赤にする、などの場合別背景色変更。

などなどありますので、
詳しくは公式のドキュメントを御覧ください。

とりあえず

まとめての Twitter Bootstrap の勉強はここまでにしたいと思います。
今後は必要になったときに公式ドキュメントを見ながらやっていくつもりです。

Twitter Bootstrap は公式のドキュメントが見やすくてとてもいいですね！
情報量は公式なのでもちろんのこと、シンプルで分かりやすいし公式だけあればこと足りますね。