ブログのMarkdownテーブルの書き方

Markdown は、シンプルなマークアップ構文を使用して通常のテキストコンテンツに一定のフォーマットを持たせるマークアップ言語です。これを知って以来、多くの場所で利用できることに気づきました。例えば、現在のこの記事も Markdown で書かれています。文法は非常にシンプルで、学ぶのも早いですが、テーブルの書き方が少し難しいため、特にこの文章を記録することにしました。

Markdown 概要：#

参考記事：Markdown 日本語文書

デザイン理念：#

Markdown は、文書の読み書きを容易にすることを目指しています。
Markdown は可読性を最も重要視します。Markdown ファイルはプレーンテキスト形式でそのまま公開されるべきであり、マークアップタグやフォーマット指示を含むべきではありません。Markdown の文法は以下の text-to-HTML フィルターの影響を受けていますが -- Setext, atx, Textile, reStructuredText, Grutatext, そして EtText など、Markdown の文法の最大のインスピレーションはプレーンテキストのメールフォーマットです。
この背景に基づき、Markdown は完全に句読点で構成されており、これらの句読点は見た目と表現の意味が一致するように慎重に選ばれています。例えば、アスタリスクでマークされた単語は強調のように見えます。リストはリストのように見えます。もしメールを使ったことがあれば、ブロック引用も引用されたテキスト段落のように見えます。

インライン HTML：#

Markdown はウェブ文書を作成するためのものです。
Markdown は HTML を置き換えることを目的としていません。文法セットは非常に小さく、HTML タグの一部にしか対応していません。Markdown の目的は、記事の読みやすさ、作成、編集を容易にすることです。HTML は公開フォーマットであり、Markdown は作成フォーマットです。したがって、Markdown が扱うのはプレーンテキストです。
Markdown に含まれていないタグは、HTML を直接使用できます。Markdown から HTML に切り替えるためにデリミタや識別子を使用する必要はなく、タグを直接使用すればよいのです。
唯一の制限は、HTML ブロックレベル要素に対してです： <div>、<table>、<pre>、<p> など。これらは新しい行に単独で配置する必要があり、開始および終了タグの前にインデントがあってはいけません。Markdown はこれらのブロックレベル要素を自動的に認識し、その周りに追加の <p> タグを追加しません。
例えば、以下は HTML テーブルを Markdown ファイルに追加する方法です:

This is a regular paragraph.

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

This is another regular paragraph.

注意：Markdown の文法構造は HTML ブロックレベル要素内では処理されません。例えば、HTML ブロックレベル要素内で Markdown スタイルの文法を使用すべきではありません emphasis のように。
HTML インライン要素 -- 例えば <span>、<cite>、<del> は、Markdown の段落、リスト項目、見出しの中で自由に使用できます。もし望むなら、Markdown のフォーマットの代わりに HTML タグを使用することもできます。例えば、HTML <a> と <img> タグを Markdown のリンクや画像文法の代わりに使用できます。
HTML ブロックレベル要素とは異なり、Markdown 文法はインライン要素内で解析できます。

Markdown テーブルの書き方（GitHub に適用）：#

上記の Markdown 日本語文書によれば、テーブルの書き方には二つの方法があります：一つは HTML-Table タグの書き方、もう一つは Markdown 自身に基づく書き方です。具体的には以下を参照してください。

1. HTML-Table の書き方：#

詳細は HTML-Table タグを参照してください。ここでは繰り返しません。

2. Markdown の書き方：#

参考記事：Organizing information with tables

Markdown は | と - を使用してテーブルを作成します。- は各列のタイトルを作成するために使用され、| は各列を区切るために使用されます。テーブルを作成する前に空行を追加する必要があります。

コード：

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

効果：

First Header	Second Header
Content Cell	Content Cell
Content Cell	Content Cell

セルの幅は異なることができ、列内で完璧に整列する必要はありません。タイトル行の各列には少なくとも三つのハイフンが必要です。

コード：

| Command | Description |
| --- | --- |
| git status | List all new or modified files |
| git diff | Show file differences that haven't been staged |

効果：

Command	Description
git status	List all new or modified files
git diff	Show file differences that haven't been staged

テーブル内のリンク、インラインコードブロック、テキストスタイルをフォーマットします。

コード：

| Command | Description |
| --- | --- |
| `git status` | List all *new or modified* files |
| `git diff` | Show file differences that **haven't been** staged |
| `Blog Link` | <https://www.chiloh.cn> |

効果：

Command	Description
`git status`	List all new or modified files
`git diff`	Show file differences that haven't been staged
`Blog Link`	https://www.chiloh.cn

タイトル行の - の左側、右側、または両側に : を使用してテキストを左寄せ、中央寄せ、または右寄せにします。

コード：

| Left-aligned | Center-aligned | Right-aligned |
| :---         |     :---:      |          ---: |
| git status   | git status     | git status    |
| git diff     | git diff       | git diff      |

効果：

Left-aligned	Center-aligned	Right-aligned
git status	git status	git status
git diff	git diff	git diff

セル内で | を使用する場合は、| の前に \ を追加してエスケープします。typecho では使用できないようなので、代わりに | の Ascii コード &#124 を使用します。

コード：

| Name     | Character |
| ---      | ---       |
| Backtick | 、        |
| Pipe     | &#124     |

効果：

Name	Character
Backtick	、
Pipe	&#124

3. 高度なテーブル#

テーブルを最適化したい場合は、CSS を使用することを検討できます。一部の Markdown 解析は文法の混用をサポートしていますが、typecho はサポートしていないため、純粋に HTML でテーブルを書くことになります。

コード：

<style type="text/css">
.bg table, td, th
{
    border:1px solid grey; //テーブルの境界線の色を設定
}
.bg table th:nth-of-type(1) {
    width: 12%; //テーブルの列幅を設定、（1）は第一列を表す
}
.bg table th:nth-of-type(2) {
    width: 24%; //テーブルの列幅を設定、（2）は第二列を表す
}
.bg table td:nth-of-type(1) {
	color: red; //テーブルの列色を設定、（1）は第一列を表す
}
.bg table td:nth-of-type(2) {
	color: green; //テーブルの列色を設定、（2）は第二列を表す
}
</style>

<div class="bg">

<table>
    <tr>
        <td>番号</td>
        <td>名称</td>
        <td>简介</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Apple</td>
        <td>リンゴ</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Banana</td>
        <td>バナナ</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Lemon</td>
        <td>レモン</td>
    </tr>
</table>

</div>

効果：

!!!

番号	名称	简介
1	Apple	リンゴ
2	Banana	バナナ
3	Lemon	レモン

!!!