ลิสต์แบบไม่มีลำดับ <ul>

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

        ลิสต์แบบไม่เรียงลำดับ (Unordered List) เป็นลิสต์ที่เหมาะสำหรับการนำเสนอข้อมูลที่เป็นประเด็นสั้น ๆ ไม่ต้องการ  รูปแบบตัวเลข หรือตัวอักษรให้ยุ่งยาก นี่คือตัวอย่างเว็บที่นำลิสต์แบบไม่เรียงลำดับมาประยุกต์ใช้

ตัวอย่างเว็บไซต์ที่นำลิสต์แบบไม่เรียงลำดับมาใช้งาน

ที่มา http://www.kroobannok.com/

 

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

ตำแหน่งแท็ก

รูปแบบแท็ก

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

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

<ul>

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

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

</ul>

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

  

   <body>

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

<li> hard ware  </li>

<li> soft ware  </li>

<li> peple ware </li>

    </ul>

     </body>

 

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

        จะเห็นว่าสัญลักษณ์มาตรฐานหน้ารายการจะเป็นเครื่องหมายวงกลมทึบ ถ้าเราต้องการเปลี่ยนแปลงสัญลักษณ์           หน้ารายการใหม่ สามารถใช้แอตทริบิวต์ type เพื่อกำหนดสัญลักษณ์หน้ารายการได้

การกำหนดเครื่องหมายหน้ารายการ

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

 

สัญลักษณ์เครื่องหมายหน้ารายการ

 

ถ้าไม่มีการกำหนดชนิดสัญลักษณ์หน้ารายการจะแสดงวงกลมทึบเป็นเครื่องหมายปกติ

ตัวอย่างการกำหนดชนิดสัญลักษณ์หน้ารายการ

        กรณีเพิ่มแอททริบิวท์ type ใน <ul>

   <body>

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

<li> hard ware </li>

<li> soft ware </li>

<li> peple ware </li>

    </ul>     

 </body>

 

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

หน้ารายการทั้งหมดจะมีสัญลักษณ์เป็น square

    กรณีเพิ่มแอททริบิวท์ type ใน <li>

   <body>

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

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

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

<li type="square"> peple ware  </li>

     </ul>

</body>

 

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

 

หน้ารายการแต่ละรายการจะแสดงชนิดสัญลักษณ์ตาม type ที่กำหนด