Để 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: 600px;" border="1">
<tr>
<td style="width: 350px;text-align:left;" >
Nội dung cột 1
</td>
<td style="width: 350px;text-align:left;" >
Nội dung cột 2
</td>
</tr>
</table>
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. Tăng giảm chiều rộng thì thay Width: 600 px .
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: 600px" >
<tr>
<td style="width: 350px;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: 350px;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>
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:
<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>Ví dụ mình thay được như sau:
<table border="1" style="width: 600px" >
<tr>
<td style="width: 350px;text-align:left;">
<img src="http://i1183.photobucket.com/albums/x467/namkna/thsubforum_new.gif"><a href="http://namkna.blogspot.com/">Tiêu đề bài viết 1</a><br>
<img src="http://i1183.photobucket.com/albums/x467/namkna/thsubforum_new.gif"><a href="http://namkna.blogspot.com/2011/02/phim-hanh-ong-tuyen-chon.html">Tiêu đề bài viết 1</a><br>
</td>
<td style="width: 350px;text-align:left;">
<img src="http://i1183.photobucket.com/albums/x467/namkna/thsubforum_new.gif"><a href="http://namkna.blogspot.com/2011/02/phim-hanh-ong-tuyen-chon.html">Tiêu đề bài viết 1</a><br>
<img src="http://i1183.photobucket.com/albums/x467/namkna/thsubforum_new.gif"><a href="http://namkna.blogspot.com/2011/01/hai-xuan-2011.html">Tiêu đề bài viết 1</a><br>
</td>
</tr>
</table>
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: 600px" >
<tr>
<td style="width: 350px;text-align:left;"" valign="top">
Nội dung cột 1
</td>
<td style="width: 350px;text-align:left;"" valign="top">
Nội dung cột 2
</td>
</tr>
</table>
đó 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
<td style="width: 200px;text-align:left;"" valign="top"> Nội dung cột 3 </td>
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 :
<table border="1" style="width: 600px" >
<tr>
<td style="width: 200px;text-align:left;"" valign="top">
Nội dung cột 1
</td>
<td style="width: 200px;text-align:left;"" valign="top">
Nội dung cột 2
</td>
<td style="width: 200px;text-align:left;"" valign="top">
Nội dung cột 3
</td>
</tr>
</table>
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
Chúc các bạn thành công !
