Markdown Table Generator
Markdownテーブルを簡単に作成・編集するツールです。CSV、JSONデータをMarkdownテーブルに変換したり、直接テーブルを編集できます!
主要機能
1. 2つの入力モード
Table Mode
- ビジュアルテーブルエディタ
- セル単位で直接入力
- 行/列の追加と削除
- カラムの配置設定
CSV/JSON Mode
- CSVデータをテーブルに変換
- JSON配列をテーブルに変換
- 大量データの高速入力
2. 配置オプション
各カラムごとに配置設定が可能:
- 左揃え (
:---) - 中央揃え (
:---:) - 右揃え (
---:)
3. リアルタイムプレビュー
- Markdown出力を即座に確認
- レンダリングされたテーブルのプレビュー
使用例
基本テーブルの作成
入力:
Header 1 | Header 2 | Header 3
Cell 1-1 | Cell 1-2 | Cell 1-3
Cell 2-1 | Cell 2-2 | Cell 2-3
Markdown出力:
| Header 1 | Header 2 | Header 3 |
| :--- | :--- | :--- |
| Cell 1-1 | Cell 1-2 | Cell 1-3 |
| Cell 2-1 | Cell 2-2 | Cell 2-3 |
CSVデータの変換
CSV入力:
Name, Age, City
John Doe, 30, New York
Jane Smith, 25, Los Angeles
Bob Johnson, 35, Chicago
Markdown出力:
| Name | Age | City |
| :--- | :--- | :--- |
| John Doe | 30 | New York |
| Jane Smith | 25 | Los Angeles |
| Bob Johnson | 35 | Chicago |
JSONデータの変換
JSON入力:
[
{"name": "John", "age": 30, "city": "NYC"},
{"name": "Jane", "age": 25, "city": "LA"},
{"name": "Bob", "age": 35, "city": "Chicago"}
]
Markdown出力:
| name | age | city |
| :--- | :--- | :--- |
| John | 30 | NYC |
| Jane | 25 | LA |
| Bob | 35 | Chicago |
ユースケース
1. README.md作成
# API Documentation
## Endpoints
| Method | Endpoint | Description | Auth Required |
| :--- | :--- | :--- | :---: |
| GET | /api/users | Get all users | ✓ |
| POST | /api/users | Create user | ✓ |
| GET | /api/users/:id | Get user by ID | ✓ |
| DELETE | /api/users/:id | Delete user | ✓ |
2. 技術仕様ドキュメント
## Browser Support
| Browser | Version | Status |
| :--- | :---: | :---: |
| Chrome | 90+ | ✅ |
| Firefox | 88+ | ✅ |
| Safari | 14+ | ✅ |
| Edge | 90+ | ✅ |
| IE11 | - | ❌ |
3. 比較表
## Plan Comparison
| Feature | Free | Pro | Enterprise |
| :--- | :---: | :---: | :---: |
| Users | 5 | 50 | Unlimited |
| Storage | 1GB | 100GB | 1TB |
| Support | Email | Priority | 24/7 |
| Price | $0 | $29/mo | Custom |
4. 統計データ
## Monthly Statistics
| Month | Users | Revenue | Growth |
| :--- | ---: | ---: | ---: |
| January | 1,234 | $12,345 | +5% |
| February | 1,456 | $14,567 | +18% |
| March | 1,789 | $17,890 | +23% |
配置ガイド
左揃え (:---)
テキストカラムに適しています
| Name | Description |
| :--- | :--- |
| John | Developer |
中央揃え (:---:)
短い値やステータスに適しています
| Status | Active |
| :---: | :---: |
| ✓ | Yes |
右揃え (---:)
数値データに適しています
| Price | Quantity |
| ---: | ---: |
| $99.99 | 100 |
CSVパースのヒント
1. カンマ区切り
name,age,city
John,30,NYC
Jane,25,LA
2. 自動スペース削除
name , age , city
John , 30 , NYC
3. 複数行コピー
ExcelやGoogleスプレッドシートからコピー:
- セル範囲を選択
- Ctrl+C(コピー)
- CSV Modeに貼り付け
- Parse as CSVをクリ ック
JSONパースのヒント
1. オブジェクト配列
[
{"id": 1, "name": "John"},
{"id": 2, "name": "Jane"}
]
2. キー順序の維持
最初のオブジェクトのキー順序がカラム順序になります
3. ネストされたオブジェクト
ネストされたオブジェクトは [object Object] として表示されます
フラットな構造を推奨します
高度な機能
1. 素早い行/列編集
- 行追加: 下部の「+ Row」ボタン
- 列追加: 右側の「+ Col」ボタン
- 削除: 各行/列の「✕」ボタン
2. サイズ調整
- 行数: 1-50
- 列数: 1-20
- 入力フィールドで素早く調整
3. コピー&ペースト
- 各セルをクリックして編集
- Ctrl+C/Vでコピー/ペースト可能
Markdown拡張構文
GitHub Flavored Markdown
GitHubでは追加機能をサポート:
| Syntax | Description | Test Text |
| --- | --- | --- |
| Header | Title | Here's this |
| Paragraph | Text | And more |
セル内のフォーマット
| Feature | Status |
| --- | --- |
| **Bold** | *Italic* |
| `Code` | [Link](url) |
絵文字の使用
| Status | Icon |
| --- | :---: |
| Success | ✅ |
| Warning | ⚠️ |
| Error | ❌ |
ベストプラクティス
1. 明確なヘッダー
✅ Good:
| User Name | Email Address | Registration Date |
❌ Bad:
| Name | Email | Date |
2. 一貫した形式
✅ Good: すべての日付がYYYY-MM-DD
| Date |
| 2024-01-15 |
| 2024-01-16 |
❌ Bad: 混合形式
| Date |
| Jan 15, 2024 |
| 2024-01-16 |
3. 適切な配置
✅ Good:
| Name | Price | Qty |
| :--- | ---: | ---: |
❌ Bad: すべてのカラムを左揃え
4. 短く保つ
長すぎるテーブルは複数に分割:
## User Info
| Name | Email |
| --- | --- |
| John | john@example.com |
## User Stats
| Name | Orders | Revenue |
| --- | ---: | ---: |
| John | 10 | $500 |
注意事項
- Markdownテーブルは複雑なレイアウトをサポートしていません
- セルのマージ(colspan、rowspan)はサポートされていません
- 非常に大きなテーブルは可読性が低下します(10-15カラム以下を推奨)
- CSVパースは引用符で囲まれたカンマを処理できません
関連ツール
- Markdown Editor - Markdown編集
- CSV JSON Converter - CSV ↔ JSON変換
- Text Diff - テーブル比較
キーボードショートカット(将来サポート予定)
Tab- 次のセルに移動Shift + Tab- 前のセルに移動Enter- 次の行に移動Ctrl + Enter- 新しい行を追加