Bootstrap によるレスポンシブ Web デザイン

表を配置する

表を作成するときには class="table" を追加するだけで Bootstrap の美しいデザインを採用できます．

index.html（抜粋）コピー
<table class="table">
  <thead>
    <tr><th>abc</th><th>def</th><th>ghi</th></tr>
  </thead>
  <tbody>
    <tr><td>12</td><td>123</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3">フッター</td></tr>
  </tfoot>
</table>

クラスに .table-striped を追加すると，行ごとにストライプを入れることができます．

index.html（抜粋）コピー
<table class="table table-striped">
  <thead>
    <tr><th>abc</th><th>def</th><th>ghi</th></tr>
  </thead>
  <tbody>
    <tr><td>12</td><td>123</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3">フッター</td></tr>
  </tfoot>
</table>

クラスに .table-hover を追加すると，PCでマウスをポイントした行がハイライトされるようになります．ただし，この機能はスマートフォンやタブレットでは効果が得られないことにも注意してください．

index.html（抜粋）コピー
<table class="table table-striped table-hover">
  <thead>
    <tr><th>abc</th><th>def</th><th>ghi</th></tr>
  </thead>
  <tbody>
    <tr><td>12</td><td>123</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
    <tr><td>1234</td><td>123456</td><td>12345678</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3">フッター</td></tr>
  </tfoot>
</table>

やはりここで例示した以外にも Bootstrap ではさまざまな表のデザインを作成できます．詳細はこちらを参照してください．

目次に戻る