ol, ul, li

สิ้นสุดกันทีกับการใช้ ตาราง ผิดที่ผิดเวลา หลายคนคงเคยเป็นเหมือนผม ตอนหัดทำเว็บใหม่ๆ หรือทำเว็บจนชิน เวลาที่ต้องการทำเมนู ไม่ว่าจะแนวตั้ง หรือแนววนอน ต้อง ง้อ <table> ช่วยกำหนดตลอด ว่า จะเอาสักกี่แถว กี่สดมน์ ดี โดยหารู้ไม่ว่า เป็นการเอาขวานมาเหลาดินสอชัดๆ

ยังไง?? ก็มันเป็นการใช้ของไม่ถูกลักษณะ นั่นอะดิครับพี่น้อง แล้วเราจะแก้ไขมันยังไง เขาบอกว่า จะทำเมนู ให้ใช้ ul กับ li ขอรับ ซึ่งก่อนที่เราจะไปผสมผสานเรียนรู้เรื่องการทำเมนูด้วย ul, li กันนั้น มาทำความรู้จักแบบคร่าวๆ กันสักนิด กับ

order, unorder และ list หรือ ol,ul และ li นั่นเอง

การเรียกใช้ ol, ul, li จะเหมาะก็ต่อเมื่อเราต้องการทำลิสต์รายการเป็นข้อๆ เป็นขั้นตอน สามารถใช้ ol หรือ ordered list ใช้ในกรณีที่เราต้องการเรียง Li ให้แสดงเป็นข้อๆ เรียงลำดับแบบตัวเลข หรือ ul ( unordered list) ในกรณี ที่เราไม่ต้องการแสดงเป็นหัวข้อ แต่ต้องการให้ข้อมูลไล่เรียงกันลงมาแบบต่อเนื่อง

ผมเคยเป็นคนหนึ่งที่เคยเอาตารางมาใช้งานในลักษณะของงาน ul ซึ่งกว่าจะรู้ว่ามันใช้ไม่ถูกวิธีก็ล่อเวลาไปนานโข แต่ตอนนี้ ผมเปลี่ยนมาใช้ ออเดอร์ อันออเดอรด์ ลิส แย้วว

ส่วน เอาไปใช้แล้ว จะเอา css ไปแต่งองค์ทรงเครื่องยังไงนั้น เดี๋ยวไปดูกันต่อในโอกาสต่อไปครับ
ตัวอย่าง


<ul>

<li>li ที่ 1</li>

<li>li ที่ 2 ซ้อน ul เพิ่ม li ย่อย</li>

<ul>

<li>li ซ้อน li</li>

<li>li ซ้อน li</li>

<li>li ซ้อน li</li>

</ul>

<li>li ที่ 3</li>

<li>li ที่ 4 เพิ่ม ol เข้ามาใน li นี้

<ol>

<li>li ใน ol ที่ 1</li>

<li>li ใน ol ที่ 2</li>

<li>li ใน ol ที่ 3</li>

</ol>

</li>

<li>li ที่ 5</li>

<li>li ที่ 6</li>

</ul>

List Element

Back to Top

4 Responses to ol, ul, li

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top