การแสดงผลแบบรายการ
ในการแสดงข้อมูลบนเว็บเพจ นอนกจากการแสดงผลแบบปกติทั่วไปแล้ว บางครั้งเราอาจมีความจำเป็นต้องจัดรูปแบบการแดสงผลให้เป็นแบบของรายการ (Lists) คือมีการแสดงข้อมูลในลักษณะที่เป็นหัวข้อ ซึ่งอาจมีคำอธิบายหรือไม่ก็ได้

การแสดงข้อมูลแบบรายการ (Lists) จะมีรายการแบบมีลำดับ (ใช้หมายเลขกำกับ) หรือแบบไม่มีลำดับ (ใช้สัญลักษณ์กำกับ) แต่ไม่ว่าจะเลือกให้มีการแสดงผลรายการแบบใดก็ตาม ทั้ง 2 แบบ ก็มีลักษณะการทำงานที่เหมือนกัน แตกต่างกันเพียงแบบหนึ่งเป็นตัวเลขและอีกแบบหนึ่งเป็นสัญลักษณ์เท่านั้น
การแสดงข้อมูลรายการแบบมีหมายเลขกำกับ (Number/Order Lists)
การแสดงข้อมูลรายการแบบมีหมายเลขกำกับ (Number/Order Lists) จะใช้แท็ก <OL> และ </OL> ซึ่งย่อมาจาก Ordered List คือข้อมูลรายการแบบมีหมายเลข เรียงลำดับจากน้อยไปหามากกำกับอยู่หน้าแต่ละรายการ โดยมีแท็กที่เป็นส่วนประกอบภายในอีกทีหนึ่ง คือแท็ก <LI> ที่ใช้กำหนดหัวเรื่องหรือรายละเอียดของรายการย่อย ซึ่งเมื่อรายการย่อยเหล่านี้นำไปแสดงบนเบราเซอร์ ลำดับที่ของรายการจะถูกใส่ให้กับแต่ละรายการโดยอัตโนมัติ

 

<ol type="A,a,I,I,1" start="ตัวเลข">
<li>
<li value="ตัวเลขที่กำหนดค่า">
<li>
</ol>
  • type= ชนิดของการแสดงผลแบบรายการ
    • I , i เป็นการแสดงผลแบบโรมัน
    • A , a เป็นการแสดงผลแบบภาษาอังกฤษ
    • 1 เป็นการแสดงผลลำดับรายการปกติ (Default)
  • start= การเริ่มของค่าของการแสดงรายการ (สามารถกำหนดค่าเริ่มต้นได้)
  • value= การกำหนดค่าเฉพาะแต่ละค่าของการแสดงรายการ
การแสดงข้อมูลรายการแบบมีสัญลักษณ์กำกับ (Bulleted/Unordered Lists)
วิธีการใช้แท็ก < UL > และ < /UL > หรือรายการแบบใช้สัญลักษณ์กำกับ (Unordered List) นี้มีส่วนประกอบภายในคล้าย ๆ กับการเรียงรายการแบบใช้หมายเลขกำกับ คือมีส่วนหรัวเรื่องและส่วนรายการย่อย พร้อมทั้งแอตทริบิวต์ TYPE ที่ใช้กำหนดสัญลักษณ์กำกับหน้ารายการย่อย

 

<ul type="circle,square,disc">
<li>
<li>
<li>
</ul>
  • type= "circle" การกำหนดรายการแบบวงกลม
  • type= "square" การกำหนดรายการแบบสี่เหลี่ยมทึบ
  • type= "disc" การกำหนดรายการแบบวงกลมทึบ (เป็น Default)
การเรียงรายการแบบใช้นิยาม
รายการย่อยแบบใช้นิยาม หรือ Definition List นี้จะคล้ายกันกับรายการย่อยแบบที่ใช้หมายเลขหรือสัญลักษณ์กำกับ ต่างกันที่ไม่สัญลักษณ์ใดๆ กำกับหน้าแต่ละรายการย่อย มีเพียงแต่รายการย่อยต่างๆ แสดงอยู่ลักษณะคล้ายกับพจนานุกรม โดยมีแท็กที่เกี่ยวข้องอยู่ 3 แท็กด้วยกัน คือ <DL> และ </DL> เพื่อบอกว่ารายการย่อยมีลักษณะเป็น แบบใช้นิยาม ส่วนแท็ก <DT> นั้นใช้บอกส่วนที่เป็นเรื่องของแต่ละรายการย่อย และแท็ก <DD> ใช้บอกส่วนที่เป็นรายละเอียดในรายการย่อยนั้น

 

<DL>
<DT>ข้อความ</DT>
<DD>ข้อความ</DD>
</DL>
การเรียงรายการแบบใช้รูปภาพกำกับ
จากวิธีการเรียงรายการย่อยแบบใช้สัญลักษณ์กำกับที่ได้กล่าวในหัวข้อที่ผ่านมา จะเห็นว่าสัญลักษณ์ที่มีให้ใช้นั้นค่อนข้างจะจำกัด ทำให้เว็บเพจที่ได้ดูไม่สวยงามและน่าสนใจ เท่าใดนัก ซึ่งถ้านักเขียนเว็บเพจมีรูปหรือสัญลักษณ์ที่แปลกไปและมีขนาดเล็ก ๆ ก็สามารถจะนำมาใช้ทำเป็นสัญลักษณ์กำกับได้ โดยทั้งนี้ต้องนำแท็ก <IMG> มาใช้ผสมกับแท็ก <UL>
<ul>
<IMG SRC="ชื่อไฟล์รูปนามสกุล .jpg หรือ .gif>
</ul>
แท็ก < MENU > และ < DIR >
แท็ก <MEUN> และ <DIR> เป็นแท็กที่ใช้ทำรายการที่ใช้สัญลักษณ์กำกับหน้ารายการย่อย วิธีการใช้งานและผลที่ได้รับไม่ต่างอะไรไปจากแท็ก <UL> มากนัก ซึ่งบางเบราเซอร์ก็มองแท็ก 2 ตัวนี้เหมือนกับแท็ก <UL>
<MENU>
<LH>ข้อความ
<LI><A HREF="ชื่อไฟล์ .html">ข้อความ</A>
</MENU>

ใน HTML 4.0 ได้มีการประกาศว่าแท็ก < MENU > และ < DIR > เป็นแท็กที่ถูกยกเลิก เพราะให้ผลไม่แตกต่างไปจากการใช้แท็ก < UL > เลยแต่การเปลี่ยนแปลงที่สำคัญใน HTML 4.0 คือมีการเพิ่มแอตทริบิวต์ STYLE ให้ใช้ในแท็กที่เกี่ยวข้องกับรายการย่อยได้ และยังคงสามารถใช้แอตทริบิวต์ STYLE นี้เพื่อกำหนดรูปแบบเลขที่กำกับแทนการ แอตทริบิวต์ TYPE ได้อีกด้วย

<OL STYLE="list-style-type:1 ; lis-style-position:7>

 
Free Web Hosting