Tabellen Syntax

Tabellen sind ein wichtiges Element der Markdown-Erweiterungssyntax, um Daten in einer strukturierten Form anzuzeigen.

Grundlegende Tabellen Syntax

Einfache Tabelle

Verwenden Sie den Pipe | zum Trennen von Spalten und - zum Erstellen der Kopfzeilenseparatorzeile:

| Name  | Age | Occupation |
|-------|-----|------------|
| Zhang | 25  | Engineer   |
| Li    | 30  | Designer   |
| Wang  | 28  | Product Manager |

Gerenderte Ausgabe:

Name	Age	Occupation
Zhang	25	Engineer
Li	30	Designer
Wang	28	Product Manager

Tabellenausrichtung

Verwenden Sie Doppelpunkte : zum Steuern der Spaltenausrichtung:

| Left Align | Center Align | Right Align |
|:-----------|:------------:|------------:|
| Content 1  | Content 1    | Content 1   |
| Content 2  | Content 2    | Content 2   |
| Content 3  | Content 3    | Content 3   |

Gerenderte Ausgabe:

Left Align	Center Align	Right Align
Content 1	Content 1	Content 1
Content 2	Content 2	Content 2
Content 3	Content 3	Content 3

Ausrichtungsdetails

Ausrichtungssyntax

