Download to read offline
บทที่ 6 การใช้สร้างรายการด้วย list
- 1.
- 2.
- 3. การสร้างลิสต์แบบไม่มีลาดับ <ul> ลิสต์แบบไม่มีลาดับ(un-ordered list) เป็ นลิสต์ที่เหมาะสาหรับการนาเสนอ ข้อมูลที่เป็ นประเด็นสั้นๆ ไม่ต้องการลาดับของตัวเลข หรือตัวอักษร ชื่อแท็ก ul และ li ตาแหน่งของแท็ก ul (Unordered List) อยู่ภายในแท็ก <body> … </body> รูปแบบใน HTML <ul> <li> ข้อมูลในลิสต์ </li> <li> ข้อมูลในลิสต์ </li> … </ul>
- 4. ตัวอย่างการสร้างลิสต์แบบไม่มีลาดับ <body> <ul> รายการสินค้าที่มีขายในเว็บไซต์ของเรา <li> เครื่องสาอาง </li> <li>เสื้อผ้า </li> <li> รองเท้า </li> </ul> </body>
- 5. การกาหนดเครื่องหมายนาหน้าหัวข้อ การกาหนดเครื่องหมายนาหน้าหัวข้อทาได้โดยใส่ attribute‘type’ เข้าไป ภายใต้ <ul> หรือ <li> <ul type="circle"> <li>one</li> <li>two</li> <li type="square">three</li> </ul> ชนิดของเครื่องหมาย รูปแบบ สัญลักษณ์ disc วงกลมทึบ • Circle วงกลมโปร่งใส square สี่เหลี่ยมทึบ
- 6. การสร้างลิสต์แบบมีลาดับ ลิสต์แบบมีลำดับใช้เพื่อเสนอข้อมูล เช่นขั้นตอนกำรทำงำนหรืออันดับหนังสือขำยดีกำรใช้จะคล้ำย กับกำรใช้ลิสต์แบบไม่มีลำดับ แต่จะมีตัวเลขกำกับแต่ละสมำชิกที่อยู่ในลิสต์ ชื่อแท็ก Ol และ li ตาแหน่งของแท็ก Ol (Ordered List) อยู่ภายในแท็ก <body>…</body> Li (List Item) อยู่ภายในแท็ก <ol>…</ol> รูปแบบใน <ol> <li> ข้อมูลในลิสต์ </li> <li> ข้อมูลในลิสต์ </li> … </ol>
- 7. ตัวอย่างการสร้างลิสต์แบบมีลาดับ <body> <ol> รายการสินค้าที่มีขายในเว็บไซต์ของเรา <li> เครื่องสาอาง </li> <li>เสื้อผ้า </li> <li> รองเท้า </li> </ol> </body>
- 8. การกาหนดชนิดของตัวจัดลาดับ เราสามารถทาได้โดยกาหนดชนิดของตัวจัดอันดับลงไปใน <ol><ol type="A"> <li>one </li> <li> two </li> <li> three </li> </ol> ชนิด คาอธิบาย Type=“ A” แสดงเป็ นตัวอักษรพิมพ์ใหญ่ A,B,C,… Type=“ a” แสดงเป็ นตัวอักษรพิมพ์เล็ก a,b,c,… Type=“I ” แสดงเป็ นเลขโรมันตัวพิมพ์ใหญ่ I,II,III,…
- 9. กาหนดลาดับเริ่มต้นให้กับข้อมูล ถ้าเราต้องการกาหนดลาดับเริ่มต้นหรือต้องการข้ามลาดับไปบาง รายการ เราสามารถทาได้ดังนี้ <olstart="4"> <li> one </li> <li> two </li> <li> three </li> </ol> <ol> <li> one </li> <li value="7"> two </li> <li> three </li> </ol>
- 10. การสร้างลิสต์ซ้อนกัน การสร้างลิสต์ซ้อนกันมีประโยชน์ในการนาเสนอข้อมูลที่มีหัวข้อย่อยหรือมีขั้นตอน มาก <ol> <li> one</li> <ol type="a"> <li> a </li> <li> b </li> <li> c </li> </ol> <li> two </li> <ul type="square"> <li> 1 </li> <li> 2 </li> <li> 3 </li> </ul> <li> three </li> </ol>