Tutorial 2x Trình bày dữ liệu chuyên nghiệp với BB Code Table của XenForo 2.3

[PVS]

Trình bày dữ liệu chuyên nghiệp với BB Code Table của XenForo 2.3

Khi bạn cần so sánh thông số kỹ thuật, liệt kê giá cả, hoặc trình bày bất kỳ dữ liệu nào có cấu trúc, việc sử dụng các gạch đầu dòng thông thường có thể trở nên rất lộn xộn và khó đọc. Để giải quyết vấn đề này, XenForo cung cấp một bộ BB Code mạnh mẽ cho phép bạn tạo ra các bảng biểu (tables) chuyên nghiệp, ngay trong trình soạn thảo.

​

Việc làm chủ các thẻ BB Code như [TABLE] , [TR] , [TH] , [TD] sẽ giúp nội dung của bạn trở nên rõ ràng, có tổ chức và dễ hiểu hơn rất nhiều. Bài viết này sẽ hướng dẫn bạn chi tiết cách sử dụng chúng.

Hiểu về cấu trúc của một Bảng​

Trước khi bắt đầu, hãy hiểu cấu trúc cơ bản của một bảng. Nó giống như một bảng tính Excel, bao gồm:

• [TABLE]...[/TABLE]: Thẻ chính, bao bọc toàn bộ bảng của bạn.
• [TR]...[/TR]: Viết tắt của "Table Row". Thẻ này dùng để tạo ra một hàng.
• [TH]...[/TH]: Viết tắt của "Table Header". Dùng để tạo ra các ô tiêu đề cho cột, chữ sẽ được in đậm và căn giữa mặc định.
• [TD]...[/TD]: Viết tắt của "Table Data". Dùng để tạo ra các ô dữ liệu thông thường.

Bước 1: Tạo một Bảng đơn giản​

Hãy bắt đầu với một ví dụ so sánh hai sản phẩm.

Mã BB Code:

[TABLE]
    [TR]
        [TH]Tính năng[/TH]
        [TH]Sản phẩm A[/TH]
        [TH]Sản phẩm B[/TH]
    [/TR]
    [TR]
        [TD]CPU[/TD]
        [TD]Snapdragon 8 Gen 2[/TD]
        [TD]Apple A16 Bionic[/TD]
    [/TR]
    [TR]
        [TD]RAM[/TD]
        [TD]8 GB[/TD]
        [TD]6 GB[/TD]
    [/TR]
    [TR]
        [TD]Pin[/TD]
        [TD]5000 mAh[/TD]
        [TD]4323 mAh[/TD]
    [/TR]
[/TABLE]

Cách hoạt động:

1. Chúng ta bắt đầu và kết thúc bằng thẻ [TABLE].
2. Hàng đầu tiên ([TR]) chứa các ô tiêu đề ([TH]) để định nghĩa các cột.
3. Mỗi hàng tiếp theo ([TR]) chứa các ô dữ liệu ([TD]) tương ứng với từng cột.

Bước 2: Tùy chỉnh nâng cao - Căn chỉnh nội dung trong Ô​

Mặc dù thẻ [TD] và [TH] không có tùy chọn căn chỉnh trực tiếp, bạn hoàn toàn có thể sử dụng các thẻ BB Code căn chỉnh văn bản tiêu chuẩn ( [LEFT] , [CENTER] , [RIGHT] ) bên trong các ô đó.

Mã BB Code:

[TABLE]
    [TR]
        [TH]Tên sản phẩm[/TH]
        [TH]Giá (VND)[/TH]
        [TH]Tình trạng[/TH]
    [/TR]
    [TR]
        [TD]Laptop ABC[/TD]
        [TD][RIGHT]25,000,000[/RIGHT][/TD]
        [TD][CENTER]Còn hàng[/CENTER][/TD]
    [/TR]
    [TR]
        [TD]Chuột XYZ[/TD]
        [TD][RIGHT]1,200,000[/RIGHT][/TD]
        [TD][CENTER]Hết hàng[/CENTER][/TD]
    [/TR]
[/TABLE]

Cách làm: Như bạn thấy, chúng ta chỉ cần đặt nội dung cần căn chỉnh vào bên trong cặp thẻ [RIGHT]...[/RIGHT] hoặc [CENTER]...[/CENTER] ngay sau khi mở thẻ [TD] .

Thủ thuật: Sử dụng trình tạo Bảng trên thanh công cụ​

Để không phải gõ thủ công, trình soạn thảo của XenForo có một nút tạo bảng rất tiện lợi.

1. Trên thanh công cụ của trình soạn thảo, tìm và nhấp vào biểu tượng hình cái bảng.
2. Một menu sẽ hiện ra cho phép bạn:
   • Insert table: Chọn số hàng và số cột bạn muốn, trình soạn thảo sẽ tự động chèn mã BB Code mẫu cho bạn.
   • Các tùy chọn khác: Chèn/Xóa hàng, Chèn/Xóa cột.
3. Sau khi đã có khung sườn, bạn chỉ cần điền nội dung vào các ô tương ứng.

Kết luận​

Việc trình bày dữ liệu một cách khoa học là một phần quan trọng để tạo ra nội dung chất lượng cao. Với bộ BB Code [TABLE] , bạn đã có trong tay một công cụ mạnh mẽ và dễ sử dụng để tạo ra các bảng biểu chuyên nghiệp. Hãy tận dụng nó trong các bài viết đánh giá, hướng dẫn, hoặc bất kỳ khi nào bạn cần so sánh và hệ thống hóa thông tin.

Chúc các bạn thành công.

VNXF.VN​