บทที่ 5 [HTML] คำสั่ง <ul> <ol>
หน้า 1 จาก 1
บทที่ 5 [HTML] คำสั่ง <ul> <ol>
จากคราวที่แล้ว ที่เราได้ฝึกตกแต่งตัวอักษร และตกแต่งเว็บเพจกัน คราวนี้ เราจะมาทำการเรียนรู้เรื่อง ลำดับรายการ ซึ่งก็มีอยู่หลายประเภท บางประเภทอาจมีลักษณะคล้ายกัน ซึ่งเราก็สามารถเลือกใช้ได้ตามสะดวกครับ ซึ่งคราวนี้ เราจะมาศึกษากัน 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>
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>
Similar topics
» บทที่ 7 [HTML] คำสั่ง <img>
» บทที่ 8 [HTML]คำสั่ง <marquee>
» บทที่ 9 [HTML]คำสั่ง <table>
» บทที่ 11 [HTML]คำสั่ง <frameset>
» บทที่ 4 [HTML] คำสั่ง <body>
» บทที่ 8 [HTML]คำสั่ง <marquee>
» บทที่ 9 [HTML]คำสั่ง <table>
» บทที่ 11 [HTML]คำสั่ง <frameset>
» บทที่ 4 [HTML] คำสั่ง <body>
หน้า 1 จาก 1
Permissions in this forum:
คุณไม่สามารถพิมพ์ตอบ
|
|