Cách Vẽ Bảng Trong WordPress: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

Mở Đầu

WordPress là một trong những nền tảng quản trị nội dung (CMS) phổ biến nhất hiện nay, không chỉ vì tính linh hoạt, dễ sử dụng mà còn vì khả năng mở rộng mạnh mẽ thông qua các plugin và theme. Khi xây dựng một trang web chuyên nghiệp, việc trình bày dữ liệu một cách rõ ràng, trực quan là rất quan trọng. Bảng (table) là một trong những công cụ cơ bản giúp bạn sắp xếp thông tin, so sánh các dữ liệu, hoặc tạo ra các danh sách có cấu trúc.

Trong bài viết này, chúng ta sẽ đi sâu vào cách vẽ bảng trong WordPress từ những bước cơ bản nhất cho người mới bắt đầu, đến các kỹ thuật nâng cao sử dụng Gutenberg, Classic Editor, plugin, và thậm chí là viết mã HTML/CSS tùy chỉnh. Mục tiêu là cung cấp cho bạn một hướng dẫn toàn diện, chi tiết, và dễ thực hiện, giúp bạn tạo ra các bảng đẹp mắt, đáp ứng chuẩn SEO và thân thiện với thiết bị di động.

1. Tại Sao Bạn Nên Sử Dụng Bảng Trong WordPress?

1.1. Tốt cho SEO

• Cấu trúc dữ liệu: Các công cụ tìm kiếm như Google có thể hiểu rõ hơn về nội dung của bạn khi dữ liệu được sắp xếp thành bảng, đặc biệt khi bạn sử dụng schema markup.
• Tăng thời gian người dùng trên trang: Bảng giúp người đọc nhanh chóng tìm thấy thông tin cần thiết, giảm tỷ lệ bounce rate.

1.2. Trải nghiệm người dùng (UX)

• So sánh dễ dàng: Khi bạn cần so sánh các sản phẩm, gói dịch vụ, hoặc tính năng, bảng là công cụ tối ưu.
• Đọc nhanh, hiểu nhanh: Bảng cung cấp một cách trình bày trực quan, giúp người dùng nắm bắt thông tin trong vài giây.

1.3. Độ linh hoạt cao

• Tùy chỉnh giao diện: Bạn có thể thay đổi màu sắc, độ rộng cột, font chữ, và thậm chí thêm biểu tượng.
• Tương thích với mọi theme: Nếu bạn biết cách viết CSS, bảng có thể phù hợp hoàn hảo với bất kỳ theme nào.

2. Các Phương Pháp Tạo Bảng Trong WordPress

WordPress hiện hỗ trợ nhiều cách để chèn bảng vào bài viết hoặc trang. Dưới đây là những phương pháp phổ biến nhất:

Phương pháp	Ưu điểm	Nhược điểm
Gutenberg Block “Table”	Dễ dùng, không cần cài plugin, hỗ trợ responsive cơ bản	Giới hạn trong việc tùy chỉnh kiểu dáng
Classic Editor (HTML)	Kiểm soát hoàn toàn mã HTML	Cần kiến thức HTML, không thân thiện với người mới
Plugin “TablePress”	Tính năng mạnh, hỗ trợ import/export CSV, shortcode	Cần cài đặt thêm, có thể làm chậm site nếu không tối ưu
Plugin “WP Table Builder” (drag‑and‑drop)	Giao diện kéo thả, phù hợp cho người không biết code	Một số tính năng premium cần trả phí
Viết mã CSS/JS tùy chỉnh	Tự do thiết kế, tối ưu tốc độ	Yêu cầu kiến thức lập trình, rủi ro nếu không hiểu

Trong các phần tiếp theo, chúng ta sẽ đi sâu vào từng phương pháp, cung cấp hướng dẫn chi tiết và ví dụ thực tế.

3. Sử Dụng Gutenberg Block “Table”

3.1. Khởi tạo bảng

Có thể bạn quan tâm: Cách Vẽ Bát Quái Đồ: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

