最近はあまり使わなくなったテーブルタグですが、一時はWebのレイアウトは全てテーブルで書かれていたというくらい、まさにレイアウトの王様のような時代がありました。しかしCSSの登場とともに廃れ始め、今や複雑な構造で書きにくいだけの長物に。
そんなテーブルタグを復権させてくれたのがBootstrap3。Bootstrap3のおかげで細かいスタイルをしなくても、罫線や色付けをしてくれ、さらにはレスポンシブ対応までやってくれるというすごい仕様になっています。
この記事ではBootstrapで使いやすくなったテーブル(表)タグの基本的な書き方、使い方をまとめておきたいと思います。
Bootstrap3を使ったTableの使い方
Tableの基本的な書き方
Bootstrap3のTableスタイルを使うときは、.table
と組み合わせて使用します。
Class名 | 概要 |
---|---|
.table |
Tableスタイルのベースclass |
.table-striped |
Tableの行にストライプスタイルを追加 |
.table-bordered |
Table全体を囲む線を追加 |
.table-hover |
マウスオーバーで行に色をつける |
.table-condensed |
スペースの狭い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を追加するだけです。
Class名 | 概要 |
---|---|
.active |
マウスオーバー時の色を行に追加 |
.success |
successカラー(緑)を行に追加 |
.info |
infoカラー(青)を行に追加 |
.warning |
warningカラー(黄)を行に追加 |
.danger |
dangerカラー(赤)を行に追加 |
<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を作ることができます。
Class名 | 概要 |
---|---|
.table-responsive > .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');
});
デモページはこちら