Syntax	Ausrichtung	Beispiel
---	Links (Standard)	`
:--:	Zentriert	`
--:	Rechts	`

Numerische Datentabellen

Rechtsausrichtung ist für die Anzeige von Zahlen geeignet:

| Product | Price | Sales | Revenue |
|:--------|------:|------:|--------:|
| A       | ¥99   | 1,250 | ¥123,750|
| B       | ¥199  | 856   | ¥170,344|
| C       | ¥299  | 432   | ¥129,168|
| **Total** |      | **2,538** | **¥423,262** |

Gerenderte Ausgabe:

Product	Price	Sales	Revenue
A	¥99	1,250	¥123,750
B	¥199	856	¥170,344
C	¥299	432	¥129,168
Total		2,538	¥423,262

Tabellenformatierung

Inline Formatierung

Tabellenzellen unterstützen Markdown-Inline-Formatierung:

| Feature      | Status      | Description                |
|-------------|-------------|----------------------------|
| **Login**   | ✅ Done     | Users can log in via email |
| *Register*  | 🚧 In Progress | Third-party registration supported |
| `Reset Password` | ❌ To Do | Reset password via email   |
| [User Center](/) | ⏳ Planned | User information management |

Gerenderte Ausgabe:

Feature	Status	Description
Login	✅ Done	Users can log in via email
Register	🚧 In Progress	Third-party registration supported
Reset Password	❌ To Do	Reset password via email
User Center	⏳ Planned	User information management

Code in Tabellen

| Command | Function      | Example           |
|---------|--------------|-------------------|
| `ls`    | List files   | `ls -la`          |
| `cd`    | Change dir   | `cd /home/user`   |
| `mkdir` | Make dir     | `mkdir new-folder`|
| `rm`    | Remove files | `rm -rf folder/`  |

Gerenderte Ausgabe:

Command	Function	Example
ls	List files	ls -la
cd	Change dir	cd /home/user
mkdir	Make dir	mkdir new-folder
rm	Remove files	rm -rf folder/

Komplexe Tabellenbeispiele

Technologievergleichstabelle

| Feature         | React | Vue | Angular |
|:---------------|:-----:|:---:|:-------:|
| **Learning Curve** | Medium | Easy | Hard |
| **Performance**    | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| **Ecosystem**      | Rich  | Good | Complete |
| **Enterprise Support** | Facebook | Independent | Google |
| **TypeScript**     | ✅    | ✅   | ✅ Built-in |
| **Community Activity** | Very High | High | Medium |

Gerenderte Ausgabe:

Feature	React	Vue	Angular
Learning Curve	Medium	Easy	Hard
Performance	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
Ecosystem	Rich	Good	Complete
Enterprise Support	Facebook	Independent	Google
TypeScript	✅	✅	✅ Built-in
Community Activity	Very High	High	Medium

API-Dokumentationstabelle

| Parameter | Type     | Required | Default   | Description                |
|-----------|----------|:--------:|-----------|----------------------------|
| `id`      | `number` | ✅       | -         | Unique user identifier     |
| `name`    | `string` | ✅       | -         | User name                  |
| `email`   | `string` | ✅       | -         | User email address         |
| `age`     | `number` | ❌       | `null`    | User age                   |
| `avatar`  | `string` | ❌       | `"/default.jpg"` | Avatar URL         |
| `status`  | `enum`   | ❌       | `"active"` | Account status: `active` \| `inactive` |

Gerenderte Ausgabe:

Parameter	Type	Required	Default	Description
id	number	✅	-	Unique user identifier
name	string	✅	-	User name
email	string	✅	-	User email address
age	number	❌	null	User age
avatar	string	❌	"/default.jpg"	Avatar URL
status	enum	❌	"active"	Account status: active | inactive

Tabellenformatierungstipps

Verwendung von Emojis

| OS      | Support | Note      |
|---------|:-------:|-----------|
| Windows | ✅      | Vollständige Unterstützung |
| macOS   | ✅      | Vollständige Unterstützung |
| Linux   | ⚠️      | Teilweise Unterstützung |
| iOS     | ❌      | Nicht unterstützt |
| Android | 🚧      | Entwicklung |

Gerenderte Ausgabe:

OS	Support	Note
Windows	✅	Vollständige Unterstützung
macOS	✅	Vollständige Unterstützung
Linux	⚠️	Teilweise Unterstützung
iOS	❌	Nicht unterstützt
Android	🚧	Entwicklung

Verwendung von Badges

| Project | Status | Version |
|---------|--------|---------|
| React   | ![Stable](https://img.shields.io/badge/status-stable-green) | `v18.2.0` |
| Vue     | ![Stable](https://img.shields.io/badge/status-stable-green) | `v3.3.0`  |
| Angular | ![Beta](https://img.shields.io/badge/status-beta-orange)    | `v16.0.0` |

Leere Zellenbehandlung

Darstellung leerer Inhalte

| Item | Q1   | Q2   | Q3   | Q4   |
|------|:----:|:----:|:----:|:----:|
| Revenue | 1M   | 1.2M | -    | -    |
| Expense | 800K | 900K | 950K | -    |
| Profit  | 200K | 300K |      |      |

Gerenderte Ausgabe:

Item	Q1	Q2	Q3	Q4
Revenue	1M	1.2M	-	-
Expense	800K	900K	950K	-
Profit	200K	300K

Häufige Fehler und Lösungen

1. Fehlerhafte Pipelines

❌ Falscher:
| Name | Age|Occupation|
|------|----|----------|
|Zhang|25|Engineer|

✅ Korrekt:
| Name | Age | Occupation |
|------|-----|------------|
| Zhang | 25  | Engineer   |

2. Fehlende Separatorzeile

❌ Falscher:
| Name | Age | Occupation |
| Zhang | 25 | Engineer |

✅ Korrekt:
| Name | Age | Occupation |
|------|-----|------------|
| Zhang | 25  | Engineer   |

3. Spaltenanzahl-Mismatch

❌ Falscher:
| Name | Age | Occupation |
|------|-----|------------|
| Zhang | 25 |  ← Fehlende dritte Spalte

✅ Korrekt:
| Name | Age | Occupation |
|------|-----|------------|
| Zhang | 25  | Engineer   |

4. Besondere Zeichenbehandlung

❌ Problem:
| Price | Description |
|-------|-------------|
| $100|tax included |  ← Pipe falsch verwendet

✅ Lösung:
| Price | Description |
|-------|-------------|
| $100 | tax included |
| $200 | Price\|tax included |  ← Pipe escapen

Erweiterte Tabellenfunktionen

Erweiterung mit HTML

<table>
  <tr>
    <th colspan="2">Zusammengefasste Spaltenüberschrift</th>
    <th>Normale Spalte</th>
  </tr>
  <tr>
    <td rowspan="2">Zusammengefasste Zeile</td>
    <td>Daten 1</td>
    <td>Daten 2</td>
  </tr>
  <tr>
    <td>Daten 3</td>
    <td>Daten 4</td>
  </tr>
</table>

Gerenderte Ausgabe:

Zusammengefasste Spaltenüberschrift		Normale Spalte
Zusammengefasste Zeile	Daten 1	Daten 2
	Daten 3	Daten 4

Benutzerdefinierte Tabellenstile

<table style="width: 100%; border-collapse: collapse;">
  <tr style="background-color: #f0f0f0;">
    <th style="border: 1px solid #ddd; padding: 8px;">Produkt</th>
    <th style="border: 1px solid #ddd; padding: 8px;">Preis</th>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px;">A</td>
    <td style="border: 1px solid #ddd; padding: 8px; color: red;">¥99</td>
  </tr>
</table>

Praktische Anwendungsszenarien

1. Projektmanagement

## Aufgabenfortschrittstabelle

| Aufgabe | Besitzer | Startdatum | Enddatum | Status | Vollständigkeit |
|------|-------|------------|----------|:------:|:----------:|
| Anforderungsanalyse | Zhang | 2023-10-01 | 2023-10-07 | ✅ | 100% |
| UI-Design | Li | 2023-10-08 | 2023-10-15 | 🚧 | 75% |
| Frontend-Entwicklung | Wang | 2023-10-16 | 2023-10-30 | ⏳ | 0% |
| Backend-Entwicklung | Zhao | 2023-10-16 | 2023-11-05 | ⏳ | 0% |
| Testing | Sun | 2023-11-06 | 2023-11-12 | ⏳ | 0% |

2. Produktvergleich

## Abonnementplanvergleich

| Feature | Kostenlos | Pro | Enterprise |
|---------|:----:|:---:|:----------:|
| **Benutzerlimit** | 5 | 50 | Unbegrenzt |
| **Speicher** | 1GB | 100GB | 1TB |
| **API-Aufrufe** | 1000/mo | 100k/mo | Unbegrenzt |
| **Support** | Community | E-Mail | Dienstleistung |
| **SLA** | - | 99.9% | 99.99% |
| **Preis** | Kostenlos | ¥99/mo | ¥999/mo |
| | [Wählen](/) | [Wählen](/) | [Kontaktieren Sie uns](/) |

3. Finanzbericht

## Monatlicher Finanzbericht

| Art | Jan | Feb | Mär | Gesamt |
|------|-----:|-----:|-----:|------:|
| **Einnahmen** |     |     |     |      |
| Produktverkäufe | 50,000 | 55,000 | 60,000 | 165,000 |
| Dienstleistungsaufwand | 20,000 | 22,000 | 25,000 | 67,000 |
| Sonstige Einnahmen | 2,000 | 1,500 | 3,000 | 6,500 |
| *Zwischensumme* | *72,000* | *78,500* | *88,000* | *238,500* |
| **Ausgaben** |     |     |     |      |
| Gehälter | 30,000 | 30,000 | 30,000 | 90,000 |
| Büro Miete | 8,000 | 8,000 | 8,000 | 24,000 |
| Marketing | 10,000 | 12,000 | 15,000 | 37,000 |
| *Zwischensumme* | *48,000* | *50,000* | *53,000* | *151,000* |
| **Nettogewinn** | **24,000** | **28,500** | **35,000** | **87,500** |

Best Practices

1. Halten Sie es einfach

✅ Empfohlen: Einfach und klar
| Artikel | Status |
|------|--------|
| A    | Fertig   |
| B    | In Arbeit |

❌ Nicht empfohlen: Informationsüberlastung
| Projektname | Aktueller Status | Detaillierte Beschreibung | Besitzer | Startdatum | Enddatum | Notizen |

2. Verwenden Sie bedeutende Überschriften

✅ Empfohlen: Beschreibende Überschriften
| Programmiersprache | Schwierigkeit | Anwendung |

❌ Nicht empfohlen: Vage Überschriften
| Item1 | Item2 | Item3 |

3. Verwenden Sie die richtige Ausrichtung

✅ Empfohlen: Zahlen rechtsbündig
| Produkt | Preis | Menge |
|:--------|------:|--------:|
| A       | ¥100  | 50      |

✅ Empfohlen: Text linksbündig
| Name | Abteilung | Position |
|:-----|:-----------|:--------|
| Zhang | Tech      | Ingenieur |

HTML-Ausgabe

Markdown-Tabellen werden in HTML konvertiert:

| Name | Alter |
|------|-----|
| Zhang | 25 |

Wird zu:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Alter</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Zhang</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Verwandte Syntax

• Grundlegende Syntaxübersicht - Markdown-Grundlagen
• Erweiterte Syntaxübersicht - Mehr Erweiterungen
• HTML-Syntax - HTML-Erweiterungen

Übung

Versuchen Sie, die folgenden Tabellen zu erstellen:

1. Eine Mitarbeiter-Einführungstabelle
2. Eine Produktpreisvergleichtabelle
3. Eine Projektfortschrittstabelle
4. Eine Technikstapelbewertungstabelle

Empfohlene Tools

Tabellen-Generatoren

• Online-Tools: Tabellen-Generator, Markdown-Tabellen-Generator
• Editor-Plugins: VS Code Markdown-Tabelle, Typora-Tabellenbearbeitung
• Konvertierungstools: Excel zu Markdown, CSV zu Markdown

Tabellen-Schönheit

• CSS-Frameworks: Bootstrap, Tailwind CSS
• Tabellen-Bibliotheken: DataTables, AG Grid
• Markdown-Erweiterungen: markdown-it-table, remark-gfm