สร้างรายการ (Lists)


สร้างรายการด้วย HTML


                        
                        

ลองเขียนโค้ด


รายการแบบไม่เรียงลำดับ (Unordered Lists)

สร้างรายการแบบไม่เรียงลำดับเริ่มด้วย Tag <ul> และแต่ละข้อเริ่มด้วย Tag <li>

รายการจะเป็นแบบ bullets (วงกลมสีดำ) เป็นค่าเริ่มต้น

ตัวอย่าง


                        
                        

ลองเขียนโค้ด

หากต้องการเปลี่ยนสัญลักษณ์แต่ละข้อ สามารถทำได้โดยกำหนด property list-style-type ใน CSS

ค่าที่สามารถใส่ได้ดูจากตารางต่อไปนี้

ค่าอธิบาย
discสัญลักษณ์เป็นวงกลมสีดำ
circleสัญลักษณ์เป็นวงกลม
squareสัญลักษณ์เป็นสีเหลี่ยมสีดำ
noneไม่มีสัญลักษณ์

ตัวอย่าง disc


                        
                        

ลองเขียนโค้ด

ตัวอย่าง circle


                        
                        

ลองเขียนโค้ด

ตัวอย่าง square


                        
                        

ลองเขียนโค้ด

ตัวอย่าง none


                        
                        

ลองเขียนโค้ด


รายการแบบเรียงลำดับ (Ordered List)

สร้างรายการแบบเรียงลำดับเริ่มด้วย Tag <ol> และแต่ละข้อเริ่มด้วย Tag <li>

รายการจะมีตัวเลขเรียงลำดับนำหน้า เป็นค่าเริ่มต้น

ตัวอย่าง


                        
                        

ลองเขียนโค้ด

หากต้องการเปลี่ยนรูปแบบการเรียงลำดับ สามารถทำได้โดยกำหนด Attribute type ของ Tag <ol>

ค่าที่สามารถใส่ได้ดูจากตารางต่อไปนี้

ค่าอธิบาย
type="1"เรียงลำดับด้วยตัวเลข
type="A"เรียงลำดับด้วยตัวอักษรภาษาอังกฤษตัวใหญ่
type="a"เรียงลำดับด้วยตัวอักษรภาษาอังกฤษตัวเล็ก
type="I"เรียงลำดับด้วยตัวอักษรโรมันตัวใหญ่
type="i"เรียงลำดับด้วยตัวอักษรโรมันตัวเล็ก

ตัวอย่าง ตัวเลข


                        
                        

ลองเขียนโค้ด

ตัวอย่าง ตัวอักษรภาษาอังกฤษตัวใหญ่


                        
                        

ลองเขียนโค้ด

ตัวอย่าง ตัวอักษรภาษาอังกฤษตัวเล็ก


                        
                        

ลองเขียนโค้ด

ตัวอย่าง ตัวอักษรโรมันตัวใหญ่


                        
                        

ลองเขียนโค้ด

ตัวอย่าง ตัวอักษรโรมันตัวเล็ก


                        
                        

ลองเขียนโค้ด


รายการคำอธิบาย (Description Lists)

สร้างรายการคำอธิบายโดยมีหัวข้อและคำอธิบายแต่ละหัวข้อ เริ่มต้นด้วย Tag <dl> เพื่อระบุรายการคำอธิบาย

ส่วนหัวข้อเริ่มด้วย Tag <dt> และคำอธิบายในหัวข้อนั้นๆ ใช้ Tag <dd>

คำอธิบายในหัวข้อ จะเป็นการย่อหน้าเข้า ไม่มีสัญลักษณ์อะไร

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


รายการซ้อนรายการ (Nested Lists)

รายการสามารถซ้อนอยู่ในรายการได้

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


รายการแนวนอน (Horizontal Lists)

รายการสามารถตกแต่งได้หลากหลายแบบด้วย CSS

หนึ่งในวิธีที่ได้รับความนิยมมากที่สุด คือ รายการแบบแนวนอน เพื่อสร้างเมนู

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


บทสรุป

  • ใช้ <ul> สร้างรายการแบบไม่เรียงลำดับ
  • ใช้ Property CSS list-style-type เลือกประเภทสัญลักษณ์หน้าข้อ
  • ใช้ <ol> สร้างรายการแบบเรียงลำดับ
  • ใช้ Attribute type กำหนดประเภทการเรียงลำดับ
  • ใช้ <li> สร้างรายการแต่ละข้อ
  • ใช้ <dl> สร้างรายการคำอธิบาย
  • ใช้ <dt> สร้างหัวเรื่องคำอธิบาย
  • ใช้ <dd> สร้างคำอธิบายแต่ละข้อ
  • รายการสามารถซ้อนรายการได้
  • รายการสามารถมี Element อื่นๆได้ นอกจากข้อความ
  • ใช้ Property CSS float: left หรือ display: inline เพื่อแสดงในแนวนอน