Bootstrap3 テーブル（表）の書き方、使い方

Tweet

Pocket

Mohawk cat. King of the urban jungle.

最近はあまり使わなくなったテーブルタグですが、一時はWebのレイアウトは全てテーブルで書かれていたというくらい、まさにレイアウトの王様のような時代がありました。しかしCSSの登場とともに廃れ始め、今や複雑な構造で書きにくいだけの長物に。

そんなテーブルタグを復権させてくれたのがBootstrap3。Bootstrap3のおかげで細かいスタイルをしなくても、罫線や色付けをしてくれ、さらにはレスポンシブ対応までやってくれるというすごい仕様になっています。

この記事ではBootstrapで使いやすくなったテーブル（表）タグの基本的な書き方、使い方をまとめておきたいと思います。

Bootstrap3を使ったTableの使い方

Tableの基本的な書き方

Bootstrap3のTableスタイルを使うときは、.tableと組み合わせて使用します。

<!-- ストライプにする場合 -->
<table class="table table-striped">
  <tr>
    <td>content</td>
    <td>content</td>
    <td>content</td>
  </tr>
  <tr>
    <td>content</td>
    <td>content</td>
    <td>content</td>
  </tr>
</table>

Tableのcellに色をつける

tr、td、thなどのTableのセルに色をつけることができます。方法は色づけしたいセルにclassを追加するだけです。

<table class="table">
  <tr class="active">
    <th>active > th</th>
    <td>active > td</td>
  </tr>
  <tr>
    <th class="success">success</th>
    <td class="info">info</td>
  </tr>
</table>

レスポンシブに対応したTableの書き方

Bootstrap3ではレスポンシブに対応したTableを作ることができます。作り方は.table-responsiveの中に.tableを入れるだけ。

通常は画面幅に合わせてTableも狭くなり、縦長の表になってしまうのですが、レスポンシブ化をすることで横方向にスライドするTableを作ることができます。

<div class="table-responsive">
  <table class="table">...</table>
</div>

Bootstrap3 Tableのよくあるパターン

Bootstrap3で作る企業沿革風テーブル

<table class="table table-stripe">
  <tr>
    <th class="info">平成18年3月</th>
    <td>横浜の浜辺で浜辺屋開業</td>
  </tr>
  <tr>
    <th class="info">平成24年4月</th>
    <td>東証一部上場</td>
  </tr>
  <tr>
    <th class="info">平成26年1月</th>
    <td>東証二部降格</td>
  </tr>
  <tr>
    <th class="info">平成29年1月</th>
    <td>廃業</td>
  </tr>
</table>

javascriptと組み合わせて日付取得

<table class="table table-bordered">
  <tr>
    <th class="danger">日</th>
    <th>月</th>
    <th>火</th>
    <th>水</th>
    <th>木</th>
    <th>金</th>
    <th class="info">土</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
  </tr>
  <tr>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td>21</td>
  </tr>
  <tr>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    <td>28</td>
  </tr>
  <tr>
    <td>29</td>
    <td>30</td>
    <td>31</td>
  </tr>
</table>
<p class="text">ここに数字を表示</p>

<!-- js -->
$( "#calendar td" ).on( "click", function() {
  // クリックした日付のテキストを取得して表示
  $('.text').text( $(this).text() );
  // クリックした日付のclassのon/off
  $(this).toggleClass('info');
});

デモページはこちら