การแสดงผลแบบรายการ (List)


รายการแบบใช้สัญลักษณ์กำกับ <UL>..</UL>

รายการแบบใช้สัญลักษณ์กำกับ (Unnumber Lists หรือ Unorder Lists) <UL>..</UL> เป็นคำสั่งให้แสดงผลข้อมูล แบบรายการโดยไม่ใช้ตัวเลขเป็นตัวแสดงลำดับของรายการ เพราะในการแสดงผลจะใช้เครื่องหมาย แทนตัวเลข โปรแกรมเว็บเบราเซอร์แต่ละตัวจะกำหนดรูปภาพที่แสดงออกเป็นหัวข้อในแต่ละรายการ แตกต่างกันไป บางโปรแกรมเป็นจุดกลม สี่เหลี่ยม รูปหัวใจ หรือรูปอื่นๆ ตามที่เลือก
ภายใน <UL>...</UL> จะมีคำสั่ง <LI> เป็นส่วน ประกอบสำคัญของการแสดงรายการของข้อมูล

สมาชิกของรายกาย(List) <LI>

เป็นส่วนที่ข้อความที่ถูกนำมาแสดงเป็นรายย่อย มักเป็นข้อความที่ไม่ยาวมากนัก ส่วนใหญ่จะเป็นหัวข้อ
List Item (LI) จะมีจำนวนเท่าใดก็ได้ และคำสั่งนี้ไม่มีตัวปิด



ตัวอย่าง

Source View
<html>
<head><title> </title></head>
<body>
<ul>
<center>Wellcome to Web Design</center>
<li>Web Builder
<li>Webpage  Design
<li>Cools site
</ul>
</body>
</html>
    Wellcome to Web Design
  • Web Builder
  • Webpage Design
  • Cools site




การกำหนดสัญลักษณ์ (TYPE=n)

ปกติรูปแบบของสัญลักษณ์ที่ปรากฏอยู่ในบราเซอร์ มักจะเป็นแบบจุดกลม แต่สำหรับ Netscape เราสามารถเปลี่ยนแปลงสัญลักษณ์นี้ได้โดยการกำหนดรูปบบบ ของสัญลักษณ์ลงไปในส่วนของ <UL> หรือ <LI> ด้วยการเพิ่มแอตทริบิวต์ TYPE=n n ซึ่ง n มีค่าเป็น Disc, Circle, Square



ตัวอย่าง

Source View
<ul type=disc>
<li>This is type disc
<li>How do i live
</ul>
<ul type=circle>
<li>This is type circle
<li>It's cool.
</ul>
<ul type=square>
<li>This is type circle
<li>Titanic
</ul>
<ul>
<li type=disc>Radio vote
<li type=circle>Hot wave
<li type=square>Green wave
</ul>
  • This is type disc
  • How do i live
  • This is type circle
  • It's cool.
  • This is type circle
  • Titanic
  • Radio vote
  • Hot wave
  • Green wave

NOTE & TIPS !!
  • การกำหนดรูปแบบของรายการ ทำได้กับ Netscape เท่านั้น Internet Explorer ไม่สนับสนุนแอตทริบิวต์นี้
  • ในการใช้ li=disc จะมีปัญหากับ Netscape 3 ซึ่งจะแสดงผลเป็นตัว ท เนื่องจากรหัสของคำสั่ง <LI> ไปตรงกับรหัสภาษาไทยพอดี ซึ่งในที่นี้คือ ตัว ท
  • หากเราต้องการให้แต่ละรายการ(List) มีรูปแบบของสัญลักษณ์ที่แตกต่างกัน เราสามารถ กำหนด type=n ลงไปในคำสั่ง <li> ได้ เช่น <li type=circle> โดย n มีค่าเป็น Disc, circle ,square




รายการแบบใช้ตัวเลขและสัญลักษณ์กำกับ <OL>..</OL>

รายการแบบใช้ตัวเลขกำกับ (Numbered Lists หรือ Order Lists) เช่นเดียวกับ <UL>..</UL> ภายใน <OL>..</OL> ก็จะประกอบด้วย แอตทริบิวต์ <LI> เหมือนกัน

ตัวอย่าง

Source View
<html>
<head><title> </title></head>
<body>
<OL>
<center>Wellcome to Web Design</center>
<li>Web Builder
<li>Webpage  Design
<li>Cools site
</OL>
</body>
</html>
    Wellcome to Web Design
  1. Web Builder
  2. Webpage Design
  3. Cools site



การกำหนดรูปแบบตัวอักษรอื่นๆ
ทำได้โดยการเพิ่มแอตทริบิวต์ Type=n โดยที่ n มีค่าเป็น A หรือ a และ I หรือ i ซึ่งแต่ละตัวก็จะถือว่า เป็นชุดแรกของตัวอักษร
เช่น กำหนด n เป็น A ตัวอักษรถัดไปก็จะเป็น B,C,D ตามลำดับ หรือกำหนดให้ n มีต่าเป็น I ตัวอักษรถัดไปก็จะเป็น II,III,IV เป็นต้น
นอกจากนี้เรายังสามารถกำหนดค่าเริ่มต้นได้โดยใช้ แอตทริบิวต์ Start=n โดย n มีค่าเป็นเลขเริ่มต้น เช่น กำหนดให้ n เป็น 20 ตัวต่อไปก็จะเป็น 21, 22, 23 เป็นต้น

