Cú pháp bảng
Bảng là một phần quan trọng của cú pháp mở rộng Markdown, dùng để trình bày dữ liệu có cấu trúc.
Cú pháp bảng cơ bản
Bảng đơn giản
Sử dụng dấu gạch dọc | để phân tách cột, dùng - để tạo dòng phân cách tiêu đề:
markdown
| Họ tên | Tuổi | Nghề nghiệp |
|------|------|------|
| Zhang San | 25 | Kỹ sư |
| Li Si | 30 | Nhà thiết kế |
| Vương Ngũ | 28 | Giám đốc sản phẩm |Hiệu ứng hiển thị:
| Họ tên | Tuổi | Nghề nghiệp |
|---|---|---|
| Zhang San | 25 | Kỹ sư |
| Li Si | 30 | Nhà thiết kế |
| Vương Ngũ | 28 | Giám đốc sản phẩm |
Căn chỉnh bảng
Sử dụng dấu hai chấm : để điều khiển căn chỉnh cột:
markdown
| Căn trái | Căn giữa | Căn phải |
|:-------|:--------:|-------:|
| Nội dung 1 | Nội dung 1 | Nội dung 1 |
| Nội dung 2 | Nội dung 2 | Nội dung 2 |
| Nội dung 3 | Nội dung 3 | Nội dung 3 |Hiệu ứng hiển thị:
| Căn trái | Căn giữa | Căn phải |
|---|---|---|
| Nội dung 1 | Nội dung 1 | Nội dung 1 |
| Nội dung 2 | Nội dung 2 | Nội dung 2 |
| Nội dung 3 | Nội dung 3 | Nội dung 3 |
Chi tiết cách căn chỉnh
Cú pháp căn chỉnh
| Cú pháp | Cách căn chỉnh | Ví dụ |
|---|---|---|
--- | Căn trái (mặc định) | ` |
:--: | Căn giữa | ` |
--: | Căn phải | ` |
Bảng dữ liệu số
Phù hợp dùng căn phải để hiển thị số:
markdown
| Sản phẩm | Giá | Lượng bán | Doanh thu |
|:-----|-----:|-----:|-----:|
| Sản phẩm A | ¥99 | 1,250 | ¥123,750 |
| Sản phẩm B | ¥199 | 856 | ¥170,344 |
| Sản phẩm C | ¥299 | 432 | ¥129,168 |
| **Tổng cộng** | | **2,538** | **¥423,262** |Hiệu ứng hiển thị:
| Sản phẩm | Giá | Lượng bán | Doanh thu |
|---|---|---|---|
| Sản phẩm A | ¥99 | 1,250 | ¥123,750 |
| Sản phẩm B | ¥199 | 856 | ¥170,344 |
| Sản phẩm C | ¥299 | 432 | ¥129,168 |
| Tổng cộng | 2,538 | ¥423,262 |
Định dạng trong bảng
Định dạng nội dòng
Các ô trong bảng hỗ trợ định dạng nội dòng Markdown:
markdown
| Chức năng | Trạng thái | Mô tả |
|------|------|------|
| **Đăng nhập** | ✅ Hoàn thành | Người dùng có thể đăng nhập bằng email |
| *Đăng ký* | 🚧 Đang thực hiện | Hỗ trợ đăng ký bên thứ ba |
| `Đặt lại mật khẩu` | ❌ Chưa phát triển | Đặt lại mật khẩu qua email |
| [Trung tâm người dùng](/) | ⏳ Đang lên kế hoạch | Quản lý thông tin người dùng |Hiệu ứng hiển thị:
| Chức năng | Trạng thái | Mô tả |
|---|---|---|
| Đăng nhập | ✅ Hoàn thành | Người dùng có thể đăng nhập bằng email |
| Đăng ký | 🚧 Đang thực hiện | Hỗ trợ đăng ký bên thứ ba |
Đặt lại mật khẩu | ❌ Chưa phát triển | Đặt lại mật khẩu qua email |
| Trung tâm người dùng | ⏳ Đang lên kế hoạch | Quản lý thông tin người dùng |
Mã trong bảng
markdown
| Lệnh | Chức năng | Ví dụ |
|------|------|------|
| `ls` | Liệt kê tệp | `ls -la` |
| `cd` | Chuyển thư mục | `cd /home/user` |
| `mkdir` | Tạo thư mục | `mkdir new-folder` |
| `rm` | Xóa tệp | `rm -rf folder/` |Hiệu ứng hiển thị:
| Lệnh | Chức năng | Ví dụ |
|---|---|---|
ls | Liệt kê tệp | ls -la |
cd | Chuyển thư mục | cd /home/user |
mkdir | Tạo thư mục | mkdir new-folder |
rm | Xóa tệp | rm -rf folder/ |
Ví dụ bảng phức tạp
Bảng so sánh công nghệ
markdown
| Đặc điểm | React | Vue | Angular |
|:-----|:-----:|:---:|:-------:|
| **Độ khó học** | Trung bình | Dễ | Khó |
| **Hiệu năng** | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| **Hệ sinh thái** | Phong phú | Tốt | Đầy đủ |
| **Hỗ trợ doanh nghiệp** | Facebook | Độc lập | Google |
| **TypeScript** | ✅ | ✅ | ✅ Tích hợp sẵn |
| **Mức độ hoạt động cộng đồng** | Rất cao | Cao | Trung bình |Hiệu ứng hiển thị:
| Đặc điểm | React | Vue | Angular |
|---|---|---|---|
| Độ khó học | Trung bình | Dễ | Khó |
| Hiệu năng | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| Hệ sinh thái | Phong phú | Tốt | Đầy đủ |
| Hỗ trợ doanh nghiệp | Độc lập | ||
| TypeScript | ✅ | ✅ | ✅ Tích hợp sẵn |
| Mức độ hoạt động cộng đồng | Rất cao | Cao | Trung bình |
Bảng tài liệu API
markdown
| Tham số | Loại | Bắt buộc | Giá trị mặc định | Mô tả |
|------|------|:----:|--------|------|
| `id` | `number` | ✅ | - | Định danh duy nhất người dùng |
| `name` | `string` | ✅ | - | Tên người dùng |
| `email` | `string` | ✅ | - | Địa chỉ email người dùng |
| `age` | `number` | ❌ | `null` | Tuổi người dùng |
| `avatar` | `string` | ❌ | `"/default.jpg"` | URL ảnh đại diện |
| `status` | `enum` | ❌ | `"active"` | Trạng thái tài khoản: `active` \| `inactive` |Hiệu ứng hiển thị:
| Tham số | Loại | Bắt buộc | Giá trị mặc định | Mô tả |
|---|---|---|---|---|
id | number | ✅ | - | Định danh duy nhất người dùng |
name | string | ✅ | - | Tên người dùng |
email | string | ✅ | - | Địa chỉ email người dùng |
age | number | ❌ | null | Tuổi người dùng |
avatar | string | ❌ | "/default.jpg" | URL ảnh đại diện |
status | enum | ❌ | "active" | Trạng thái tài khoản: active | inactive |
Kỹ thuật định dạng bảng
Sử dụng biểu tượng cảm xúc
markdown
| Hệ điều hành | Trạng thái hỗ trợ | Ghi chú |
|----------|:--------:|------|
| Windows | ✅ | Hỗ trợ đầy đủ |
| macOS | ✅ | Hỗ trợ đầy đủ |
| Linux | ⚠️ | Hỗ trợ một phần |
| iOS | ❌ | Không hỗ trợ |
| Android | 🚧 | Đang phát triển |Hiệu ứng hiển thị:
| Hệ điều hành | Trạng thái hỗ trợ | Ghi chú |
|---|---|---|
| Windows | ✅ | Hỗ trợ đầy đủ |
| macOS | ✅ | Hỗ trợ đầy đủ |
| Linux | ⚠️ | Hỗ trợ một phần |
| iOS | ❌ | Không hỗ trợ |
| Android | 🚧 | Đang phát triển |
Sử dụng badge
markdown
| Dự án | Trạng thái | Phiên bản |
|------|------|------|
| React |  | `v18.2.0` |
| Vue |  | `v3.3.0` |
| Angular |  | `v16.0.0` |Xử lý ô trống
Biểu thị nội dung trống
markdown
| Hạng mục | Q1 | Q2 | Q3 | Q4 |
|------|:--:|:--:|:--:|:--:|
| Doanh thu | 1 triệu | 1.2 triệu | - | - |
| Chi phí | 800 nghìn | 900 nghìn | 950 nghìn | - |
| Lợi nhuận | 200 nghìn | 300 nghìn | | |Hiệu ứng hiển thị:
| Hạng mục | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| Doanh thu | 1 triệu | 1.2 triệu | - | - |
| Chi phí | 800 nghìn | 900 nghìn | 950 nghìn | - |
| Lợi nhuận | 200 nghìn | 300 nghìn |
Lỗi thường gặp và giải pháp
1. Ký tự phân cách không căn chỉnh
markdown
❌ Sai:
| Họ tên | Tuổi|Nghề nghiệp|
|------|-----|-----|
|Zhang San|25|Kỹ sư|
✅ Đúng:
| Họ tên | Tuổi | Nghề nghiệp |
|------|------|------|
| Zhang San | 25 | Kỹ sư |2. Thiếu dòng phân cách
markdown
❌ Sai:
| Họ tên | Tuổi | Nghề nghiệp |
| Zhang San | 25 | Kỹ sư |
✅ Đúng:
| Họ tên | Tuổi | Nghề nghiệp |
|------|------|------|
| Zhang San | 25 | Kỹ sư |3. Số cột không khớp
markdown
❌ Sai:
| Họ tên | Tuổi | Nghề nghiệp |
|------|------|------|
| Zhang San | 25 | ← thiếu cột thứ ba
✅ Đúng:
| Họ tên | Tuổi | Nghề nghiệp |
|------|------|------|
| Zhang San | 25 | Kỹ sư |4. Xử lý ký tự đặc biệt
markdown
❌ Vấn đề:
| Giá | Mô tả |
|------|------|
| $100|Bao gồm thuế | ← ký tự phân cách bị dùng sai
✅ Giải pháp:
| Giá | Mô tả |
|------|------|
| $100 | Bao gồm thuế |
| $200 | Giá\|Bao gồm thuế | ← thoát ký tự phân cáchTính năng bảng nâng cao
Sử dụng HTML để tăng cường
markdown
<table>
<tr>
<th colspan="2">Tiêu đề cột gộp</th>
<th>Cột thông thường</th>
</tr>
<tr>
<td rowspan="2">Hàng gộp</td>
<td>Dữ liệu 1</td>
<td>Dữ liệu 2</td>
</tr>
<tr>
<td>Dữ liệu 3</td>
<td>Dữ liệu 4</td>
</tr>
</table>Hiệu ứng hiển thị:
| Tiêu đề cột gộp | Cột thông thường | |
|---|---|---|
| Hàng gộp | Dữ liệu 1 | Dữ liệu 2 |
| Dữ liệu 3 | Dữ liệu 4 | |
Tùy chỉnh kiểu bảng
markdown
<table style="width: 100%; border-collapse: collapse;">
<tr style="background-color: #f0f0f0;">
<th style="border: 1px solid #ddd; padding: 8px;">Sản phẩm</th>
<th style="border: 1px solid #ddd; padding: 8px;">Giá</th>
</tr>
<tr>
<td style="border: 1px solid #ddd; padding: 8px;">Sản phẩm A</td>
<td style="border: 1px solid #ddd; padding: 8px; color: red;">¥99</td>
</tr>
</table>Tình huống ứng dụng thực tế
1. Quản lý dự án
markdown
## Bảng tiến độ nhiệm vụ
| Nhiệm vụ | Người phụ trách | Thời gian bắt đầu | Thời hạn | Trạng thái | Mức độ hoàn thành |
|------|--------|----------|----------|:----:|:------:|
| Phân tích yêu cầu | Zhang San | 2023-10-01 | 2023-10-07 | ✅ | 100% |
| Thiết kế UI | Lý Tứ | 2023-10-08 | 2023-10-15 | 🚧 | 75% |
| Phát triển frontend | Vương Ngũ | 2023-10-16 | 2023-10-30 | ⏳ | 0% |
| Phát triển backend | Triệu Lục | 2023-10-16 | 2023-11-05 | ⏳ | 0% |
| Kiểm thử | Tôn Thất | 2023-11-06 | 2023-11-12 | ⏳ | 0% |2. So sánh sản phẩm
markdown
## So sánh gói đăng ký
| Chức năng | Phiên bản miễn phí | Phiên bản chuyên nghiệp | Phiên bản doanh nghiệp |
|------|:------:|:------:|:------:|
| **Số lượng người dùng** | 5 người | 50 người | Không giới hạn |
| **Không gian lưu trữ** | 1GB | 100GB | 1TB |
| **Gọi API** | 1000/tháng | 10 vạn/tháng | Không giới hạn |
| **Hỗ trợ kỹ thuật** | Cộng đồng | Email | Hỗ trợ khách hàng chuyên dụng |
| **Đảm bảo SLA** | - | 99.9% | 99.99% |
| **Giá** | Miễn phí | ¥99/tháng | ¥999/tháng |
| | [Chọn](/) | [Chọn](/) | [Liên hệ bán hàng](/) |3. Báo cáo tài chính
markdown
## Báo cáo tài chính hàng tháng
| Hạng mục | Tháng 1 | Tháng 2 | Tháng 3 | Tổng cộng |
|------|----:|----:|----:|-----:|
| **Doanh thu** | | | | |
| Bán sản phẩm | 50,000 | 55,000 | 60,000 | 165,000 |
| Doanh thu dịch vụ | 20,000 | 22,000 | 25,000 | 67,000 |
| Doanh thu khác | 2,000 | 1,500 | 3,000 | 6,500 |
| *Tổng phụ* | *72,000* | *78,500* | *88,000* | *238,500* |
| **Chi phí** | | | | |
| Lương nhân viên | 30,000 | 30,000 | 30,000 | 90,000 |
| Thuê văn phòng | 8,000 | 8,000 | 8,000 | 24,000 |
| Chi phí marketing | 10,000 | 12,000 | 15,000 | 37,000 |
| *Tổng phụ* | *48,000* | *50,000* | *53,000* | *151,000* |
| **Lợi nhuận ròng** | **24,000** | **28,500** | **35,000** | **87,500** |Thực tiễn tốt
1. Giữ đơn giản
markdown
✅ Khuyến nghị: Đơn giản rõ ràng
| Dự án | Trạng thái |
|------|------|
| A | Hoàn thành |
| B | Đang thực hiện |
❌ Không khuyến nghị: Quá tải thông tin
| Tên dự án | Trạng thái hiện tại | Thông tin mô tả chi tiết | Tên người phụ trách | Thời gian bắt đầu | Thời gian kết thúc | Ghi chú |2. Sử dụng tiêu đề có ý nghĩa
markdown
✅ Khuyến nghị: Tiêu đề mô tả
| Ngôn ngữ lập trình | Độ khó học | Lĩnh vực ứng dụng |
❌ Không khuyến nghị: Tiêu đề mơ hồ
| Dự án 1 | Dự án 2 | Dự án 3 |3. Sử dụng căn chỉnh phù hợp
markdown
✅ Khuyến nghị: Căn phải cho số
| Sản phẩm | Giá | Số lượng |
|:-----|-----:|-----:|
| A | ¥100 | 50 |
✅ Khuyến nghị: Căn trái cho văn bản
| Họ tên | Phòng ban | Chức vụ |
|:-----|:-----|:-----|
| Zhang San | Phòng kỹ thuật | Kỹ sư |Đầu ra HTML
Bảng Markdown chuyển đổi thành HTML:
markdown
| Họ tên | Tuổi |
|------|------|
| Zhang San | 25 |Chuyển đổi thành:
html
<table>
<thead>
<tr>
<th>Họ tên</th>
<th>Tuổi</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zhang San</td>
<td>25</td>
</tr>
</tbody>
</table>Cú pháp liên quan
- Tổng quan cú pháp cơ bản - Cơ bản Markdown
- Tổng quan cú pháp mở rộng - Thêm tính năng mở rộng
- Cú pháp HTML - Tăng cường HTML
Luyện tập
Thử tạo các bảng sau:
- Một bảng giới thiệu thành viên nhóm
- Một bảng so sánh giá sản phẩm
- Một bảng theo dõi tiến độ dự án
- Một bảng đánh giá ngăn xếp công nghệ
Công cụ khuyến nghị
Trình tạo bảng
- Công cụ trực tuyến: Tables Generator、Markdown Tables Generator
- Plugin trình soạn thảo: VS Code Markdown Table、Chỉnh sửa bảng Typora
- Công cụ chuyển đổi: Excel to Markdown、CSV to Markdown
Tùy chỉnh bảng
- Framework CSS: Bootstrap、Tailwind CSS
- Thư viện bảng: DataTables、AG Grid
- Mở rộng Markdown: markdown-it-table、remark-gfm