Tạo bảng Table reponsive với tool 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

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ư hình bên dưới.

STT	Họ tên	Năm sinh	Giới tính	Trình độ	Ghi chú

Kết luận: Như vậy qua bài viết trên tôi đã 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. Nếu các bạn không làm được hãy sử dụng code tôi cung cấp bên dưới đây nhé

<style type="text/css">
.tg  {width:100%;border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top}
@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;}}</style>
<div class="tg-wrap"><table class="tg">
  <tr>
    <th class="tg-0pky">STT</th>
    <th class="tg-0lax">Họ tên</th>
    <th class="tg-0lax">Năm sinh</th>
    <th class="tg-0lax">Giới tính</th>
    <th class="tg-0lax">Trình độ</th>
    <th class="tg-0lax">Ghi chú</th>
  </tr>
  <tr>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
  </tr>
  <tr>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
  </tr>
  <tr>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
  </tr>
</table>

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