1. Mở trình soạn thảo Gutenberg: Vào Dashboard → Posts → Add New (hoặc Pages → Add New).
2. Nhấn vào dấu + để thêm block mới.
3. Tìm “Table” trong ô tìm kiếm và chọn block “Table”.

3.2. Cấu hình ban đầu

• Số cột và hàng: Gutenberg sẽ hỏi bạn muốn tạo bảng bao nhiêu cột và bao nhiêu hàng. Ví dụ: 4 cột, 5 hàng.
• Header Row: Bật tùy chọn “Header” để dòng đầu tiên được coi là tiêu đề cột (được in đậm và có nền màu khác).
• Fixed Width (tùy chọn): Nếu muốn cột cố định độ rộng, bật tùy chọn này.

3.3. Nhập dữ liệu

• Click vào ô cần chỉnh sửa, nhập nội dung.
• Sử dụng phím Tab để di chuyển nhanh sang ô tiếp theo.
• Để xóa hàng hoặc cột, chọn ô bất kỳ trong hàng/cột muốn xóa → nhấn biểu tượng ba chấm (⋮) → “Delete row” hoặc “Delete column”.

3.4. Định dạng nội dung

• Bold, Italic, Link: Gutenberg cho phép định dạng văn bản trong ô giống như trong bất kỳ block nào khác.
• Alignment: Bạn có thể căn lề (trái, giữa, phải) cho nội dung trong ô bằng cách chọn ô, sau đó nhấn biểu tượng căn lề trong thanh công cụ.

3.5. Tùy chỉnh kiểu dáng (CSS)

Mặc dù Gutenberg cung cấp một số tùy chọn cơ bản, để thay đổi màu nền, viền, hoặc font chữ, bạn cần thêm CSS tùy chỉnh:

/ Thêm vào Appearance → Customize → Additional CSS /
.wp-block-table table { width: 100%; / Đảm bảo bảng rộng 100% khung chứa / border-collapse: collapse;
}
.wp-block-table th,
.wp-block-table td { border: 1px solid #ddd; padding: 12px; text-align: left;
}
.wp-block-table th { background-color: #f5f5f5; font-weight: bold;
}

Sau khi lưu, bảng sẽ có giao diện sạch sẽ, chuyên nghiệp và tương thích với mọi thiết bị.

3.6. Lưu và xuất bản

• Kiểm tra lại nội dung, nhấn “Preview” để xem trước trên desktop và mobile.
• Khi hài lòng, nhấn “Publish” hoặc “Update”.

Lưu ý: Gutenberg tự động lưu bản nháp, nên bạn không lo mất dữ liệu.

4. Tạo Bảng Với Classic Editor (HTML)

4.1. Khi nào nên dùng Classic Editor?

• Khi bạn muốn kiểm soát hoàn toàn cấu trúc HTML của bảng.
• Khi cần chèn các thuộc tính đặc biệt như colspan, rowspan, hoặc sử dụng các thẻ <thead>, <tbody>, <tfoot> để tối ưu SEO.

4.2. Cấu trúc cơ bản của một bảng HTML

<table> <thead> <tr> <th>Tiêu đề 1</th> <th>Tiêu đề 2</th> <th>Tiêu đề 3</th> </tr> </thead> <tbody> <tr> <td>Dữ liệu A1</td> <td>Dữ liệu A2</td> <td>Dữ liệu A3</td> </tr> <tr> <td>Dữ liệu B1</td> <td>Dữ liệu B2</td> <td>Dữ liệu B3</td> </tr> </tbody>
</table>

4.3. Thêm colspan và rowspan

<table> <tr> <th rowspan="2">Tên</th> <th colspan="2">Điểm</th> </tr> <tr> <th>Toán</th> <th>Văn</th> </tr> <tr> <td>Nguyễn A</td> <td>8</td> <td>9</td> </tr>
</table>

4.4. Định dạng CSS cho bảng Classic Editor

Có thể bạn quan tâm: Cách Vẽ Báo Tường Mẫu: Hướng Dẫn Chi Tiết Từ A Đến Z

Bạn có thể chèn CSS trực tiếp trong phần Customize → Additional CSS hoặc trong file style.css của theme con (child theme).

