【Qiita】テーブルはショートカットコマンドでサッと書ける。表の挿入とフォーマット調整方法。

#【Qiita】テーブルはショートカットコマンドでサッと書ける。表の挿入とフォーマット調整方法。
Qiitaの記事に表を挿入するときのルール

**＜ポイント＞**

- 使う記号は「|」「:」「-」「&nbsp;」(半角スペース)の4つ
    - 「|」表の枠
    - 「|:--|」「|--:|」「|:-:|」のいずれかが2行目に必須
        - 「|:--|」左寄せ
        - 「|--:|」右寄せ
        - 「|:-:|」中央寄せ
    - 「-」か「 」(半角スペース)でソースコードを見やすくできる（スペーサー）
        - テキストの寄せ方で使える場所が異なる　→　**「-」のみ**で調整するのが無難
- 枠の中に画像を入れられる
    - [参考ページ](https://qiita.com/yuta-38/items/40018303946d1a1e8636)(画像に枠線を付ける方法)
- 枠の幅は最大のセルの長さに合わせ自動調整
    - 自分で幅をいじれない
    - ソースコードの中では見やすく整えられるが、表示には適用されない
- 自動補完機能で枠組みが簡単に作れる
    - `列数x行数`　（行数は：表題行を除く空白行の数）
    - ４列２行の表→　「4x2」と入力すると補完に**「テーブルを挿入」**が表示される
        - 各表題には１～の整数が入る

| 1 | 2 | 3 | 4 |
|:-:|:-:|:-:|:-:|
|   |   |   |   |
|   |   |   |   |




##表の書き方と注意点を実例で解説
**目次**
１.[左寄せ](#表の書き方左寄せ--)
２.[右寄せ](#表の書き方右寄せ--)
３.[中央寄せ](#表の書き方右寄せ--)
４.[複数列](#表の書き方複数列)
５.[自動補完による枠組みの作成](#自動補完による表枠組みの作成)（★簡単）

##表の書き方（左寄せ「|:--|」）

|項目名              |
|:--                |
|AAAAA              |
|bbbbb              |
|12345              |
|AAbb12345678       |


<br>

```ruby:書き方①

|項目名              |
|:------------------|
|AAAAA              |
|bbbbb              |
|12345              |
|AAbb12345678       |

```

```ruby:書き方②

|項目名              |
|:--                |
|AAAAA              |
|bbbbb              |
|12345              |
|AAbb12345678       |

```

```ruby:書き方③

|項目名|
|:--|
|AAAAA|
|bbbbb|
|12345|
|AAbb12345678|

```

①、②、③は同じ表示になる。

>- 2行目に「|:--|」が必須
    - ①「-」は2個以上であれば何個でもOK
    - ②「-」のあとに半角スペースを設置するのでもOK
    - ③「|:--|」のみでもOK　※2列以上の場合に見にくくなる
    - ※「-」と「 」の組み合わせはNG　(例：「|:-----   -----」 )


<br>
##表の書き方（右寄せ「|--:|」）

|項目名              |
|--:                |
|AAAAA              |
|bbbbb              |
|12345              |
|AAbb12345678       |



<br>

```ruby:書き方①

|項目名              |
|------------------:|
|AAAAA              |
|bbbbb              |
|12345              |
|AAbb12345678       |

```

```ruby:書き方②

|項目名              |
|--:                |
|AAAAA              |
|bbbbb              |
|12345              |
|AAbb12345678       |

```

```ruby:書き方③

|項目名              |
|             --:   |
|AAAAA              |
|bbbbb              |
|12345              |
|AAbb12345678       |

```

```ruby:書き方④

|項目名|
|--:|
|AAAAA|
|bbbbb|
|12345|
|AAbb12345678|

```

①、②、③、④は同じ表示になる。

>「--:」があれば、半角スペースは前後どちらに入っても問題ない。
　　└両サイドにあってもOK（③）



<br>
##表の書き方（中央寄せ「|:-:|」）

|項目名              |
|:-:                |
|AAAAA              |
|bbbbb              |
|12345              |
|AAbb12345678       |


<br>

```ruby:書き方①

|項目名              |
|:-----------------:|
|AAAAA              |
|bbbbb              |
|12345              |
|AAbb12345678       |

```

```ruby:書き方②

|項目名              |
|:-:                |
|AAAAA              |
|bbbbb              |
|12345              |
|AAbb12345678       |

```

```ruby:書き方③

|項目名|
|:-:|
|AAAAA|
|bbbbb|
|12345|
|AAbb12345678|

```

①、②、③は同じ表示になる。

>※中央寄せの場合「-」は「:」の間に書く
>※または「:-:」のあとに半角スペースを続ける
>>
- |:-----------------:|　OK
- |:-:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|　OK
- |:-:----------------|　NG
- |:-:--------&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|　NG
- |:-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:|　NG
　

<br>
##表の書き方（複数列）

右上ヘルプに記載されている事例

| Left align       |       Right align |    Center align    |
|:-----------------|------------------:|:------------------:|
| This             |              This |        This        |
| column           |            column |       column       |
| will             |              will |        will        |
| be               |                be |         be         |
| left             |             right |       center       |
| aligned          |           aligned |      aligned       |


<br>

```ruby:書き方①
| Left align       |       Right align |    Center align    |
|:-----------------|------------------:|:------------------:|
| This             |              This |        This        |
| column           |            column |       column       |
| will             |              will |        will        |
| be               |                be |         be         |
| left             |             right |       center       |
| aligned          |           aligned |      aligned       |
```

```ruby:書き方②
| Left align|Right align |Center align|
|:--|--:|:-:|
| This|This|This|
| column|column |column|
| will|will |will|
| be |be| be |
| left | right | center  |
| aligned| aligned |aligned|
```

①、②は同じ表示になる。
スペーサーが適切に設置されていないと見にくい


<br>
##自動補完による表枠組みの作成
自動補完機能で枠組みが簡単に作れる

- `列数x行数`　（行数は：表題行を除く空白行の数）
    - 4列２行の表→　「4x2」と入力すると補完に**「テーブルを挿入」**が表示される
    - 各表題には１～の整数が入る
- 配置デフォルトは中央寄せ
- ※上限は行列ともに「10」まで　（１０以上は手動で付け足し）


#### 4列２行の表
| 1 | 2 | 3 | 4 |
|:-:|:-:|:-:|:-:|
|   |   |   |   |
|   |   |   |   |

```ruby:ソースコード
| 1 | 2 | 3 | 4 |
|:-:|:-:|:-:|:-:|
|   |   |   |   |
|   |   |   |   |
```

#### 10列10行の表
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|   |   |   |   |   |   |   |   |   |   |
|   |   |   |   |   |   |   |   |   |   |
|   |   |   |   |   |   |   |   |   |   |
|   |   |   |   |   |   |   |   |   |   |
|   |   |   |   |   |   |   |   |   |   |
|   |   |   |   |   |   |   |   |   |   |
|   |   |   |   |   |   |   |   |   |   |
|   |   |   |   |   |   |   |   |   |   |
|   |   |   |   |   |   |   |   |   |   |
|   |   |   |   |   |   |   |   |   |   |

```ruby:ソースコード
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|   |   |   |   |   |   |   |   |   |   |
|   |   |   |   |   |   |   |   |   |   |
|   |   |   |   |   |   |   |   |   |   |
|   |   |   |   |   |   |   |   |   |   |
|   |   |   |   |   |   |   |   |   |   |
|   |   |   |   |   |   |   |   |   |   |
|   |   |   |   |   |   |   |   |   |   |
|   |   |   |   |   |   |   |   |   |   |
|   |   |   |   |   |   |   |   |   |   |
|   |   |   |   |   |   |   |   |   |   |
```


<br>
[ページ上部に戻る](#qiita表テーブルの書き方)