ใบความรู้ที่ 5 การสร้างรายการ (Lists)

การสร้างรายการใน html

เขียนโดย Administrator

วันอังคารที่ 23 สิงหาคม 2011 เวลา 16:51 น.

การสร้างรายการใน html รายการใน html มี 3 แบบด้วยกัน คือ รายการแบบไม่มีลำดับ (unordered list) ใช้แท็ก >ul< รายการแบบมีลำดับ (ordered list) ใช้แท็ก >ol< รายการแบบคำนิยาม (definition list) ใช้แท็ก >dl< ตัวอย่างรายการ รายการ รายการ รายการ รายการลำดับที่ 1 รายการลำดับที่ 2 รายการลำดับที่ 3 ตัวอย่างโค้ดของรายการ 01.<ul> 02.<li>รายการ</li> 03.<li>รายการ</li> 04.<li>รายการ</li> 05.</ul> 06.<ol> 07.<li>รายการลำดับที่ 1</li> 08.<li>รายการลำดับที่ 2</li> 09.<li>รายการลำดับที่ 3</li> 10.</ol> รายการแบบไม่มีลำดับ (Unordered Lists) ใน html รายการแบบไม่มีลำดับ จะใช้แท็ก ul (ย่อมาจาก unordered list) และแต่ละรายการภายในจะอยู่ในแท็ก li (ย่อมาจาก list item) โดยแต่ละรายการจะแสดงเครื่องหมายด้วยจุดวงกลมสีดำ (โดยค่าเริ่มต้น) 1.<ul> 2.<li>กาแฟ</li> 3.<li>นม</li> 4.<li>ชา</li> 5.</ul> จะแสดงผลได้เป็น กาแฟ นม ชา รายการแบบมีลำดับ (Ordered Lists) ใน html รายการแบบไม่มีลำดับ จะใช้แท็ก ol (ย่อมาจาก ordered list) และแต่ละรายการภายในจะอยู่ในแท็ก li (ย่อมาจาก list item) เหมือนกับแท็ก ul โดยแต่ละรายการจะแสดงเป็นตัวเลขเรียกลำดับกันไป (โดยค่าเริ่มต้น) 1.<ol> 2.<li>กาแฟ</li> 3.<li>นม</li> 4.<li>ชา</li> 5.</ol> จะแสดงผลได้เป็น กาแฟ นม ชา รายการแบบคำนิยาม (Definition Lists) ใน html รายการแบบคำนิยาม คือ รายการของแต่ละข้อมูล และมีคำอธิบายของแต่ละรายการ รายการแบบคำนิยามจะใช้แท็ก dl (ย่อมาจาก definition list ) และแต่ละรายการภายในจะอยู่ในแท็ก dt และ คำอธิบายของแต่ละแท็ก dt จะอยู่ในแท็ก dd 1.<dl> 2.<dt>กาแฟ</dt> 3.<dd>- เครื่องดิ่มร้อนสีดำ</dd> 4.<dt>นม</dt> 5.<dd>- เครื่องดิ่มเย็นสีขาว</dd> 6.<dt>ชา</dt> 7.<dd>- เครื่องดิ่มร้อนหรือเย็น สีชา</dd> 8.</dl> จะแสดงผลได้เป็น กาแฟ - เครื่องดิ่มร้อนสีดำ นม - เครื่องดิ่มเย็นสีขาว ชา - เครื่องดิ่มร้อนหรือเย็น สีชา แท็ก html อ้างอิง แท็ก คำอธิบาย <ol> กำหนดรายการที่มีลำดับ <ul> กำหนดรายการที่ไม่มีลำดับ <li> กำหนดข้อมูลของแต่ละรายการ <dl> กำหนดรายการคำนิยาม <dt> กำหนดข้อมูลของแต่ละรายการ <dd> กำหนดคำอธิบายของแต่ละข้อมูล

ขอบคุณที่มา : http://www.freescriptsplanet.com/