การใช้ HTML List

การใช้ HTML List แบบง่าย ๆ

มาดูวิธีการใช้ List ใน HTML แบบง่าย ๆ กันครับ ซึ่งจะเป็นพื้นฐาน เราจะมาดูว่าโค้ดพื้นฐานเป็นแบบไหน และ List นั้นมีอะไรบ้าง

ใน HTML นั้นได้เสนอวิธีการกำหนดข้อมูลที่เป็น List ออกมาเป็น 3 วิธีนั่่นคือ

<ul> เป็นตัวย่อของ unordered list เป็นการแสดง List ให้เป็นรายการโดยไม่มีลำดับและ default เป็นรูปวงกลม
<ol> เป็นตัวย่อของ ordered list เป็นการแสดง List ในรูปแบบของลำดับตัวเลข
<dl> เป็นตัวย่อของ definition list เป็นการจัดแสดง List คล้าย ๆ รูปแบบของ dictionary

ตัวอย่างโค้ดและตัวอย่างการแสดงผลที่ได้

UL

<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>

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

• Beetroot
• Ginger
• Potato
• Radish

OL

<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>

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

1. Beetroot
2. Ginger
3. Potato
4. Radish

DL

<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>

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

HTML

This stands for Hyper Text Markup Language

HTTP

This stands for Hyper Text Transfer Protocol

นี่เป็นตัวอย่างแบบง่ายแบบง่ายของการแสดง List ใน HTML นอกจากนี้เรายังสามารถกำหนด Attributes ให้กับ List เพื่อให้แสดงผลตามต้องการได้อีกหลาย ๆ แบบ เช่นเปลี่ยนเครื่องหมายหน้า list เป็น order จากตัวเลขเป็นอย่างอื่น และอื่น ๆ อีกมาก