พื้นฐาน HTML

List แสดงขอมูลในรูปแบบรายการ

ต้องการแสดงรายการลำดับต่างๆ ใน HTML ก็ได้เตรียมคำสั่งเพื่อแสดงผลไว้ให้แล้ว

list tag ใช้ในการจัดข้อมูลเป็นชุดๆ หรือเป็นหัวข้อ ซึ่งจะทำให้ข้อมูลอ่านได้ง่ายขึ้น ซึ่ง list แบ่งได้เป็น 2 แบบด้วยกัน

1. list แบบไม่มีลำดับ
เป็น list แบบง่ายดีสุดเหมาะสำหรับการนำเสนอข้อมูลที่ไม่มีลำดับเกี่ยวข้อง โดยมีรูปแบบดังนี้

รูปแบบ list แบบไม่มีลำดับ

<ul>
    <lh> หัวข้อ</lh>
    <li> ข้อมูล 1</li>
    <li> ข้อมูล 2</li>
</ul>

คลิกเพื่อทดลองเขียนด้วยตัวเอง


2. list แบบมีลำดับ
เป็น list แบบง่ายดีสุดเหมาะสำหรับการนำเสนอข้อมูลที่ไม่มีลำดับเกี่ยวข้อง โดยมีรูปแบบดังนี้

รูปแบบ list แบบมีลำดับ

<ol>
    <lh> หัวข้อ</lh>
    <li> ข้อมูล 1</li>
    <li> ข้อมูล 2</li>
</ol>

คลิกเพื่อทดลองเขียนด้วยตัวเอง


3. การใส่สัญลักษณ์ให้กับ list
การใส่สัญลักษณ์ให้กับ list เราจะเห็นสัญลักษณ์หน้า list อยู่แล้วซึ่งสัญลักษณ์ตัวนั้นสามารถเปลี่ยนแปลงได้โดยใช้ Attibuet คำสั่ง type มีรายละเอียดดังนี้


สัญลักษณ์ที่ใช้กับแบบไม่มีลำดับ

TYPE สัญลักษณ์
disc วงกลมทึบ
circle วงกลมโปร่งใส
square สี่เหลี่ยมทึบ

สัญลักษณ์ที่ใช้กับแบบมีลำดับ

TYPE สัญลักษณ์
A เรียงแบบ A,B,C
a เรียงแบบ a,b,c
I เรียงแบบเลขโรมัน I,II,III
i เรียงแบบเลขโรมัน i,ii,iii

คลิกเพื่อทดลองเขียนด้วยตัวเอง



4. การใช้ list ซ้อน list
ในตัวอย่างจะเป็นการทำ list ซ้อน list ซึ่ง html จะเปลี่ยนสัญลักษณ์ให้อัตโนมัติ

คลิกเพื่อทดลองเขียนด้วยตัวเอง



5. list แบบให้คำจำกัดความ

Definition list เป็น list ที่ใช้กับการให้คำจำกัดความ ดังตัวอย่าง

คลิกเพื่อทดลองเขียนด้วยตัวเอง


list เป็นคำสั่งที่ใช้สำหรับการแสดงข้อมูลเป็นชุดๆ ซึ่งจะสะดวกและ อ่านข้อมูลได้ง่าย เป็นทางเลือกทางหนึ่งที่ดีในการใช้แสดงบทความ


เลื่อนขึ้นด้านบน