/ Bảng đẹp cho Classic Editor /
table { width: 100%; border: 1px solid #ccc; border-collapse: collapse;
}
th, td { border: 1px solid #ccc; padding: 10px;
}
th { background-color: #333; color: #fff; text-align: center;
}
tr:nth-child(even) { background-color: #f9f9f9;
}

4.5. Kiểm tra tính responsive

Các bảng HTML truyền thống thường không tự động co giãn trên mobile. Để khắc phục:

@media screen and (max-width: 768px) { table, thead, tbody, th, td, tr { display: block; } th { position: absolute; top: -9999px; left: -9999px; } td { border: none; position: relative; padding-left: 50%; } td:before { content: attr(data-label); position: absolute; left: 0; width: 45%; padding-left: 10px; font-weight: bold; }
}

Sau đó, trong HTML, thêm thuộc tính data-label cho mỗi ô:

<td data-label="Tên">Nguyễn A</td>
<td data-label="Toán">8</td>
<td data-label="Văn">9</td>

Kết quả: Trên màn hình nhỏ, mỗi hàng sẽ hiển thị dạng “Tên: Nguyễn A”, “Toán: 8”, “Văn: 9”, giúp người dùng dễ đọc.

5. Sử Dụng Plugin TablePress

5.1. Giới thiệu ngắn gọn

TablePress là một trong những plugin tạo bảng phổ biến nhất trên WordPress. Nó cho phép bạn quản lý bảng trong một giao diện riêng, nhập dữ liệu qua CSV, Google Sheets, và chèn bảng bằng shortcode. Không cần biết HTML, bạn vẫn có thể tạo bảng đẹp và SEO‑friendly.

5.2. Cài đặt và kích hoạt

1. Vào Dashboard → Plugins → Add New.
2. Tìm “TablePress”.
3. Nhấn “Install Now”, sau đó “Activate”.

5.3. Tạo bảng mới

• Vào TablePress → Add New Table.
• Đặt tên bảng, mô tả (tùy chọn), chọn số cột và hàng khởi tạo (có thể để 0 nếu bạn muốn nhập dữ liệu sau).
• Nhấn “Add Table”.

5.4. Nhập dữ liệu

Bạn có 3 cách:

Cách	Mô tả
Nhập trực tiếp	Sử dụng giao diện bảng trong admin để gõ dữ liệu ô‑ô.
Import CSV/Excel	Nhấn “Import” → chọn file CSV/Excel → TablePress sẽ tự động tạo bảng.
Google Sheets	Dùng plugin “TablePress Extension: Google Spreadsheet Integration” để đồng bộ dữ liệu.

5.5. Tùy chỉnh bảng

• Table Options: Cho phép bật/ tắt tiêu đề, lọc, phân trang, sắp xếp cột, và các tính năng JavaScript như DataTables.
• Advanced Options: Thêm CSS class tùy chỉnh, hoặc JavaScript riêng.

Ví dụ, bật Sorting và Search:

table id=1 /

Trong Table Options, tick “Enable sorting” và “Enable search”.

5.6. Thêm CSS tùy chỉnh

TablePress đã cung cấp một lớp CSS mặc định .tablepress. Bạn có thể viết CSS riêng trong Appearance → Customize → Additional CSS:

Có thể bạn quan tâm: Cách Vẽ Bánh Su Kem Đẹp Mắt Và Chuẩn Mực: Hướng Dẫn Từng Bước Cho Người Mới Bắt Đầu

.tablepress { border: 2px solid #0073aa;
}
.tablepress thead th { background-color: #0073aa; color: #fff;
}
.tablepress tbody tr:nth-child(even) { background-color: #f1f1f1;
}

5.7. Chèn bảng vào bài viết

Sau khi lưu, TablePress sẽ hiển thị Shortcode ở phía trên bảng, ví dụ: table id=1 /. Chỉ cần sao chép shortcode này và dán vào bất kỳ vị trí nào trong Gutenberg hoặc Classic Editor.

5.8. Ưu điểm và nhược điểm của TablePress

