本文へスキップ
BecomeCoder

Markdownコース · 第2章 表現を広げる · レッスン6

表(テーブル)

ブラウザで完結

導入

項目と値を整理して見せたいときに便利なのが「表」です。少しだけ記号のルールがありますが、慣れれば手早く書けます。

説明

表(table) は、|(パイプ)でセルを区切って作ります。ポイントは、見出し行のすぐ下に区切り線の行を入れる ことです。

| 名前 | 役割 |
| --- | --- |
| Astro | サイト土台 |
| Roslyn | コード実行 |
  • 1行目が 見出し になります。
  • 2行目の | --- | --- |区切り線 です。ハイフンで列の数だけ書きます。これがないと、ただの文章として扱われてしまいます。
  • 3行目以降が データ行 です。

セルの中では、強調やリンクといったインライン記法も使えます。

やってみよう

下のエディタに上の表の例を打ち込み、右のプレビューで罫線付きの表として表示されることを確かめましょう。区切り線の行を消すと表にならないことも試してみてください。

演習

次の内容の表を作ってください。見出しは「言語」「用途」、データ行は1行で「言語」に Markdown、「用途」に 文書 を入れます。

| 言語 | 用途 |
| --- | --- |
| Markdown | 文書 |
ヒント1を見る

見出し行のすぐ下に、列の数だけハイフンを書いた区切り行 | --- | --- | を必ず入れます。これが表になる目印です。

実際に動かしてみよう

下のエディタに Markdown を書くと、右側にレンダリング結果がその場で表示されます。本文の記法を実際に打ち込んで、表示がどう変わるか確かめながら進めましょう。

Markdown プレビュー

書いた Markdown をその場で HTML に変換して表示する学習用プレビューを読み込みます。
スクロールして表示された時点でも自動で読み込まれます。