ตัวอย่าง

Source View
<ol  type=A>
<li>This is type A . eg. A,B,C ...
<li>How do i live
</ol>
<ol type=a>
<li>This is type a. eg. a,b,c ...
<li>It's cool.
</ol>
<ol type=I>
<li>This is type I. eg I,II,III ...
<li>Titanic
</ol>
<ol  type=I start=5>
<li >This is type I but It start=5.
<li>Hot wave
<li>Green wave
  </ol>
<ol  start=20>
<li >This is type number but It start=20.
<li>Hot wave
<li>Green wave
  </ol>
  1. This is type A . eg. A,B,C ...
  2. How do i live
  1. This is type a. eg. a,b,c ...
  2. It's cool.
  1. This is type I. eg I,II,III ...
  2. Titanic
  1. This is type I but It start=5.
  2. Hot wave
  3. Green wave
  1. This is type number but It start=20.
  2. Tata Remix
  3. Briohny  



รายการแบบเมนู <MENU>..</MENU>

เป็นรูปแบบการแสดงรายการที่พบเห็นได้ทั่วไป ซึ่งการแสดงผลเหมือนกับ คำสั่ง <UL> ... </UL>

ตัวอย่าง

Source View
<menu>การทำเมนู
<li>ข้อมูลที่นำมาแสดง
<li>ข้อมูลที่นำมาแสดง
</menu> 		การทำเมนู
  • ข้อมูลที่นำมาแสดง
  • ข้อมูลที่นำมาแสดง



    • รายการแบบไดเรกทอรี <DIR>..</DIR>

    เป็นรูปแบบการแสดงรายการอีกรูปแบบหนึ่ง มีลักษณืะเหมือนกับ <UL> ... </UL> แต่ สามารถใช้ตัวอักษรได้สูงสุด 24 ตัวอักษร

    ตัวอย่าง

    Source View
    <menu>การทำรายการแบบไดเรกทอรี
    <li>SUPER MAN
    <li>SUPER GIRL
    </menu>     		การทำรายการแบบไดเรกทอรี
  • SUPER MAN
  • SUPER GIRL



    • รายการแบบคำจัดกัดความ <DL>..</DL>

    เป็นคำสั่งที่อยู่ในรูปแบบของคำจัดกัดความ คำศัพท์ หัวข้อ สำหรับการนำเอามาใช้งานนั้น ไม่สามารถนำมาใช้ร่วมกับคำสั่ง <LI> ได้ แต่จะใช้กับคำสั่ง <DT> และ <DT> แทน

    <DT> หรือ คำจัดกัดความ
    เป็นชื่อของคำจัดกัดความ คำศัพท์ หรือหังข้อที่ต้องการให้มีคำอธิบาย
    <DT> หรือ คำอธิบาย
    เป็นส่วนประกอบย่อยของ <DT> อีกทีหนึ่ง ใช้เป็นข้อความบรรยายแสดงรายละเอียดของคำจัดกัดความ คำศัพท์หรือหัวข้อที่กำหนดนั้น


    ตัวอย่าง

    Source View
    <DL>รายการแบบคำจำกัดความ
    <DT>คำจำกัดความ 1
    <DD>คำอธิบาย 1
    <DT>คำจำกัดความ 2
    <DD>คำอธิบาย 2
    <DT>คำจำกัดความ 3
    <DD>คำอธิบาย 3
    <DL>
    รายการแบบคำจำกัดความ
    คำจำกัดความ 1
    คำอธิบาย 1
    คำจำกัดความ 2
    คำอธิบาย 2
    คำจำกัดความ 3
    คำอธิบาย 3



    รายการแบบคำจัดกัดความแบบกระชับ <DL COMPACT>

    ในกรณีที่ต้องการแสดงผลข้อมูลให้ <DT> และ <DT> ให้อยู่ในบรรทัดเดียวกันให้เพิ่มแอตทริบิวต์ Compact ในคำสั่ง &60;dl> เป็น <DL COMPACT> หากข้อความที่อยู่ใน <DT> ไม่ยาวมากนัก เวบบราว์เซอร์จะนำเอา คำอธิบายที่อยู่ใน <DD>มารวมอยู่ในบรรทัดเดียวกัน

    ตัวอย่าง

    Source View
    <DL COMPACT>รายการแบบคำจำกัดความ
    <DT>PAT
    <DD>This my nickname!
    <DT>Ronaldo
    <DD>This my friend!
    <DT>Alicia
    <DD>This my sister!
    </DL>
    รายการแบบคำจำกัดความ
    PAT
    My nickname!
    Ronaldo
    This my friend!
    Alicia
    This my sister!