Sax Knowledge : Share Your Knowledge
ยินดีต้อนรับเข้าสู่ Sax Knowledge : Share your knowledge

กรุณาล็อคอิน เพื่อใช้งานได้อย่างเต็มรูปแบบ เพราะมีบางบอร์ดถูกล็อคอยู่

บทที่ 5 [HTML] คำสั่ง <ul> <ol>

อ่านหัวข้อก่อนหน้า อ่านหัวข้อถัดไป Go down

บทที่ 5 [HTML] คำสั่ง <ul> <ol>

ตั้งหัวข้อ  Admin on Sat 14 May 2011, 2:05 pm

จากคราวที่แล้ว ที่เราได้ฝึกตกแต่งตัวอักษร และตกแต่งเว็บเพจกัน คราวนี้ เราจะมาทำการเรียนรู้เรื่อง ลำดับรายการ ซึ่งก็มีอยู่หลายประเภท บางประเภทอาจมีลักษณะคล้ายกัน ซึ่งเราก็สามารถเลือกใช้ได้ตามสะดวกครับ ซึ่งคราวนี้ เราจะมาศึกษากัน 2 แบบก่อน


1. ลำดับรายการแบบไม่มีลำดับตัวเลข (Unorder List)

ลำดับรายการแบบนี้ ใช้คำสั่ง <ul> โดยภายในคำสั่ง <ul> จะมีคำสั่งย่อย และ คำสั่งเพิ่มเติม ดังนี้

คำสั่งเพิ่มเติม (Attribute) ของแท็ก <ul> และ <li>

type = "n" โดย n แทนรูปแบบของลำดับเลข ได้แก่ disc จะเป็นวงกลมสีดำทึบ(ค่าเริ่มต้น), circle จะเป็นวงกลมโปร่ง, square เป็นสี่เหลี่ยมสีดำทึบ

หากใช้คำสั่งนี้กับ <ul> จะเป็นการกำหนดทั้งลำดับรายการ แต่หากใช้กับคำสั่ง <li> จะแสดงผลกับลิสต์ ที่เรากำหนดไว้เท่านั้น

คำสั่ง <li> เป็นคำสั่งแสดงลิสต์ โดยมีรูปแบบดังนี้ (สามารถเพิ่ม - ลด ลิสต์ได้)

<ul> .......หัวเรื่อง...........
<li>....ข้อความลิสต์ที่ 1.. </li>
<li>....ข้อความลิสต์ที่ 2.. </li>
<li>....ข้อความลิสต์ที่ 3.. </li>
<li>....ข้อความลิสต์ที่ 4.. </li>
</ul>



2. ลำดับรายการแบบมีลำดับตัวเลข (Order List)

ลำดับรายการแบบนี้ ใช้คำสั่ง <ol> โดยภายในคำสั่งนี้ จะมีทั้งคำสั่งย่อย และคำสั่งเพิ่มเติม คล้ายกับแบบ <ul> ดังนี้

คำสั่งเพิ่มเติม (Attribute) ของแท็ก <ol> และ <li>

type = "n" โดย n แทนรูปแบบของตัวเลข ได้แก่ "1" แทนเลขอารบิก (ค่าเริ่มต้น), "A" แทนให้เรียงเป็น A - Z ตัวพิมพ์ใหญ่, "a" แทนให้เรียงเป็น a - z ตัวพิมพ์เล็ก, "I" ใช้แทนเลขโรมัน ตัวพิมพ์ใหญ่, "i" ใช้แทนเลขโรมัน ตัวพิมพ์เล็ก

start = "n" โดย n แทน ตัวเลขที่จะให้แสดงในลำดับแรก ซึ่งใช้ได้เฉพาะกับคำสั่ง <ol> และต้องระบุเป็นตัวเลขอารบิกเท่านั้น (โปรแกรมจะแปลงเป็นตัวอักษร เลขโรมัน เอง)

วิธีการใช้คำสั่งก็จะคล้ายคลึงกับคำสั่ง <ul> ซึ่งก็คือมีรูปแบบเป็น


<ol> .......หัวเรื่อง...........
<li>....ข้อความลิสต์ที่ 1.. </li>
<li>....ข้อความลิสต์ที่ 2.. </li>
<li>....ข้อความลิสต์ที่ 3.. </li>
<li>....ข้อความลิสต์ที่ 4.. </li>
</ol>


ตัวอย่างรูปแบบรายการ จากคำสั่ง

<ul type = "cycle">ตัวอย่างภาษาที่ใช้ในการเขียนเว็บ
<li type = "disc">HTML</li>
<li>PHP</li>
<li>XML</li>
<li>XHTML</li>
<li>ASPX</li>
</ul>

<br><br>

<ol type = "I">ธาตุแต่ละหมู่ในตารางธาตุ (ไม่รวมธาตุทรานซิชัน และธาตุจากระบบ IUPAC)
<li>Li, Na, K, Rb, Cs, Fr</li>
<li>Be, Mg, Ca, Sr, Ba, Ra</li>
<li>B, Al, Ga, In, Tl</li>
<li>C, Si, Ge, Sn, Pb</li>
<li>N, P, As, Sb, Bi</li>
<li>O, S, Se, Te, Po</li>
<li>F, Cl, Br, I, At</li>
<li>He, Ne, Ar, Kr, Xe, Rn</li>
</ol>


avatar
Admin
Admin
Admin

จำนวนข้อความ : 150
Join date : 11/05/2011

ดูข้อมูลส่วนตัว http://saxknowledge.thai-forum.net

ขึ้นไปข้างบน Go down

อ่านหัวข้อก่อนหน้า อ่านหัวข้อถัดไป ขึ้นไปข้างบน


 
Permissions in this forum:
คุณไม่สามารถพิมพ์ตอบ