Free code ' Smile แจกฟรีโค้ดยิ้มๆ :D

ลำดับตอนที่ #12 : ข้อความหลายคอลัมน์

1. <table name="so_sweet001" style="width: 730px; cellspacing: 0px; cellpadding:0px; border:0px;">
2.     <tbody>
3.        <tr style="text-align: center">
4.           <td valign="top" width="155">เนื้อหาคอมลัมที่ 001</td> <!--ปรับขนาดความกว้าง-->
5.           <td valign="top" width="155">เนื้อหาคอลัมน์ที่ 002</td> <!--ปรับขนาดความกว้าง-->
6.        </tr>
7.     </tbody>
8. </table>

---

ถ้าจะเพิ่มเป็นหลายๆคอลัมน์อีกก็ให้เติม
<td valign="top" width="400">เนื้อหาคอลัมน์</td>
ต่อๆลงไปอีก แล้วก็ปรับขนาดตามความเหมาะสม ซึ่งขนาดปกติจะประมาณ 730px
ถ้า 2 คอลัมน์ก็นำ 730/2 = 155px
ถ้า 3 คอลัมน์ก็นำ 730/3 ประมาณ 240px
เราไม่จำเป็นจะต้องปรับให้ขนาดเท่ากันก็ได้ ให้ปรับตามขนาดที่ต้องการ

 

1. <table name="so_sweet001" style="width: 720px; cellspacing: 0px; cellpadding:0px; border:0px;">
2.     <tbody>
3.        <tr style="text-align: center">
4.           <td valign="top" width="240">เนื้อหาคอลัมน์ที่ 001</td>
5.           <td valign="top" width="240">เนื้อหาคอลัมน์ที่ 002</td>
6.           <td valign="top" width="240">เนื้อหาคอลัมน์ที่ 003</td>
7.        </tr>
8.     </tbody>
9. </table>

ตัวอย่าง
ผลออกมาก็ประมาณนี้!
จากในโค้ดมีนปรับขนาดของสองคอลัมน์ไม่เท่ากันนะค่ะ

111

222

333

เครดิตจาก ' โค้ดหวานๆ

THE★ FARRY