7. รายการ (Lists)
ในบทนี้ เราจะมาเรียนรู้วิธีการสร้างรายการใน HTML ซึ่งเป็นองค์ประกอบสำคัญในการจัดระเบียบเนื้อหาให้เป็นระเบียบและอ่านง่าย รายการใน HTML มีสองประเภทหลักๆ คือ รายการแบบมีลำดับ (Ordered Lists) และรายการแบบไม่มีลำดับ (Unordered Lists)
7.1 รายการแบบไม่มีลำดับ (Unordered Lists)
รายการแบบไม่มีลำดับ หรือ Unordered Lists ใช้สำหรับแสดงรายการที่ลำดับไม่ได้มีความสำคัญ โดยจะแสดงเป็นสัญลักษณ์นำหน้าแต่ละรายการ เช่น จุดวงกลม (default), สี่เหลี่ยม, หรือวงกลมโปร่ง เราใช้แท็ก <ul> เพื่อสร้างรายการแบบไม่มีลำดับ
แต่ละรายการในรายการแบบไม่มีลำดับจะถูกกำหนดด้วยแท็ก <li> (List Item)
ตัวอย่าง:
<ul>
<li>กาแฟ</li>
<li>ชา</li>
<li>นม</li>
</ul>
ผลลัพธ์:
- กาแฟ
- ชา
- นม
การปรับแต่งสัญลักษณ์นำหน้า (Bullet Points)
แม้ว่าโดยทั่วไปเราจะใช้ CSS ในการปรับแต่งสไตล์ของเว็บเพจ แต่ในอดีตเราสามารถใช้ attribute type ในแท็ก <ul> เพื่อเปลี่ยนสัญลักษณ์นำหน้าได้ อย่างไรก็ตาม วิธีนี้ไม่แนะนำให้ใช้แล้ว ควรใช้ CSS แทน
<ul style="list-style-type: circle;">
<li>กาแฟ</li>
<li>ชา</li>
<li>นม</li>
</ul>
ผลลัพธ์:
- กาแฟ
- ชา
- นม
คำแนะนำ: ใช้ CSS ในการปรับแต่งสไตล์ของรายการเสมอ ตัวอย่าง:
<style>
.no-bullets {
list-style-type: none; /* ลบสัญลักษณ์นำหน้า */
}
</style>
<ul class="no-bullets">
<li>กาแฟ</li>
<li>ชา</li>
<li>นม</li>
</ul>
ผลลัพธ์:
- กาแฟ
- ชา
- นม
7.2 รายการแบบมีลำดับ (Ordered Lists)
รายการแบบมีลำดับ หรือ Ordered Lists ใช้สำหรับแสดงรายการที่ลำดับมีความสำคัญ โดยจะแสดงเป็นตัวเลข (default), ตัวอักษร, หรือเลขโรมัน เราใช้แท็ก <ol> เพื่อสร้างรายการแบบมีลำดับ
แต่ละรายการในรายการแบบมีลำดับจะถูกกำหนดด้วยแท็ก <li> (List Item) เช่นเดียวกับรายการแบบไม่มีลำดับ
ตัวอย่าง:
<ol>
<li>ขั้นตอนที่ 1: เตรียมส่วนผสม</li>
<li>ขั้นตอนที่ 2: ผสมส่วนผสม</li>
<li>ขั้นตอนที่ 3: อบหรือทอด</li>
</ol>
ผลลัพธ์:
- ขั้นตอนที่ 1: เตรียมส่วนผสม
- ขั้นตอนที่ 2: ผสมส่วนผสม
- ขั้นตอนที่ 3: อบหรือทอด
การปรับแต่งรูปแบบลำดับ
เช่นเดียวกับ <ul> เราสามารถใช้ attribute type ในแท็ก <ol> เพื่อเปลี่ยนรูปแบบของลำดับได้ แต่แนะนำให้ใช้ CSS แทน
ค่าที่ใช้ได้สำหรับ attribute type (deprecated):
1: ตัวเลข (default)a: ตัวอักษรพิมพ์เล็กA: ตัวอักษรพิมพ์ใหญ่i: เลขโรมันพิมพ์เล็กI: เลขโรมันพิมพ์ใหญ่
<ol type="A">
<li>ขั้นตอนที่ 1: เตรียมส่วนผสม</li>
<li>ขั้นตอนที่ 2: ผสมส่วนผสม</li>
<li>ขั้นตอนที่ 3: อบหรือทอด</li>
</ol>
ผลลัพธ์:
- ขั้นตอนที่ 1: เตรียมส่วนผสม
- ขั้นตอนที่ 2: ผสมส่วนผสม
- ขั้นตอนที่ 3: อบหรือทอด
การกำหนดจุดเริ่มต้นของลำดับ
เราสามารถกำหนดจุดเริ่มต้นของลำดับได้โดยใช้ attribute start ในแท็ก <ol>
<ol start="5">
<li>ขั้นตอนที่ 5: เพิ่มเครื่องปรุง</li>
<li>ขั้นตอนที่ 6: ชิมรส</li>
<li>ขั้นตอนที่ 7: จัดเสิร์ฟ</li>
</ol>
ผลลัพธ์:
- ขั้นตอนที่ 5: เพิ่มเครื่องปรุง
- ขั้นตอนที่ 6: ชิมรส
- ขั้นตอนที่ 7: จัดเสิร์ฟ
การใช้ CSS ในการปรับแต่งสไตล์ของรายการแบบมีลำดับ
เช่นเดียวกับรายการแบบไม่มีลำดับ การใช้ CSS เป็นวิธีที่แนะนำในการปรับแต่งสไตล์ของรายการแบบมีลำดับ ตัวอย่าง:
<style>
.roman-numerals {
list-style-type: upper-roman;
}
</style>
<ol class="roman-numerals">
<li>ขั้นตอนที่ 1: เตรียมส่วนผสม</li>
<li>ขั้นตอนที่ 2: ผสมส่วนผสม</li>
<li>ขั้นตอนที่ 3: อบหรือทอด</li>
</ol>
ผลลัพธ์:
- ขั้นตอนที่ 1: เตรียมส่วนผสม
- ขั้นตอนที่ 2: ผสมส่วนผสม
- ขั้นตอนที่ 3: อบหรือทอด
7.3 การสร้างรายการซ้อน (Nested Lists)
เราสามารถสร้างรายการซ้อนได้โดยการใส่ <ul> หรือ <ol> ภายใน <li> ของรายการหลัก
ตัวอย่าง:
<ul>
<li>เครื่องดื่ม<
<ul>
<li>กาแฟ</li>
<li>ชา</li>
<li>น้ำผลไม้</li>
</ul>
</li>
<li>อาหาร</li>
<li>ของหวาน</li>
</ul>
ผลลัพธ์:
- เครื่องดื่ม
- กาแฟ
- ชา
- น้ำผลไม้
- อาหาร
- ของหวาน
ตัวอย่างเพิ่มเติม: รายการซ้อนแบบมีลำดับ
<ol>
<li>ขั้นตอนการทำอาหาร<
<ol>
<li>เตรียมวัตถุดิบ</li>
<li>ปรุงรส<
<ol>
<li>ใส่เกลือ</li>
<li>ใส่น้ำตาล</li>
<li>ใส่พริกไทย</li>
</ol>
</li>
<li>ปรุงสุก</li>
</ol>
</li>
</ol>
ผลลัพธ์:
- ขั้นตอนการทำอาหาร
- เตรียมวัตถุดิบ
- ปรุงรส
- ใส่เกลือ
- ใส่น้ำตาล
- ใส่พริกไทย
- ปรุงสุก
การสร้างรายการซ้อนช่วยให้เราจัดระเบียบข้อมูลที่มีความสัมพันธ์กันได้อย่างเป็นระบบ ทำให้ผู้ใช้งานสามารถเข้าใจโครงสร้างของเนื้อหาได้ง่ายยิ่งขึ้น
ในบทต่อไป เราจะเรียนรู้วิธีการสร้างตารางใน HTML ซึ่งเป็นอีกองค์ประกอบสำคัญในการจัดระเบียบข้อมูลให้เป็นระเบียบและอ่านง่าย