Cách chia module blog làm nhiều cột

Đôi khi bạn muốn lập các bảng biểu hoặc chia bài viết thành nhiều cột mà chưa biết cách sau đây mình xin giới thiệu cho các bạn cách tạo khung cho bài viết

Đây là code chia cái module 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
Đó là cách chia còn để chèn nội dung các bạn làm như sau :
Code nè 


<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>
các bạn để ý đoạn mình tô đỏ trên code kia<img src="http://i1183.photobucket.com/albums/x467/namkna/thsubforum_new.gif"> là hình ngôi sau (icon) đầu các tiêu đề các bạn có thể thay icon đó bằng các icon khác cho phù hợp bài trước mình đã share rất nhiều incon các bạn có thể trọn thoải mái

Còn đoạn mình tô màu xanh :
<a href="http://namkna.blogspot.com/">Tiêu đề bài viết 1</a>  là liên kết tới blog có cấu trúc :
<a href="link bai viet">Tiêu đề bài viết </a> <br>
chỗ link bài viết các bạn thay link bài viết cần đưa lên và tiêu đề = tên của bài viết đó đừng nói không hiểu nhé @@ còn cái : <br> là để xuống dòng :D
cái này là cực kì rễ hiểu và rễ làm còn 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 !

1 nhận xét:

Tienlinh nói...

nhận Làm bằng đại học tại Tphcm
Chuyên làm bằng đại học tại hà Nội giá rẻ
dịch vụ Lam bang dai hoc tai TPHCM
uy tín

Đăng nhận xét


♦ Mời bạn gửi Nhận xét của mình. Nếu không có tài khoản Blogger-Google, LiveJournal, WordPress, TypePad, AIM, OpenID, bạn vẫn có thể nhận xét bằng cách chọnComment asTên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống. Bạn vui lòng gõ tiếng Việt có dấu.

♦ Bấm vào Xem trước [Preview] bên dưới khung nhận xét nếu muốn xem trước comment đã viết, trước khi post [đăng]. Tương tự, bấm vào Đăng ký qua email [Subscribe by email] để đăng ký theo dõi nhận xét của bài này.

♦ Các bạn tự chịu trách nhiệm với Nhận xét của mình. Nhận xét để phản hồi, đánh giá, góp ý.... suy nghĩ của bạn. Thông qua Nhận xét hãy để cho mọi người biết Bạn là ai