รายการแบบเรียงลำดับ (Ordered Lists)
ใช้ Tag <ol> ในการกำหนดรายการแบบเรียงลำดับซึ่งรายการเรียงลำดับนั้นอาจเป็นตัวเลขหรือตัวอักษรก็ได้
เริ่มต้นด้วย Tag <ol> แต่ละรายการเริ่มต้นด้วย Tag <li>
รายการจะถูกทำเครื่องหมายด้วยตัวเลขตามค่าเริ่มต้น:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Attribute ประเภทของรายการแบบเรียงลำดับ
Attribute ประเภทของ Tag <ol> กำหนดประเภทของเครื่องหมายรายการ:
| Type | คำอธิบาย |
|---|---|
| type=”1″ | เรียงลำดับด้วยเลข (ค่าเริ่มต้น) |
| type=”A” | เรียงลำดับด้วยตัวอักษรภาษาอังกฤษตัวใหญ่ |
| type=”a” | เรียงลำดับด้วยตัวอักษรภาษาอังกฤษตัวเล็ก |
| type=”I” | เรียงลำดับด้วยตัวอักษรโรมันตัวใหญ่ |
| type=”i” | เรียงลำดับด้วยตัวอักษรโรมันตัวเล็ก |
ตัวอย่าง
หมายเลข
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
ตัวอักษรพิมพ์ใหญ่
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Letters</h2>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
ตัวอักษรพิมพ์เล็ก
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Lowercase Letters</h2>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
ตัวเลขโรมันตัวพิมพ์ใหญ่
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Roman Numbers</h2>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
ตัวเลขโรมันตัวพิมพ์เล็ก
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Lowercase Roman Numbers</h2>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
ควบคุมการนับรายการ
ตามค่าเริ่มต้น รายการสั่งซื้อจะเริ่มนับจาก 1 หากคุณต้องการเริ่มนับจากหมายเลขที่ระบุ คุณสามารถใช้ start แอตทริบิวต์
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>The start attribute</h2>
<p>By default, an ordered list will start counting from 1. Use the start attribute to start counting from a specified number:</p>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="I" start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
รายการ HTML ที่ซ้อนกัน
รายการสามารถซ้อนกันได้ (รายการภายในรายการ):
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
</body>
</html>
หมายเหตุ: รายการ ( <li> ) สามารถมีรายการใหม่และองค์ประกอบ HTML อื่นๆ เช่น รูปภาพและลิงก์ เป็นต้น