Ưu điểm	Nhược điểm
Không cần viết code	Đôi khi gây chậm nếu dùng nhiều bảng lớn
Import/Export CSV dễ dàng	Giao diện quản lý bảng có thể phức tạp đối với người mới
Hỗ trợ các extension (Responsive, Charts)	Cần cài thêm plugin để có tính năng responsive hoàn thiện

6. Plugin WP Table Builder (Drag‑and‑Drop)

6.1. Tại sao chọn WP Table Builder?

• Giao diện kéo thả: Thân thiện với người không biết code.
• Các thành phần đa dạng: Văn bản, hình ảnh, biểu tượng, nút, danh sách.
• Responsive tự động: Bảng sẽ tự điều chỉnh trên các thiết bị.

6.2. Cài đặt nhanh

1. Dashboard → Plugins → Add New → Tìm “WP Table Builder”.
2. Cài đặt và kích hoạt.

6.3. Tạo bảng

• Vào WP Table Builder → Add New.
• Chọn số cột và hàng (có thể thay đổi sau).
• Kéo các “elements” (Text, Image, Button…) vào ô mong muốn.

6.4. Tùy chỉnh kiểu dáng

Mỗi ô có thanh công cụ riêng: thay đổi màu nền, font, border, padding. Bạn cũng có thể đặt Column Width và Row Height bằng cách kéo viền.

6.5. Lưu và chèn

Sau khi hoàn thiện, nhấn “Save”. Bạn sẽ nhận được shortcode như wp_table_builder id="123". Dán vào bài viết và bản xem trước sẽ hiển thị bảng ngay lập tức.

Có thể bạn quan tâm: Cách Vẽ Bánh Răng Thẳng: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

6.6. Khi nào sử dụng WP Table Builder?

• Khi bạn muốn bảng có hình ảnh và nút hành động (CTA).
• Khi không muốn viết CSS/JS.
• Khi cần độ responsive hoàn hảo mà không tốn thời gian cấu hình.

7. Tối Ưu Hóa Bảng Cho SEO và Trải Nghiệm Người Dùng

7.1. Sử dụng Schema Markup (Table Schema)

Google có hỗ trợ Table Schema thông qua JSON‑LD. Thêm đoạn mã sau vào header hoặc footer (hoặc dùng plugin “Insert Headers and Footers”):

<script type="application/ld+json">
{ "@context": "https://schema.org", "@type": "Table", "name": "Bảng so sánh gói dịch vụ", "description": "So sánh các tính năng giữa các gói Basic, Pro, Enterprise", "columnHeaders": "Gói", "Giá", "Dung lượng", "Hỗ trợ", "rows": "Basic", "$10/tháng", "10GB", "Email", "Pro", "$30/tháng", "100GB", "Chat + Email", "Enterprise", "$100/tháng", "1TB", "24/7 Phone" }
</script>

7.2. Thêm alt text cho hình ảnh trong bảng

Nếu bảng chứa hình ảnh (ví dụ: biểu tượng), luôn đặt thuộc tính alt để cải thiện SEO và khả năng truy cập.

<td><img src="icon.png" alt="Biểu tượng tốc độ" /></td>

7.3. Đảm bảo tính responsive

• Sử dụng overflow-x:auto cho bảng rộng:

.table-responsive { overflow-x: auto;
}

• Đặt lớp này vào div bao quanh bảng:

<div class="table-responsive"> <!-- Bảng ở đây -->
</div>

7.4. Tối ưu tốc độ tải

• Tránh sử dụng quá nhiều bảng lớn trên một trang.
• Nếu bảng chứa dữ liệu tĩnh, cân nhắc caching (các plugin như WP Super Cache).
• Đối với TablePress, bật “Use DataTables” chỉ khi cần tính năng sắp xếp/tìm kiếm.

8. Các Lỗi Thường Gặp Khi Vẽ Bảng Và Cách Khắc Phục

