ลิสต์แบบมีลำดับ <ol>

การสร้างลิสต์แบบมีลำดับ (OL) 

        ลิสต์แบบมีลำดับ จะเป็นการนำเสนอข้อมูลรายการแบบมีตัวเลข ตัวอักษร ซึ่งลิสต์แบบนี้นำมาใช้เพื่อบอกให้ทราบลำดับของข้อมูลที่นำเสนอ 

ชื่อแท็ก ol และ li

ตำแหน่งแท็ก

รูปแบบแท็ก

ol อยู่ภายในแท็ก <body>...</body>

li  อยู่ภายในแท็ก <ul>...</ul>

<ol>

        <li> รายการ1 </li> 

        <li> รายการ2 </li>

</ol>

ตัวอย่างการสร้างลิสต์แบบมีลำดับ

   <body>

    <ol> ส่วนประกอบคอมพิวเตอร์

<li>  hard ware   </li>

<li>  soft ware     </li>

<li>  peple ware  </li>

    </ol>

 </body>

 

ผลลัพธ์ที่ได้

 

จะเห็นว่าหน้ารายการจะเป็นตัวเลข ซึ่งเป็นค่ามาตรฐานกรณีไม่ได้กำหนดชนิดลำดับหน้าหัวข้อ

การกำหนดชนิดลำดับหน้าหัวข้อด้วยแอททริบิวท์ type

    เราสามารถกำหนดชนิดหน้ารายการด้วยใช้แอททริบิวท์ type ระบุไว้ในแท็ก ol หรือ li ได้ดังนี้

ชนิดลำดับหน้าหัวข้อลักษณะต่างๆ มีดังนี้

 

ตัวอย่างการกำหนดเครื่องหมายให้กับลิสต์แบบมีลำดับ

    กรณีกำหนดแอททริบิวท์ type ใน <ol>

<body>

   <ol type="I">  ส่วนประกอบคอมพิวเตอร์

<li>  hard ware   </li>

<li>  soft ware     </li>

<li>  peple ware  </li>

   </ol>

 </body>

 

ผลลัพธ์ที่ได้

แสดงชนิดลำดับเป็น I(เลขโรมัน) ตามที่กำหนดไว้ใน type ในแท็ก ol

    กรณีกำหนดแอททริบิวท์ type ใน <li>

 

   <body>

  <ol> ส่วนประกอบคอมพิวเตอร์

<li type="a">  hard ware   </li>

<li type="i">  soft ware     </li>

<li>  peple ware  </li>

  </ol>

 </body>

 

ผลลัพธ์ที่ได้

แสดงชนิดลำดับ ตามที่กำหนดไว้ใน type ในแท็ก li

การกำหนดลำดับเริ่มต้นให้กับข้อมูล

        หากต้องการกำหนดตัวเลขเริ่มต้น หรือข้ามลำดับบางตัวไป สามารถทำได้ดังนี้

 

ตัวอย่างการกำหนดเลขลำดับเริ่มต้น

 

<body>

     <ol> ส่วนประกอบคอมพิวเตอร์

<li> hard ware  </li>

<li> soft ware  </li>

<li> peple ware  </li>

    </ol>


   <ol start="5"> ส่วนประกอบของ Hardware

<li> Input </li>

<li> Process </li>

<li value="10"> Output </li>

  </ol>

</body>

 

ผลลัพธ์ที่ได้

 เลขลำดับจะข้ามไปยังลำดับที่เรากำหนด