พัฒนาเว็บไซต์ด้วย HTML5

HTML5 รายการแบบไม่เรียงลำดับ

ใน HTML5 การใช้งาน Unordered List (รายการแบบไม่เรียงลำดับ) ใช้แท็ก <ul> โดยรายการแต่ละรายการภายในจะถูกกำหนดด้วยแท็ก <li> รายการแบบไม่เรียงลำดับจะไม่แสดงตัวเลขหรือเลขเรียงลำดับ แต่จะแสดงด้วยสัญลักษณ์ เช่น จุดกลม (bullet) หรือสัญลักษณ์อื่น ๆ

การใช้งานพื้นฐาน

HTML
<ul>
  <li>รายการที่ 1</li>
  <li>รายการที่ 2</li>
  <li>รายการที่ 3</li>
</ul>

ในตัวอย่างข้างต้น รายการที่แสดงจะมีเครื่องหมายจุดกลม (bullet) นำหน้ารายการทุกข้อ

  • รายการที่ 1
  • รายการที่ 2
  • รายการที่ 3

รูปแบบการปรับเปลี่ยนสัญลักษณ์ (List Style Type)

เราสามารถปรับเปลี่ยนรูปแบบของสัญลักษณ์ที่ใช้ในรายการแบบไม่เรียงลำดับได้ด้วยการใช้ CSS ผ่านคุณสมบัติ list-style-type โดยตัวเลือกที่พบบ่อย ได้แก่

  1. disc (ค่าเริ่มต้น): แสดงจุดกลม
  2. circle: แสดงจุดวงกลมกลวง
  3. square: แสดงสี่เหลี่ยม

ตัวอย่างการใช้งาน

HTML
<ul style="list-style-type: disc;">
  <li>จุดกลม</li>
</ul>

<ul style="list-style-type: circle;">
  <li>จุดวงกลมกลวง</li>
</ul>

<ul style="list-style-type: square;">
  <li>จุดสี่เหลี่ยม</li>
</ul>

ผลลัพธ์

  • จุดกลม
  • จุดวงกลมกลวง
  • จุดสี่เหลี่ยม

การซ้อนรายการ (Nested Lists)

ในกรณีที่ต้องการสร้างรายการย่อยภายในรายการหลัก สามารถซ้อนรายการโดยใช้ <ul> ภายใน <li> ได้

ตัวอย่างการซ้อนรายการ

HTML
<ul>
  <li>หมวดหมู่หลัก 1
    <ul>
      <li>หมวดหมู่ย่อย 1.1</li>
      <li>หมวดหมู่ย่อย 1.2</li>
    </ul>
  </li>
  <li>หมวดหมู่หลัก 2</li>
</ul>
  • หมวดหมู่หลัก 1
    • หมวดหมู่ย่อย 1.1
    • หมวดหมู่ย่อย 1.2
  • หมวดหมู่หลัก 2

การจัดการสัญลักษณ์ด้วย CSS

นอกจากการใช้ list-style-type เรายังสามารถปรับแต่งเพิ่มเติม เช่น ระยะห่างระหว่างรายการ (padding) หรือการลบสัญลักษณ์ออกจากรายการ

การลบสัญลักษณ์

HTML
<ul style="list-style-type: none;">
  <li>ไม่มีสัญลักษณ์</li>
  <li>ไม่มีสัญลักษณ์</li>
</ul>
  • ไม่มีสัญลักษณ์
  • ไม่มีสัญลักษณ์

การกำหนดสัญลักษณ์เฉพาะแต่ละรายการ

สามารถใช้ CSS pseudo-elements อย่าง ::before ในการกำหนดสัญลักษณ์ที่แตกต่างกันในแต่ละรายการ

HTML
<ul>
  <li style="list-style-type: none;">🍎 Apple</li>
  <li style="list-style-type: none;">🍌 Banana</li>
  <li style="list-style-type: none;">🍇 Grape</li>
</ul>
  • 🍎 Apple
  • 🍌 Banana
  • 🍇 Grape

การใช้งานร่วมกับรูปภาพ

สามารถใช้รูปภาพเป็นสัญลักษณ์แทนจุดกลมได้โดยใช้ list-style-image

HTML
<ul style="list-style-image: url('bullet.png');">
  <li>รายการที่ 1</li>
  <li>รายการที่ 2</li>
</ul>

สรุป

การใช้งาน Unordered List ใน HTML5 นั้นมีความยืดหยุ่นและสามารถปรับแต่งได้หลากหลาย ไม่ว่าจะเป็นการปรับเปลี่ยนสัญลักษณ์ การซ้อนรายการ หรือการใช้รูปภาพ ซึ่งช่วยในการจัดแสดงข้อมูลให้เป็นระเบียบและเข้าใจง่าย

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