Cách tạo bảng nội dung trong blogspot

Để vẽ một bảng trong bài viết đăng lên Blogspot, bạn có thể sử dụng mã HTML để tạo bảng. Dưới đây là hướng dẫn chi tiết để bạn có thể thực hiện điều này.

Bước 1: Đăng nhập và tạo bài viết mới

1. Đăng nhập vào Blogspot và chọn blog bạn muốn chỉnh sửa.
2. Nhấp vào nút "Bài đăng mới" hoặc chỉnh sửa một bài đăng hiện có.

Bước 2: Chuyển sang chế độ HTML

1. Trong trình soạn thảo, nhấp vào nút "HTML" để chuyển sang chế độ chỉnh sửa HTML.

Bước 3: Thêm mã HTML để tạo bảng

Bạn có thể sao chép và dán mã HTML dưới đây vào trình soạn thảo để tạo bảng. Dưới đây là ví dụ về cách tạo một bảng đơn giản:

<table border="1" cellspacing="0" cellpadding="10">
  <tr>
    <th>Tiêu đề 1</th>
    <th>Tiêu đề 2</th>
    <th>Tiêu đề 3</th>
  </tr>
  <tr>
    <td>Nội dung 1.1</td>
    <td>Nội dung 1.2</td>
    <td>Nội dung 1.3</td>
  </tr>
  <tr>
    <td>Nội dung 2.1</td>
    <td>Nội dung 2.2</td>
    <td>Nội dung 2.3</td>
  </tr>
  <tr>
    <td>Nội dung 3.1</td>
    <td>Nội dung 3.2</td>
    <td>Nội dung 3.3</td>
  </tr>
</table>

Giải thích mã HTML:

• <table>: Thẻ mở đầu cho bảng.
• border="1": Thiết lập viền cho bảng (1 pixel).
• cellspacing="0": Thiết lập khoảng cách giữa các ô bảng (0 pixel).
• cellpadding="10": Thiết lập khoảng cách giữa nội dung ô và viền ô (10 pixel).
• <tr>: Thẻ mở đầu cho một hàng trong bảng.
• <th>: Thẻ cho tiêu đề của các cột trong bảng.
• <td>: Thẻ cho nội dung của các ô trong bảng.

Bước 4: Quay lại chế độ soạn thảo và xem kết quả

1. Nhấp vào "Compose" để quay lại chế độ soạn thảo bình thường và kiểm tra kết quả.
2. Bạn có thể thấy bảng đã được tạo trong bài viết của mình.

Bước 5: Tùy chỉnh bảng với CSS

Nếu bạn muốn tùy chỉnh bảng của mình thêm, bạn có thể sử dụng CSS. Thêm mã CSS vào phần đầu của bài viết hoặc trong phần tùy chỉnh CSS của blog. Dưới đây là ví dụ về cách tùy chỉnh bảng với CSS:

<style>
  table.custom-table {
    width: 100%;
    border-collapse: collapse;
  }
  table.custom-table th, table.custom-table td {
    border: 1px solid #000;
    padding: 10px;
    text-align: left;
  }
  table.custom-table th {
    background-color: #f2f2f2;
  }
</style>

<table class="custom-table">
  <tr>
    <th>Tiêu đề 1</th>
    <th>Tiêu đề 2</th>
    <th>Tiêu đề 3</th>
  </tr>
  <tr>
    <td>Nội dung 1.1</td>
    <td>Nội dung 1.2</td>
    <td>Nội dung 1.3</td>
  </tr>
  <tr>
    <td>Nội dung 2.1</td>
    <td>Nội dung 2.2</td>
    <td>Nội dung 2.3</td>
  </tr>
  <tr>
    <td>Nội dung 3.1</td>
    <td>Nội dung 3.2</td>
    <td>Nội dung 3.3</td>
  </tr>
</table>

Giải thích mã CSS:

• .custom-table: Chọn bảng có class là custom-table.
• width: 100%: Thiết lập bảng chiếm 100% chiều rộng của vùng chứa.
• border-collapse: collapse: Gộp các viền của các ô liền kề.
• border: 1px solid #000: Thiết lập viền 1 pixel màu đen cho các ô.
• padding: 10px: Thiết lập khoảng cách giữa nội dung ô và viền ô là 10 pixel.
• text-align: left: Căn lề trái cho nội dung trong ô.
• background-color: #f2f2f2: Thiết lập màu nền cho tiêu đề cột.

Bằng cách sử dụng các bước trên, bạn có thể dễ dàng vẽ bảng trong bài viết đăng lên Blogspot và tùy chỉnh theo ý muốn. Chúc bạn thành công!