bootstrapを使ってシンプルなWebページを作成する④〜テーブル〜

## 概要

- [前回](https://qiita.com/ozaki25/items/5212a8524f6c6ab85ce6)の続き
- bootstrapのバージョンは3.7を使っている
- https://getbootstrap.com/docs/3.3
- 動作確認のための準備は[こちら](https://qiita.com/ozaki25/items/37a31be60f169fbabbf9#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E6%89%8B%E9%A0%86)

## 今回の内容

- テーブルの表示のしかた
- だいたいドキュメントに載っているものそのまま
- http://getbootstrap.com/docs/3.3/css/#tables

### シンプルなパターン

- class属性にtableをつけるだけ

<img width="623" alt="スクリーンショット 2017-10-30 0.11.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/b26c4358-1715-bbd1-3835-b63d7d7ba0c0.png">

```html:index.html
    <div class="container">
      <table class="table">
        <thead>
          <tr>
            <th>名前</th>
            <th>背番号</th>
            <th>投/打</th>
            <th>ポジション</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>有原航平</td>
            <td>16</td>
            <td>右/右</td>
            <td>投手</td>
          </tr>
          <tr>
            <td>西川遥輝</td>
            <td>7</td>
            <td>右/左</td>
            <td>外野手</td>
          </tr>
          <tr>
            <td>中島卓也</td>
            <td>9</td>
            <td>右/左</td>
            <td>内野手</td>
          </tr>
        </tbody>
      </table>
    </div>
```

### 罫線を入れる

- 縦横に罫線を入れて表っぽくする
- `table-bordered`を追加しただけ

<img width="623" alt="スクリーンショット 2017-10-30 0.14.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/f5021856-1bcf-2986-2f24-019c24a55bef.png">

```html:index.html
    <div class="container">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>名前</th>
            <th>背番号</th>
            <th>投/打</th>
            <th>ポジション</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>有原航平</td>
            <td>16</td>
            <td>右/右</td>
            <td>投手</td>
          </tr>
          <tr>
            <td>西川遥輝</td>
            <td>7</td>
            <td>右/左</td>
            <td>外野手</td>
          </tr>
          <tr>
            <td>中島卓也</td>
            <td>9</td>
            <td>右/左</td>
            <td>内野手</td>
          </tr>
        </tbody>
      </table>
    </div>
```

### セル内で改行させたくない場合

- デフォルトだとウィンドウサイズが縮まるとテーブルも小さくなり内容が改行される

<img width="408" alt="スクリーンショット 2017-10-30 0.26.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/32667efc-aa59-29cf-57be-bd6803f0a908.png">

- `text-nowrap`で改行させないで表示させることができる
- `th`や`td`にひとつひとつつけても適用されるがそれは面倒なのでまとめて指定することもできる

#### tableにtext-nowrapをつける

- tableタグにつけるとそのテーブルではセル内で改行されなくなる
- 画面に収まらなければ横スクロールすることになる

<img width="442" alt="スクリーンショット 2017-10-30 0.30.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/ff15d1ac-9b99-3143-5384-9307d793e053.png">

```html:index.html
    <div class="container">
      <table class="table table-bordered text-nowrap">
        <thead>
          <tr>
            <th>名前</th>
            <th>背番号</th>
            <th>投/打</th>
            <th>ポジション</th>
            <th>推定年俸</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>有原航平</td>
            <td>16</td>
            <td>右/右左</td>
            <td>投手</td>
            <td>6000万</td>
          </tr>
          <tr>
            <td>西川遥輝</td>
            <td>7</td>
            <td>右/左</td>
            <td>外野手</td>
            <td>10000万</td>
          </tr>
          <tr>
            <td>中島卓也</td>
            <td>9</td>
            <td>右/左</td>
            <td>内野手</td>
            <td>10000万</td>
          </tr>
        </tbody>
      </table>
    </div>
```

### theadにtext-nowrapをつける

- thead内だけ改行されなくなる

<img width="402" alt="スクリーンショット 2017-10-30 0.33.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/b2a322f4-5357-5309-be9a-461388253d5c.png">

### tbodyにtext-nowrapをつける

- tbody内だけ改行されなくなる

<img width="411" alt="スクリーンショット 2017-10-30 0.34.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/e00fc92d-4525-0b6a-02bf-cd93044d7e90.png">


## パネルの中にテーブルを入れる

<img width="496" alt="スクリーンショット 2017-10-30 0.36.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/47a2bd7b-be9c-f561-2583-1e890b03453a.png">

```html:index.html
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-heading">テーブル1</div>
        <table class="table">
          <thead>
            <tr>
              <th>名前</th>
              <th>背番号</th>
              <th>投/打</th>
              <th>ポジション</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>有原航平</td>
              <td>16</td>
              <td>右/右</td>
              <td>投手</td>
            </tr>
            <tr>
              <td>西川遥輝</td>
              <td>7</td>
              <td>右/左</td>
              <td>外野手</td>
            </tr>
            <tr>
              <td>中島卓也</td>
              <td>9</td>
              <td>右/左</td>
              <td>内野手</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
```

- テーブルに検索フォームを追加するとこんな感じ
- 検索フォームは`panel-body`に入れている

<img width="797" alt="スクリーンショット 2017-10-30 1.02.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/77f92b7c-42fb-8715-5d90-09a906ef955b.png">

```html:index.html
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-heading">テーブル1</div>
        <div class="panel-body">
          <form class="form-inline">
            <div class="form-group">
              <label class="control-label">名前</label>
              <input class="form-control" style="width: 200px;" type="text">
            </div>
            <div class="form-group">
              <label class="control-label">ポジション</label>
              <select class="form-control" style="width: 200px;">
                <option>投手</option>
                <option>捕手</option>
                <option>内野手</option>
                <option>外野手</option>
              </select>
            </div>
            <button class="btn btn-default">検索</button>
          </form>
        </div>
        <table class="table">
          <thead>
            <tr>
              <th>名前</th>
              <th>背番号</th>
              <th>投/打</th>
              <th>ポジション</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>有原航平</td>
              <td>16</td>
              <td>右/右</td>
              <td>投手</td>
            </tr>
            <tr>
              <td>西川遥輝</td>
              <td>7</td>
              <td>右/左</td>
              <td>外野手</td>
            </tr>
            <tr>
              <td>中島卓也</td>
              <td>9</td>
              <td>右/左</td>
              <td>内野手</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
```

## 次回

- 続きは[こちら](https://qiita.com/ozaki25/items/032ec200c439b2a0d326)