แบบเลขลําดับมีอะไรบ้าง

Question

บนในเว็บเพจของเรานั้น เราจะใช้ 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> ซึ่ง 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>

ผลลัพธ์ที่ได้

แท็ก ol ใช้ type="i"

การแสดงรายการ ที่ไม่มีลำดับตัวเลข

จากอันที่แล้ว เราได้สร้างรายการที่เป็นลำดับ เช่น 1, 2, 3, 4, ... แต่ถ้าเราไม่ต้องการแสดงลำดับตัวเลขเป็นแค่แสดงเครื่องหมายจุด หรือสี่เหลี่ยมหน้าลำดับ จะใช้แท็ก <ul></ul> แทน <ol></ol> ซึ่ง ul ย่อมาจาก Unordered List ซึ่งภายในแท็ก ul จะต้องมีแท็ก <li></li> เพื่อใช้แสดงรายการทั้งหมด

ตัวอย่างการใช้แท็ก ul

<!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>
        body{
            font-size: 14px;
        }
    </style>
</head>
<body>
ภาษาที่ใช้เขียนเว็บไซต์
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>PHP</li>
        <li>อื่น ๆ</li>
    </ul>
</body>
</html>

ผลลัพธ์ที่ได้

แท็ก 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>

ผลลัพธ์ที่ได้

แท็ก ul ใช้ type square

ดังนั้น ในภาษา Html สามารถจัดรายการได้ 2 แบบซึ่งการเขียนแสดงรายการจะมีทั้ง 2 แบบ คือ รายการแบบมีลำดับ และ รายการแบบไม่มีลำดับ รายการแบบมีลำดับจะใช้แท็ก ul ในการจัดลำดับขั้นตอน รายการแบบไม่มีลำดับจะใช้แท็ก ol ซึ่งที้ง 2 แบบ สามารถเปลี่ยน Type ได้และ 2 แบบนี้จะต้องใส่แท็ก li ภายในแท็กของ ol กับ ul เพื่อแสดงรายการต่าง ๆ ได้ เราสามารถใช้ CSS ตกแต่งได้

อ้างอิง

การใช้ HTML List แบบง่าย ๆ ,[ออนไลน์], เข้าถึงได้จาก http://doesystem.blogspot.com/2016/03/html-list.html

บทที่ 5 การกำหนดรายการหัวข้อและเลขลำดับ ,[ออนไลน์], เข้าถึงได้จาก https://sites.google.com/site/brcom23202/bth-thi-5-kar-cad-rup-baeb-taw-xaksr-laea-kar-chi-si

สร้างรายการ (Lists) ,[ออนไลน์], เข้าถึงได้จาก https://code-th.com/html/lesson/lists

การใส่เลขหัวข้อย่อย word การแสดงรายการแบบใช้ตัวเลข ใช้คำสั่งรูปแบบใด ในการสร้างลิสต์แบบไม่เรียงลำดับ จะใช้แท็กคำสั่งใด คำสั่งสร้างลำดับรายการแบบไม่เรียงลำดับข้อมูลคือข้อใด