マークダウン|Markdownでテーブル・表を作成する方法と注意点

SKILL

マークダウンでテーブル(表)を作成する記法は?

このような悩みにお答えします。

この記事で解説する内容は、以下の通りです。

  • マークダウンのテーブル記法
  • テーブル内に文章を入れた例
  • テーブル内での改行方法
  • 作成の注意点

コーピーして使えるマークダウン記法も載せているので、ぜひ利用してみてください。

スポンサーリンク

マークダウンでテーブル・表を作成する方法

まず、マークダウンでテーブルを作成する場合、それぞれのセルを「|」で区切ります。

ちなみにこちらの記法「(パイプライン)」と呼ばれます。

記法はこちら。

| 見出し | 見出し |
| —- | —- |
| 文章 | 文章 |
| 文章 | 文章 |

書き方のポイントは2行目のハイフン「-」の書き方。

2行目のハイフンの書き方で、文章の位置が変わる

挿入方法は以下の通りです。

コロン「:」を入れない場合は、デフォルトの設定で表示されます。

今回はコロンを入れずに作成した例を載せていますので、必要に応じて「:」を使用してみてください。

【注意】マークダウン記法の前後に「空白」を入れる

Markdownで表を作成する際は、前後に空白を入れないと正しく表示されません。

私も当初、空白を入れずに作成して表が反映されなかったという失敗談があります。

表のコードを作成したら、前後に空白があるかどうかを一度確認してみてください。

それでは様々なテーブルの例を見ていきましょう。

テーブルの表示例とマークダウン記法

見出し 見出し
TD TD
TD TD

上のテーブルのMarkdown記法はこちら。

文章を入れた例も見てみましょう。

テーブルに文章を入れた例

実際に文章を入れた場合のマークダウン記法はこちら。

くだもの
もも ピンク
みかん オレンジ

文章は、パイプライン「|」の間にそのまま書いていきます。

コピーで使えるマークダウンのテーブル記法

いちいちテーブルをコードで作るのが面倒…

こんな悩みを解決するために、以下のテーブル記法を作りました。

よかったら、コピーして使ってください。

ご紹介するテーブルのサイズ

  • 2×4のテーブル記法
  • 3×3のテーブル記法
  • 4×5のテーブル記法

2×4のテーブル記法

|  |  |
| — | — |
|  |  |
|  |  |

3×3のテーブル記法

|  |  |  |
| — | — | — |
|  |  |  |
|  |  |  |

4×5のテーブル記法

|  |  |  |  |
| — | — | — | — |
|  |  |  |  |
|  |  |  |  |
|  |  |  |  |
|  |  |  |  |

セル内で文章を改行する方法

文章の途中で改行したい場合は、<br>タグを使用します。

例はこちら。

| ひとりごと |
| — |
| 空が青くて天気も良いけど<br>今日は一日家で過ごしたい |

ひとりごと
空が青くて天気も良いけど
今日は一日家で過ごしたい

こんな感じです!

効率よくプログラミングを学ぶなら、スクールを活用しよう!

プログラミングを学べるスクール2選

「プログラミングを一人で学ぶのに限界を感じる…」と悩む方は多くいらっしゃいます。

専門性の高い分野だからこそ、習得するまでに時間がかかるもの。

そこで、効率よく学びたい人はプログラミングスクールの利用をおすすめします。

短期間で欲しい知識を習得できるので、効率よくスキルをアップさせることができます。

コースによっては「お試しレッスン」などもありますので、プログラミングの習得に限界を感じている人は気軽に試してみてください。

ピンポイントでスキルを習得できる「Tech Academy」

テックアカデミー

プログラミングを学ぶなら「Techacademy(テックアカデミー)」をおすすめします。

20種類以上もの豊富な学習コースを用意しているため、自分に合ったスキルを学ぶことができるからです。

また、Webデザインからアプリ開発まで、幅広いプログラミングスキルの習得が可能です。

プログラミングスクールの大手企業なので「カリキュラム」や「学習システム」が充実しており、効率よく学べる環境も整っています

授業はすべてオンラインで学べるため、仕事や学業などで忙しい方でも安心です。

「プログラミングスキルを高めたい」「ひとりでは限界がある」と考えている方は、ぜひ利用してみてください。

Techacademy(テックアカデミー)を
確認してみる

まとめ

Markdown記法で表・テーブルを作成するまとめは以下の通り。

まとめ

  • | (パイプライン)→セルを区切る
  • ‐ (ハイフン)→2行目に入れる
  • : (コロン)→文章を寄せたい時に使う

「Markdownでどうやって表を入れるの?」という疑問が解決できることを願っています。

error: Content is protected !