แท็ก <ol> ใน HTML ใช้สำหรับสร้าง รายการแบบมีลำดับ เช่น รายการที่มีหมายเลข (1, 2, 3) หรืออักษร (A, B, C)
รายการแบบมีลำดับ (Ordered HTML List)
รายการแบบมีลำดับเริ่มต้นด้วยแท็ก <ol> และแต่ละรายการจะอยู่ในแท็ก <li> โดยค่าเริ่มต้น รายการแต่ละข้อจะถูกแสดงเป็น ตัวเลขเรียงลำดับ
ตัวอย่าง:
- Coffee
- Tea
- Milk
การกำหนดรูปแบบตัวเลขด้วยแอตทริบิวต์ type
เราสามารถเปลี่ยนรูปแบบของตัวเลขนำหน้ารายการได้
โดยใช้ แอตทริบิวต์ type ของแท็ก <ol>
| ค่า (type) | คำอธิบาย |
|---|---|
type="1" | แสดงเป็นตัวเลข 1, 2, 3 (ค่าเริ่มต้น) |
type="A" | แสดงเป็นตัวอักษรภาษาอังกฤษตัวใหญ่ A, B, C |
type="a" | แสดงเป็นตัวอักษรภาษาอังกฤษตัวเล็ก a, b, c |
type="I" | แสดงเป็นตัวเลขโรมันตัวใหญ่ I, II, III |
type="i" | แสดงเป็นตัวเลขโรมันตัวเล็ก i, ii, iii |
ตัวอย่างแบบตัวเลข
- Coffee
- Tea
- Milk
ตัวอย่างแบบอักษรตัวใหญ่ (A, B, C)
- Coffee
- Tea
- Milk
ตัวอย่างแบบอักษรตัวเล็ก (a, b, c)
- Coffee
- Tea
- Milk
ตัวอย่างแบบเลขโรมันตัวใหญ่ (I, II, III)
- Coffee
- Tea
- Milk
ตัวอย่างแบบเลขโรมันตัวเล็ก (i, ii, iii)
- Coffee
- Tea
- Milk
การควบคุมตัวเลขเริ่มต้น (Control List Counting)
โดยปกติ รายการแบบ <ol> จะเริ่มนับจากเลข 1
แต่เราสามารถกำหนดให้เริ่มนับจากเลขอื่นได้
โดยใช้ แอตทริบิวต์ start
- Coffee
- Tea
- Milk
รายการซ้อนกัน (Nested HTML Lists)
เราสามารถซ้อนรายการได้ (คือมีลิสต์ย่อยภายในลิสต์หลัก)
- Coffee
- Tea
- Black tea
- Green tea
- Milk
หมายเหตุ: ในแต่ละ <li> สามารถใส่รายการย่อย <ol> หรือองค์ประกอบอื่น ๆ ได้
เช่น รูปภาพ (<img>) หรือลิงก์ (<a>)
สรุป
- ใช้แท็ก
<ol>เพื่อสร้างรายการแบบมีลำดับ - ใช้แอตทริบิวต์
typeเพื่อกำหนดรูปแบบตัวเลข (1, A, a, I, i) - ใช้แท็ก
<li>เพื่อสร้างรายการแต่ละข้อ - สามารถซ้อนลิสต์ได้
- รายการแต่ละข้อสามารถมีองค์ประกอบ HTML อื่น ๆ ได้ เช่น รูปภาพหรือ ลิงก์