การจัดเรียงข้อความหลายคอลัมน์ด้วย HTML

แท็ก <multicol> ใน HTML ใช้สร้างคอลัมน์ข้อความหลายคอลัมน์และควบคุมขนาดและจำนวนคอลัมน์ได้ แท็ก <multicol> สามารถมีเนื้อหา HTML อื่นๆ ได้ เช่นเดียวกับแท็ก <div> เนื้อหาทั้งหมดภายในแท็ก <multicol> จะแสดงเหมือนเนื้อหาทั่วไป ยกเว้นว่า Netscape 4 จะจัดเนื้อหาเป็นหลายคอลัมน์แทนที่จะเป็นคอลัมน์เดียว

หมายเหตุ: แท็กนี้รองรับเฉพาะ Netscape 3 และเวอร์ชันสูงกว่าเท่านั้น ปัจจุบันแท็กนี้ล้าสมัยแล้วและไม่ควรใช้ในการพัฒนาเว็บสมัยใหม่ ควรใช้ CSS Multi-column Layout แทน (column-count, column-gap, column-width)

แอตทริบิวต์

ตัวอย่าง

ลองใช้โค้ดต่อไปนี้เพื่อเพิ่มเลเอาต์หลายคอลัมน์สำหรับการไหลของข้อความ:

<h1>Breaking News</h1>
<multicol cols="3">
  <p>State media said more than 2,000 soldiers, police and miners
  closed the breach in the dike in Shandong province early Sunday and
  installed pipes and five high-speed pumps, but gave no indication if
  there were any signs of life.</p>
  <p>The Huayuan Mining Co. mine flooded on Friday afternoon when the
  Wen river burst a dike, sending water pouring into a shaft and trapping
  172 miners, Xinhua and state television said.</p>
</multicol>

ทางเลือกสมัยใหม่: CSS Multi-column Layout

แทนที่จะใช้แท็ก <multicol> ที่ล้าสมัยแล้ว ให้ใช้ CSS properties ต่อไปนี้:

.multi-column {
  column-count: 3;
  column-gap: 20px;
  column-width: 200px;
}