Để sử dụng các bạn Pate trực tiếp vào các Widget hoặc phần HTML của bài viết.
Đây là code chia làm 2 cột :
<table style="width: 100%;" border="1">Cái này cơ bản thì có viền xung quanh , để xoá viền đi các bạn để border = "0" là được.
<tr>
<td style="width: 50%;text-align:left;" >
Nội dung cột 1
</td>
<td style="width: 50%;text-align:left;" >
Nội dung cột 2
</td>
</tr>
</table>
Mở rộng các bạn có thể tạo danh sách các bài viết cho Blog như sau:
Code:
<table border="1" style="width: 100%" >Các bạn thay các đoạn tương ứng vào các phần ở trên, để thêm bài viết các bạn thêm đoạn sau:
<tr>
<td style="width: 50%;text-align:left;">
<img src="Link Icom"><a href="Liên kết tới bài viết 1">Tiêu đề bài viết 1</a><br>
<img src="Link Icom"><a href="Liên kết tới bài viết 2">Tiêu đề bài viết 2</a><br>
</td>
<td style="width: 50%;text-align:left;">
<img src="Link Icom"><a href="Liên kết tới bài viết 3">Tiêu đề bài viết 3</a><br>
<img src="Link Icom"><a href="Liên kết tới bài viết 4">Tiêu đề bài viết 4</a><br>
</td>
</tr>
</table>
<img src="Link Icom"><a href="Liên kết tới bài viết 1">Tiêu đề bài viết 1</a><br>Muốn pro hơn các bạn kết hợp CSS nữa thì sẽ đẹp và gọn gàng hơn có 1 vấn đề nữa là nếu bạn dùng code đơn giản này , thì khi nội dung cột 1 dài hơn cột 2 hoặc ngược lại thì cái cột có nội dung ngắn hơn sẽ bị tụt xuống (ra giữa cột) nếu các bạn muốn lúc nào vị trí cũng ở trên top của cột thì các bạn thêm đoạn này vào sau code là ok
"valign="top"vậy sau khi thêm ta sẽ được thế này:
<table border="1" style="width: 100%" >đó là code để chia thành 2 cột còn 3 cột thì các bạn thêm 1 đoạn code nữa là ok thôi
<tr>
<td style="width: 50%;text-align:left;" valign="top">
Nội dung cột 1
</td>
<td style="width: 50%;text-align:left;" valign="top">
Nội dung cột 2
</td>
</tr>
</table>
<td style="width: 200px;text-align:left;"" valign="top">Là được 3 cột nếu muôn độ rộng của các cột ngang nhau thì các bạn chia cái % đều nhau là được đây là code hoàn chình 3 cột :
Nội dung cột 3
</td>
<table border="1" style="width: 100%" >vậy là hoàn thành 3 cột rùi đó còn nếu muốn 4 cột thì các bạn làm tương tự như là thêm 3 cột
<tr>
<td style="width: 33%;text-align:left;" valign="top">
Nội dung cột 1
</td>
<td style="width: 33%;text-align:left;" valign="top">
Nội dung cột 2
</td>
<td style="width: 33%;text-align:left;"" valign="top">
Nội dung cột 3
</td>
</tr>
</table>
Chúc các bạn thành công !