Embed Size (px)
Citation preview
การใช้สร้างรายการด้วย List
เรียบเรียงโดย ชายด าคอมพิวเตอร์
Contents
การสร้างลิสต์แบบไม่มีล าดับ <ul>1
การสร้างลิสต์ซ้อนกัน3
การสร้างลิสต์แบบมีล าดับ <ol>2
การสร้างลิสต์แบบไม่มีล าดับ <ul>
ลิสต์แบบไม่มีล าดับ (un-ordered list) เป็นลิสต์ที่เหมาะส าหรับการน าเสนอข้อมูลที่เป็นประเด็นสั้นๆ ไม่ต้องการล าดับของตัวเลข หรือตัวอักษร
ชื่อแท็ก ul และ li
ต าแหน่งของแท็ก ul (Unordered List) อยู่ภายในแท็ก <body> … </body>
รูปแบบใน HTML <ul><li> ข้อมูลในลิสต์ </li><li> ข้อมูลในลิสต์ </li>…
</ul>
ตัวอย่างการสร้างลิสต์แบบไม่มีล าดับ
<body>
<ul>
รายการสินค้าที่มีขายในเว็บไซต์ของเรา
<li> เครื่องส าอาง </li>
<li> เสื้อผ้า </li>
<li> รองเท้า </li>
</ul>
</body>
การก าหนดเครื่องหมายน าหน้าหัวข้อ การก าหนดเครื่องหมายน าหน้าหัวข้อท าได้โดยใส่ attribute ‘type’ เข้าไปภายใต้
<ul> หรือ <li>
<ul type="circle"><li>one</li><li>two</li><li type="square">three</li>
</ul>
ชนิดของเครื่องหมาย รูปแบบ สัญลักษณ์
disc วงกลมทึบ •
Circle วงกลมโปร่งใส
square สี่เหลี่ยมทึบ
การสร้างลิสต์แบบมีล าดับ ลิสต์แบบมีล ำดับใช้เพื่อเสนอข้อมูล เช่นขั้นตอนกำรท ำงำนหรืออันดับหนังสือขำยดี กำรใช้จะคล้ำย
กับกำรใช้ลิสต์แบบไม่มีล ำดับ แต่จะมีตัวเลขก ำกับแต่ละสมำชิกที่อยู่ในลิสต์
ชื่อแท็ก Ol และ li
ต าแหน่งของแท็ก Ol (Ordered List) อยู่ภายในแท็ก <body>…</body>Li (List Item) อยู่ภายในแท็ก <ol>…</ol>
รูปแบบใน <ol><li> ข้อมูลในลิสต์ </li><li> ข้อมูลในลิสต์ </li>…
</ol>
ตัวอย่างการสร้างลิสต์แบบมีล าดับ<body>
<ol>รายการสินค้าที่มีขายในเว็บไซตข์องเรา<li> เครื่องส าอาง </li><li> เสื้อผ้า </li><li> รองเท้า </li>
</ol></body>
การก าหนดชนิดของตัวจัดล าดับ เราสามารถท าได้โดยก าหนดชนิดของตัวจัดอันดับลงไปใน <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,…
Type=“i” แสดงเป็นเลขโรมันตัวพิมพเ์ล็ก i,ii,iii
Type=“1” แสดงเป็นตัวเลข คือ 1,2,3,…..
ก าหนดล าดับเร่ิมต้นให้กับข้อมูล ถ้าเราต้องการก าหนดล าดับเริ่มต้นหรือต้องการข้ามล าดับไปบางรายการ
เราสามารถท าได้ดังนี้
<ol start="4"><li> one </li><li> two </li><li> three </li>
</ol>
<ol><li> one </li><li value="7"> two </li><li> three </li>
</ol>
การสร้างลิสต์ซ้อนกัน การสร้างลิสต์ซ้อนกันมีประโยชน์ในการน าเสนอข้อมูลที่มีหัวข้อย่อยหรือมีขั้นตอนมาก
<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>
