• ✅ (Đã xác minh)
  • Tool tạo bảng responsive cho blogspot

    Như các bạn đã biết một điểm yếu của blogspot đó là việc tạo bảng Table. Do bản thân blogspot không có hỗ trợ công cụ tạo bảng mà đa phần sử dụng code CSS và HTML để tạo. Vì thế trong bài viết ngày hôm nay mình sẽ hướng dẫn các bạn cách tạo một bảng Table responsive với blogspot.

    Bước 1: Bạn truy cập vào https://www.tablesgenerator.com/html_tables 
    Giao diện ban đầu của nó bạn có thể thấy như hình bên dưới và một điều tôi vô cùng ngạc nhiên là nó không hề thua kém bất cứ một công cụ tạo bàng nào. Mọi thao tác bạn có thể tiến hành trên đồ họa như tạo bảng số dòng, số cột, thêm dòng, thêm cột, xóa cột y như trong Word hay Excel.

    Hướng dẫn tạo bảng (table) responsive cho blogspot
    Hướng dẫn tạo bảng ( table) responsive cho blogspot

    Bước 2: Bạn tiến hành các thao tác tạo bảng trên này sau khi làm xong bạn chỉ cần copy toàn bộ đoạn code bên dưới dán vào nơi mà bạn muốn hiển thị trên blogspot. Nhớ chuyển qua HTML khi viết bài bạn nhé. Ngoài ra mình thấy trong này có rất nhiều mẫu template có sẵn cực kỳ hay các bạn có thể tham khảo thêm nhé và bên dưới là kết quả sau mấy phút ngồi tạo thử bảng như bên dưới đây.

    Dạng vật liệu Các chi tiết bộ phận
    Đồng Các ống dẫn glycol, ống truyền nhiệt của dàn bay hơi
    Hợp kim đồng - kẽm Các van
    Thép Ống dẫn glycol, thùng chứa, các van
    Nhôm Bơm tuần hoàn, dàn lạnh
    Gang Các van, bơm tuần hoàng

    Kết luận: Như vậy qua bài viết trên mình đã hướng dẫn các bạn cách tạo bảng (table) reponsive trên blogspot với tool hỗ trợ cực kỳ đơn giản và nhanh. Nếu các bạn không làm được hãy sử dụng code mình cung cấp bên dưới đây nhé:
    <style type="text/css">
    .tg  {border-collapse:collapse;border-spacing:0;}
    .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
      overflow:hidden;padding:10px 5px;word-break:normal;}
    .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
      font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
    .tg .tg-c3ow{border-color:inherit;text-align:center;vertical-align:top}
    .tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
    </style>
    <table class="tg">
    <thead>
      <tr>
        <th class="tg-c3ow"><span style="font-weight:bold">Dạng vật liệu</span></th>
        <th class="tg-c3ow"><span style="font-weight:bold">Các chi tiết bộ phận</span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="tg-0pky">Đồng</td>
        <td class="tg-0pky">Các ống dẫn glycol, ống truyền nhiệt của dàn bay hơi</td>
      </tr>
      <tr>
        <td class="tg-0pky">Hợp kim đồng - kẽm</td>
        <td class="tg-0pky">Các van</td>
      </tr>
      <tr>
        <td class="tg-0pky">Thép</td>
        <td class="tg-0pky">Ống dẫn glycol, thùng chứa, các van</td>
      </tr>
      <tr>
        <td class="tg-0pky">Nhôm</td>
        <td class="tg-0pky">Bơm tuần hoàn, dàn lạnh</td>
      </tr>
      <tr>
        <td class="tg-0pky">Gang</td>
        <td class="tg-0pky">Các van, bơm tuần hoàng</td>
      </tr>
    </tbody>
    </table>
    Chúc các bạn thành công!

    Đăng nhận xét

    Cùng chuyên mục

    Service & High Quality Anh Trai Nang Blogger

    Powered by BFGMedia

    Chuyên dịch vụ dành cho blogspot
    và truyền thông

    Google Fonts

    Integrated with 100+ Google Fonts on the Blogger Template Designer

    Unlimited Sidebars

    Make your own sidebar with our high quality blogger templates

    Font Awesome

    More than 1000 icons

    Exclusive Documentation

    Easy & Exclusive Documentation

    Unlimited Colors

    Customize the Skin of the template with Unlimited Color Options

    Google Analytics

    Place your Tracing Code like Google Analytics Only in few options

    Social Sharing

    100% Compatible with 200+ Social Sharing Websites

    Fully Responsive

    Full Compatibility with all Devices like Mobile, Tablet and Desktop

    No Coding Required

    Customize your Website with No Coding Knowledge Required