Kẻ bảng và khắc phục lỗi khi chèn bản cho Blog

Lần trước mình đã giới thiệu cho các bạn Code chí bài viết thành nhiều cột tuy nhiên Khi cần đăng một danh sách hay nột bảng số liệu lên Blog bạn rất cần phải có Code tạo bảng do vậy hôm nay mình xin giới thiệu cho các bạn kẻ bảng

-Bạn Pate code sau vào HTML sau đó đánh nội dung vào bảng

Code:

<table border="1">
<tr><th>Heading</th><th>Another Heading</th></tr>
<tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
<tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
</table>

Khi đó bạn xẽ được bảng như sau:

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Nếu muốn thêm một hàng bạn Pate Code dưới vào sau code <tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>

<tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>

Nếu muốn thêm một cột bạn thêm Code sau vào sau thẻ </td>

<td>row n, cell n</td>

Khi đoa bạn xẽ được Code 3 hàng 3 cột như sau:

<table border="1">
<tr><th>Heading</th><th>Another Heading 1</th><th>Another Heading 2</th></tr>
<tr><td>row 1, cell 1</td><td>row 1, cell 2</td><td>row 1, cell 3</td></tr>
<tr><td>row 2, cell 1</td><td>row 2, cell 2</td><td>row 2, cell 3</td></tr>
<tr><td>row 3, cell 1</td><td>row 3, cell 2</td><td>row 3, cell 3</td></tr>
</table>

Heading	Another Heading 1	Another Heading 2
row 1, cell 1	row 1, cell 2	row 1, cell 3
row 2, cell 1	row 2, cell 2	row 2, cell 3
row 3, cell 1	row 3, cell 2	row 3, cell 3

II. Khắc phục lỗi cách khi chèn bảng

Các bạn có thể để ý thấy phần xhuwx viết và bảng ở các bảng tren bị cách nhau một khoảng trắng khá rộng, Bảng càng có kích thước lớn, khoảng trắng này càng rộng.

Để đăng bảng một cách dễ dàng, Mình xin hướng dẫn bạn cách khắc phục ở bên dưới:

Bước 1. Hãy tạo một lớp (class) mới như dưới đây và dán vào bất cứ chỗ nào trong CSS của template (Đăng nhập Blogger, chọn Edit HTML, dán đoạn mã dưới ngay bên cạnh các khai báo # hoặc .)

.bang br {
  display: none
}

Bước 2. Khi post bảng, bạn bổ sung thêm phần in đậm như thế này:

<div class="bang">
<table border="1">
<tr><th>Heading</th><th>Another Heading</th></tr>
<tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
<tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
</table>
</div>

Lưu ý phần chữ màu nổi bật (Bang), bạn có thể đổi thành chữ khác, nhưng đã khai báo như thế nào thì phải sử dụng tương ứng trong div.
Bạn sẽ thấy không còn khoảng trống nữa!

Chúc thành công!