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

Đăng bởi Admin | 6/8/13 | 10 nhận xét

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 và Tạo bảng có viền  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

Code tạo bảng thông thường.

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

<table border="1">
<tr>
<th>Tiêu đề cột 1</th><th>Tiêu đề cột 2</th>
</tr>
<tr>
<td>Hàng 1, Cột 1</td><td>Hàng 1, Cột 2</td>
</tr>
<tr>
<td>Hàng 2, Cột 1</td><td>Hàng 2, Cột 2</td>
</tr>
</table>

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

Tiêu đề 1	Tiêu đề 2
Hàng 1, Cột 1	Hàng 1, Cột 2
Hàng 2, Cột 1	Hàng 2, Cột 2

Làm thế nào để thêm cột cho bảng trong blogger?

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

<tr>
<td>Hàng 3, Cột 1</td><td>Hàng 3, Cột 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>Hàng n, cột n</td>

Để thêm 1 ô tiêu đề bạn thêm đoạn code bên dưới vào sau thẻ  </th>

<th>Tiêu đề cột n</th>

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

<table border="1">
<tr>
<th>Tiêu đề cột 1</th><th>Tiêu đề cột 2</th><th>Tiêu đề cột 3</th>
</tr>
<tr>
<td>Hàng 1, Cột 1</td><td>Hàng 1, Cột 2</td><td>Hàng 1, Cột 3</td>
</tr>
<tr>
<td>Hàng 2, Cột 1</td><td>Hàng 2, Cột 2</td><td>Hàng 2, Cột 3</td>
</tr>
<tr>
<td>Hàng 3, Cột 1</td><td>Hàng 3, Cột 2</td><td>Hàng 3, Cột 3</td>
</tr>
</table>

Và đây là hình minh họa. 

Tiêu đề cột 1	Tiêu đề cột 2	Tiêu đề cột 3
Hàng 1, Cột 1	Hàng 1, Cột 2	Hàng 1, Cột 3
Hàng 2, Cột 1	Hàng 2, Cột 2	Hàng 2, Cột 3
Hàng 3, Cột 1	Hàng 3, Cột 2	Hàng 3, Cột 3

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, Namkna xin hướng dẫn bạn cách khắc phục ở bên dưới:

1- Đăng nhập Blogger 

2- Chọn Mẫu (template)

3- Chọn Chỉnh sửa HTML (Edit HTML)

4- Dán đoạn mã dưới vào sau thẻ ]]></b:skin>.

.namkna-table br {
  display: none
}

5- Lưu mẫu lại. 
6- Khi tạo bảng, bạn bổ sung thêm phần in đậm màu xanh nhạt như dưới:

<div class="namkna-table">
<table border="1">
<tr>
<th>Tiêu đề cột 1</th><th>Tiêu đề cột 2</th>
</tr>
<tr>
<td>Hàng 1, Cột 1</td><td>Hàng 1, Cột 2</td>
</tr>
<tr>
<td>Hàng 2, Cột 1</td><td>Hàng 2, Cột 2</td>
</tr>
</table>
</div>

Giờ hãy xem thành quả đi. Bạn sẽ thấy không còn khoảng trống nữa!

                                                                                                              Theo: Namkna

                                                                                                              Thu thuat vi tinh