Lỗi	Nguyên nhân	Cách khắc phục
Bảng không hiển thị trên mobile	Thiếu CSS responsive hoặc overflow-x:auto	Thêm lớp .table-responsive hoặc sử dụng plugin hỗ trợ responsive.
Các cột không đồng đều	Không đặt width cho cột, hoặc có colspan/rowspan không đúng	Đặt width cố định cho cột trong CSS hoặc điều chỉnh colspan.
Văn bản tràn ra ngoài ô	Padding hoặc white-space: nowrap	Thêm word-wrap: break-word; hoặc white-space: normal;.
Thanh tìm kiếm không hoạt động (TablePress)	JavaScript bị xung đột với theme/plugin khác	Kiểm tra console (F12) để tìm lỗi, tạm thời vô hiệu hoá plugin khác để xác định.
Độ rộng bảng vượt quá khu vực nội dung	Table width 100% nhưng container có padding lớn	Đặt max-width: 100%; và box-sizing: border-box; cho bảng.

9. Thực Hành: Tạo Bảng So Sánh Gói Dịch Vụ Bằng TablePress

Bước 1: Tạo bảng mới

• Tên bảng: “So sánh gói dịch vụ”.
• Số cột: 4 (Gói, Giá, Dung lượng, Hỗ trợ).
• Số hàng: 4 (header + 3 gói).

Bước 2: Nhập dữ liệu

Gói	Giá	Dung lượng	Hỗ trợ
Basic	$9.99/tháng	10GB	Email
Pro	$29.99/tháng	100GB	Email + Chat
Enterprise	$79.99/tháng	1TB	24/7 Phone

Bước 3: Kích hoạt tính năng sắp xếp và tìm kiếm

• Vào Table Options, tick “Enable sorting” và “Enable search”.

Bước 4: Thêm CSS tùy chỉnh

.tablepress-id-1 { border: 1px solid #004080;
}
.tablepress-id-1 thead th { background-color: #004080; color: #fff; text-align: center;
}
.tablepress-id-1 tbody tr:hover { background-color: #e6f2ff;
}

Bước 5: Chèn shortcode

Sao chép table id=1 / và dán vào trang “Gói Dịch Vụ”.

Bước 6: Kiểm tra responsive

• Sử dụng Chrome DevTools → Toggle device toolbar.
• Nếu bảng vẫn không co giãn, bọc shortcode trong <div class="table-responsive">.

<div class="table-responsive"> table id=1 /
</div>

Kết quả: Bảng hiển thị đẹp trên desktop, có thanh tìm kiếm, sắp xếp, và trên mobile người dùng có thể cuộn ngang để xem toàn bộ thông tin.

10. Kết Luận

Việc vẽ bảng trong WordPress không còn là một thách thức khó khăn. Từ các block tích hợp sẵn của Gutenberg, đến các plugin mạnh mẽ như TablePress và WP Table Builder, cho tới việc tự viết HTML/CSS, bạn có rất nhiều công cụ để lựa chọn tùy theo nhu cầu và trình độ kỹ thuật của mình.

• Nếu bạn mới bắt đầu: Hãy thử Gutenberg Block “Table” – nhanh, gọn, không cần cài thêm.
• Nếu cần tính năng nâng cao (import CSV, pagination, sorting): TablePress là lựa chọn lý tưởng.
• Nếu muốn giao diện kéo thả và responsive hoàn hảo: WP Table Builder sẽ đáp ứng tốt.
• Nếu muốn kiểm soát hoàn toàn mã nguồn: Classic Editor hoặc Gutenberg “Custom HTML” cho phép bạn tùy chỉnh mọi chi tiết.

Đừng quên tối ưu SEO bằng cách sử dụng schema markup, alt text cho hình ảnh, và đảm bảo tính responsive để người dùng trên mọi thiết bị đều có trải nghiệm tốt. Cuối cùng, hãy luôn kiểm tra tốc độ tải trang và tối ưu CSS/JS để website của bạn luôn nhanh chóng và thân thiện với người dùng.

Hy vọng bài viết này đã cung cấp cho bạn một hướng dẫn toàn diện, chi tiết và thực tiễn về cách vẽ bảng trong WordPress. Hãy thử ngay, áp dụng vào dự án của mình và chia sẻ kết quả với cộng đồng! Chúc bạn thành công.