พัฒนาเว็บไซต์ด้วย HTML5

HTML5 รายการแบบมีลำดับ

ใน HTML5 การใช้งาน Ordered List (ol) คือการสร้างรายการที่มีลำดับ โดยแต่ละรายการจะมีหมายเลขหรือตัวอักษรกำกับ สามารถปรับแต่งลำดับการแสดงผลและสัญลักษณ์นำหน้ารายการได้

โครงสร้างพื้นฐานของ Ordered List

แท็กที่ใช้สร้างรายการแบบลำดับคือ <ol> (Ordered List) และแท็ก <li> (List Item) สำหรับแต่ละรายการ

ตัวอย่าง

HTML
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

ผลลัพธ์

  1. Item 1
  2. Item 2
  3. Item 3

การปรับแต่ง type ของลำดับใน Ordered List

HTML5 มีคุณสมบัติ type ที่สามารถใช้กำหนดรูปแบบของลำดับได้ เช่น การใช้ตัวเลข, ตัวอักษร, หรือเลขโรมัน

ประเภทต่าง ๆ:

  1. 1 (ค่าเริ่มต้น): ตัวเลข 1, 2, 3, …
  2. A: ตัวอักษรภาษาอังกฤษตัวใหญ่ A, B, C, …
  3. a: ตัวอักษรภาษาอังกฤษตัวเล็ก a, b, c, …
  4. I: ตัวเลขโรมันตัวใหญ่ I, II, III, …
  5. i: ตัวเลขโรมันตัวเล็ก i, ii, iii, …

ตัวอย่างการใช้ type

HTML
<ol type="A">
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ol>

ผลลัพธ์

  1. First Item
  2. Second Item
  3. Third Item

การปรับแต่ง start ของลำดับ

สามารถใช้แอตทริบิวต์ start เพื่อกำหนดค่าเริ่มต้นของลำดับได้ เช่น เริ่มที่ตัวเลข 5 หรือตัวอักษร F

ตัวอย่าง

HTML
<ol start="5">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

ผลลัพธ์

  1. Item 1
  2. Item 2
  3. Item 3

การใช้งาน Nested Ordered List (รายการซ้อนกัน)

สามารถสร้างรายการที่ซ้อนกันได้ โดยรายการภายในสามารถเป็นแบบลำดับ (<ol>) หรือแบบไม่ลำดับ (<ul>)

ตัวอย่างการซ้อนกัน

HTML
<ol>
  <li>Main Item 1</li>
  <li>Main Item 2
    <ol type="a">
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ol>
  </li>
  <li>Main Item 3</li>
</ol>

ผลลัพธ์

  1. Main Item 1
  2. Main Item 2
    1. Sub Item 1
    2. Sub Item 2
  3. Main Item 3

การใช้งาน Reversed Ordered List

แอตทริบิวต์ reversed จะทำให้รายการเรียงลำดับจากมากไปหาน้อย (เช่นจาก 3 ถึง 1)

ตัวอย่าง

HTML
<ol reversed>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ol>

ผลลัพธ์

  1. First Item
  2. Second Item
  3. Third Item

สรุป

การใช้งาน Ordered List (ol) ใน HTML5 มีความยืดหยุ่นและสามารถปรับแต่งได้หลายรูปแบบ เช่น การใช้ตัวเลข, ตัวอักษร, เลขโรมัน และการเรียงลำดับซ้อน รวมถึงการเริ่มต้นลำดับที่ค่าที่ต้องการ

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