HTML Unordered Lists

แท็ก <ul> ใน HTML ใช้สร้างรายการแบบ **ไม่มีลำดับ** (หรือรายการแบบมีสัญลักษณ์นำหน้า เช่น จุดกลม ๆ)

รายการแบบไม่มีลำดับ (Unordered HTML List)

รายการแบบไม่มีลำดับจะเริ่มต้นด้วยแท็ก <ul> และแต่ละรายการจะอยู่ในแท็ก <li> โดยค่าเริ่มต้น รายการแต่ละข้อจะมี “จุดกลมสีดำ” อยู่ด้านหน้า (เรียกว่า bullet)

				
					<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

การเลือกใช้ตัวทำเครื่องหมายรายการ

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

ค่า (Value)	คำอธิบาย (Description)
`disc`	แสดงจุดกลมทึบ (ค่าเริ่มต้น)
`circle`	แสดงวงกลมโปร่ง
`square`	แสดงสี่เหลี่ยมทึบ
`none`	ไม่แสดงสัญลักษณ์นำหน้าเลย

Disc

				
					<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

ค่าเริ่มต้นของ <ul> มักเป็น list-style-type: disc; แต่อาจแตกต่างกันเล็กน้อยในแต่ละเบราว์เซอร์

Circle

				
					<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Square

				
					<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

ไม่มีสัญลักษณ์นำหน้า

				
					<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

รายการซ้อนกัน

เราสามารถซ้อนรายการ (ทำให้มีรายการย่อยในข้อหนึ่งได้)

				
					<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

การจัดรายการแนวนอนด้วย CSS

เราสามารถใช้ CSS เพื่อเปลี่ยนการแสดงผลของรายการให้ดูเป็น “แถบเมนูแนวนอน” ได้
ซึ่งเป็นเทคนิคยอดนิยมในการทำ Navigation Bar

				
					<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none; /* เอาสัญลักษณ์นำหน้าออก */
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left; /* วางรายการในแนวนอน */
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

สรุป

ใช้แท็ก <ul> เพื่อสร้างรายการแบบไม่มีลำดับ
ใช้ CSS list-style-type เพื่อเปลี่ยนรูปแบบสัญลักษณ์นำหน้า
ใช้แท็ก <li> เพื่อสร้างแต่ละรายการในลิสต์
สามารถซ้อนรายการได้ (Nested List)
<li> สามารถใส่องค์ประกอบ HTML อื่นได้ เช่น รูปภาพ หรือลิงก์
ใช้ CSS float: left; เพื่อแสดงรายการในแนวนอน