บนในเว็บเพจของเรานั้น เราจะใช้ Html และ CSS ในการทำรายการต่าง ๆ ได้ อาจจะต้องแสดงเมนูรายการต่าง ๆ เพื่อรู้ลำดับ ขั้นตอนการดำเนินงาน หรือไม่แสดงเป็นลำดับก็ได้ให้บอกว่ามีในนั้นมีองค์ประกอบอะไรบ้าง เป็นต้น
การแสดงลำดับรายการด้วยแท็ก <ol>
บนเว็บเพจของเรา เราอาจจำเป็นต้องแสดงรายการที่เป็นลำดับ เป็นขั้นตอน ตัวอย่างเช่น 1, 2, 3, 4, ... ซึ่งจะมีสิธีสร้างลำดับเป็นตัวเลข ดังนี้
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ol{ font-size: 14px; } </style> </head> <body> <ol> <li>เรียนดี</li> <li>กีฬาเด่น</li> <li>สามัคคี</li> </ol> </body> </html>ผลลัพธ์ที่ได้
จากตัวอย่างการสร้างลำดับตัวเลข จะอยู่ภายในแท็ก <ol></ol> ซึ่ง ol ย่อมาจาก Ordered List เป็นการแสดงลำดับที่มีการแสดงตัวเลข ดดยแต่ละรายการจะอยู่ภายใต้แท็ก <li></li> จำนวน 3 ชุด
ค่าเริ่มต้นของแท็ก ol เป็นตัวเลข 1, 2, 3, ... แต่เราสามารถเปลี่ยนไปใช้ตัวเลขโรมัน I, II, III, ... ได้ตามที่เราต้องการ
ตาราง : Type ต่าง ๆ ของแท็ก ol
Type | รูปแบบ Style | คำอธิบาย |
1 | 1, 2, 3, ... | ลำดับเป็นตัวเลข |
a | a, b, c, ... | ลำดับเป็นตัวอักษรอังกฤษพิมพ์เล็ก |
A | A, B, C, ... | ลำดับเป็นตัวอักษรอังกฤษพิมพ์ใหญ่ |
i | i, ii, iii, ... | ลำดับเป็นตัวเลขโรมันพิมพ์เล็ก |
I | I, II, III, ... | ลำดับเป็นตัวเลขโรมันพิมพ์ใหญ่ |
ถ้าเราต้องเลขโรมัน ต้องกำหนด type = "i" ตัวอย่างต่อไปนี้
<body> <ol type="i"> <li>เรียนดี</li> <li>กีฬาเด่น</li> <li>สามัคคี</li> </ol> </body>ผลลัพธ์ที่ได้
การแสดงรายการ ที่ไม่มีลำดับตัวเลข
จากอันที่แล้ว เราได้สร้างรายการที่เป็นลำดับ เช่น 1, 2, 3, 4, ... แต่ถ้าเราไม่ต้องการแสดงลำดับตัวเลขเป็นแค่แสดงเครื่องหมายจุด หรือสี่เหลี่ยมหน้าลำดับ จะใช้แท็ก <ul></ul> แทน <ol></ol> ซึ่ง ul ย่อมาจาก Unordered List ซึ่งภายในแท็ก ul จะต้องมีแท็ก <li></li> เพื่อใช้แสดงรายการทั้งหมด
ตัวอย่างการใช้แท็ก ul
ผลลัพธ์ที่ได้
และเราสามารถเปลี่ยนเครื่องหมายต่าง ๆ ได้ เช่น สี่เหลี่ยม หรือ จุดวงกลมไม่ทึบ เราจะต้องไปกำหนดค่า Type ไป
ตาราง : Type ต่าง ๆ ของแท็ก ul
Type | อธิบาย |
disc | จุดวงกลม |
circle | จุดวงกลมไม่ทึบ |
square | จุดสี่เหลี่ยม |
ถ้าเราไม่ได้กำหนด Type ค่าเริ่มต้นจุดวงกลมทึบหรือ disc แต่ถ้าต้องการเปลี่ยน Type เป็นรูปต่าง ๆ เราสามารถทำได้ ดังตัวอย่างต่อไปนี้
<body> ภาษาที่ใช้เขียนเว็บไซต์ <ul type="square"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>PHP</li> <li>อื่น ๆ</li> </ul> </body>ผลลัพธ์ที่ได้
ดังนั้น ในภาษา Html สามารถจัดรายการได้ 2 แบบซึ่งการเขียนแสดงรายการจะมีทั้ง 2 แบบ คือ รายการแบบมีลำดับ และ รายการแบบไม่มีลำดับ รายการแบบมีลำดับจะใช้แท็ก ul ในการจัดลำดับขั้นตอน รายการแบบไม่มีลำดับจะใช้แท็ก ol ซึ่งที้ง 2 แบบ สามารถเปลี่ยน Type ได้และ 2 แบบนี้จะต้องใส่แท็ก li ภายในแท็กของ ol กับ ul เพื่อแสดงรายการต่าง ๆ ได้ เราสามารถใช้ CSS ตกแต่งได้
อ้างอิง
การใช้ HTML List แบบง่าย ๆ ,[ออนไลน์], เข้าถึงได้จาก //doesystem.blogspot.com/2016/03/html-list.html
บทที่ 5 การกำหนดรายการหัวข้อและเลขลำดับ ,[ออนไลน์], เข้าถึงได้จาก //sites.google.com/site/brcom23202/bth-thi-5-kar-cad-rup-baeb-taw-xaksr-laea-kar-chi-si
สร้างรายการ (Lists) ,[ออนไลน์], เข้าถึงได้จาก //code-th.com/html/lesson/lists