Tạo Bảng Dữ Liệu Đẹp Mắt trên Blogspot với Shortcode

Chào các bạn! Nếu bạn là người mới sử dụng Blogspot và muốn trình bày thông tin một cách rõ ràng, chuyên nghiệp, thì shortcode tạo bảng dữ liệu là một công cụ không thể thiếu. Bảng giúp bạn hiển thị thông tin như so sánh sản phẩm, lịch trình, hoặc danh sách một cách trực quan. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách sử dụng shortcode tạo bảng để làm cho bài viết Blogspot của bạn thêm sinh động và dễ đọc.

Shortcode tạo bảng dữ liệu là gì?

Shortcode tạo bảng là một đoạn mã HTML ngắn gọn, cho phép bạn chèn bảng dữ liệu vào bài viết hoặc trang Blogspot mà không cần viết mã phức tạp. Bảng này có thể tùy chỉnh số cột, dòng, và nội dung để phù hợp với nhu cầu của bạn.

Cách sử dụng shortcode tạo bảng

1. Đăng nhập vào Blogger Dashboard.
2. Vào Bài đăng hoặc Trang, chọn chỉnh sửa hoặc thêm mới.
3. Chuyển sang chế độ HTML trong trình chỉnh sửa.
4. Dán mã shortcode sau vào vị trí bạn muốn bảng xuất hiện:

<div class="data-table">
    <table>
        <thead>
            <tr>
                <th>Mục 1</th>
                <th>Mục 2</th>
                <th>Mục 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-label="Mục 1">Nội dung 1.0</td>
                <td data-label="Mục 2">Nội dung 1.1</td>
                <td data-label="Mục 3">Nội dung 1.2</td>
            </tr>
            <tr>
                <td data-label="Mục 1">Nội dung 2.0</td>
                <td data-label="Mục 2">Nội dung 2.1</td>
                <td data-label="Mục 3">Nội dung 2.2</td>
            </tr>
            <tr>
                <td data-label="Mục 1">Nội dung 3.0</td>
                <td data-label="Mục 2">Nội dung 3.1</td>
                <td data-label="Mục 3">Nội dung 3.2</td>
            </tr>
        </tbody>
    </table>
</div>
    

Lưu ý khi sử dụng

• Tùy chỉnh nội dung: Thay đổi tiêu đề cột (<th>) và nội dung dòng (<td>) theo thông tin bạn muốn hiển thị.
• Thêm CSS để đẹp hơn: Để bảng hiển thị gọn gàng, thêm CSS vào Theme > Edit HTML trước thẻ </head>:

  
  .data-table table { width: 100%; border-collapse: collapse; }
  .data-table th, .data-table td { border: 1px solid #ddd; padding: 8px; text-align: left; }
  .data-table th { background-color: #f2f2f2; font-weight: bold; }
  .data-table td[data-label]::before { content: attr(data-label); display: none; }
  @media screen and (max-width: 600px) {
      .data-table table, .data-table thead, .data-table tbody, .data-table th, .data-table td, .data-table tr { display: block; }
      .data-table th { display: none; }
      .data-table td { border: none; position: relative; padding-left: 50%; }
      .data-table td::before { content: attr(data-label); position: absolute; left: 10px; font-weight: bold; }
  }
              

• Kiểm tra trên mobile: CSS trên giúp bảng responsive, hiển thị tốt trên cả máy tính và điện thoại.
• SEO: Đặt tiêu đề cột rõ ràng, dễ hiểu để tối ưu hóa tìm kiếm.

Kết luận

Shortcode tạo bảng dữ liệu là cách đơn giản để trình bày thông tin một cách chuyên nghiệp trên Blogspot. Chỉ với vài bước, bạn có thể tạo bảng đẹp mắt, dễ đọc, và thu hút người xem. Hãy thử áp dụng và tùy chỉnh theo phong cách blog của bạn! Nếu bạn cần thêm hướng dẫn, hãy để lại câu hỏi trong phần bình luận.

Chúc bạn thành công với blog của mình!