マークダウンだけでテーブル作成

(2025-09-05)

astro のマークダウンだけでテーブルを書きたいと思います。

デフォルトではマークダウンだけではテーブルは表示できません。

例えば以下のようなコードをそのまま書いてもテーブルの線は表示されません。

| TH | TH |
| ---- | ---- |
| TD | TD |
| TD | TD |

これを表示させるためにはやはり css を設定する必要があるようです。

src/layouts/BaseLayout.astro の編集

私の場合は、src/layouts/BaseLayout.astro が基礎になっているので書き換えます。

---
import Header from '/src/components/Navigation.astro';
import Footer from '/src/components/Footer.astro';
import ScrollToTop from '/src/components/ScrollToTop.astro';  // コンポーネントをインポート
import '@fontsource/noto-sans-jp';
import '/src/styles/global.css';
const { pageTitle, showToc } = Astro.props;
---

<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <div class="contents-wrapper">
      <Header />
      <h1 class="mx-5">{pageTitle}</h1>
      <div class="mx-5 markdown-content">
        {showToc && <astro-custom-toc />}
        <slot />
      </div>
      <ScrollToTop />  <!-- ここに追加 -->

      <Footer />
    </div>
  </body>
</html>

これまでと変更したのは、

<div class="mx-5 markdown-content">

src/styles/global.css に追加

src/styles/global.css に以下の css を追加します。

.markdown-content table {
  border-collapse: collapse;
  margin: 1em 0;
}

.markdown-content th {
  border: 1px solid #747171;
  background-color: rgb(193, 209, 238);
  padding: 0.2em 1em;
}
.markdown-content td {
  border: 1px solid #747171;
  padding: 0.2em 1em;
}

マークダウンだけでテーブルが作成される

そうするとマークダウンだけでテーブルが作成されます。

以下のようなマークダウンを書くだけで、

| TH | TH |
| ---- | ---- |
| TD | TD |
| TD | TD |

以下のようなテーブルができます。

TH	TH
TD	TD
TD	TD

これは便利ですね。

csv からマークダウンテーブルコードを作成する python

ここまで来たら、csv からマークダウンテーブルコードを作成したいと思います。

import csv

with open("sample.csv", encoding="utf-8") as f:
    reader = csv.reader(f)
    rows = list(reader)

# Markdown テーブル作成
md = []

# ヘッダー
md.append("| " + " | ".join(rows[0]) + " |")
md.append("|" + "|".join(["------"] * len(rows[0])) + "|")

# データ行
for row in rows[1:]:
    md.append("| " + " | ".join(row) + " |")

print("\n".join(md))

出来上がったのは、

| 日付 | 練習時間 | 累積時間 |
|------|------|------|
| 2025-08-15 | 0 | 318 |
| 2025-08-16 | 1 | 319 |
| 2025-08-17 | 2 | 321 |
| 2025-08-18 | 1 | 322 |
| 2025-08-19 | 5 | 327 |
| 2025-08-20 | 0 | 327 |
| 2025-08-21 | 1 | 328 |
| 2025-08-22 | 2.5 | 330.5 |

これをマークダウンで貼り付けると、

日付	練習時間	累積時間
2025-08-15	0	318
2025-08-16	1	319
2025-08-17	2	321
2025-08-18	1	322
2025-08-19	5	327
2025-08-20	0	327
2025-08-21	1	328
2025-08-22	2.5	330.5

素晴らしい。