HTML Unordered Lists

❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯

Tag HTML <ul> กำหนดรายการที่ไม่มีลำดับ (สัญลักษณ์แสดงหัวข้อย่อย)

รายการแบบไม่เรียงลำดับ (Unordered Lists)

รายการที่ไม่เรียงลำดับเริ่มต้นด้วย Tag <ul> แต่ละรายการเริ่มต้นด้วย Tag <li>

รายการจะถูกทำเครื่องหมายด้วยสัญลักษณ์แสดงหัวข้อย่อย (วงกลมสีดำเล็กๆ) ตามค่าเริ่มต้น:

ตัวอย่าง 

<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

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

</body>
</html>
ลองดูสิ ❱

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

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

ค่าคำอธิบาย
discสัญลักษณ์เป็นวงกลมสีดำ (ค่าเริ่มต้น)
circleสัญลักษณ์เป็นวงกลม
squareสัญลักษณ์เป็นสี่เหลี่ยม
noneไม่มีสัญลักษณ์

ตัวอย่างค่า disc 

<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Disc Bullets</h2>

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

</body>
</html>
ลองดูสิ ❱

ตัวอย่างค่า circle 

<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Circle Bullets</h2>

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

</body>
</html>
ลองดูสิ ❱

ตัวอย่างค่า square 

<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Square Bullets</h2>

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

</body>
</html>
ลองดูสิ ❱

ตัวอย่างค่า none 

<!DOCTYPE html>
<html>
<body>

<h2>Unordered List without Bullets</h2>

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

</body>
</html>
ลองดูสิ ❱

รายการ HTML ที่ซ้อนกัน

รายการสามารถซ้อนกันได้ (รายการภายในรายการ):

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>

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

</body>
</html>
ลองดูสิ ❱

หมายเหตุ: รายการ ( <li> ) สามารถมีรายการใหม่และองค์ประกอบ HTML อื่นๆ เช่น รูปภาพและลิงก์ เป็นต้น

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

รายการ HTML สามารถจัดรูปแบบได้หลายวิธีด้วย CSS

วิธีหนึ่งที่ได้รับความนิยมคือการจัดรูปแบบรายการในแนวนอน เพื่อสร้างเมนูการนำทาง:

<!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>

<h2>Navigation Menu</h2>
<p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>

<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>
ลองดูสิ ❱

สรุป

  • ใช้องค์ประกอบ HTML <ul> เพื่อกำหนดรายการที่ไม่มีลำดับ
  • ใช้คุณสมบัติ CSS list-style-type เพื่อกำหนดเครื่องหมายรายการ
  • ใช้องค์ประกอบ HTML <li> เพื่อกำหนดรายการ
  • สามารถซ้อนรายการได้
  • รายการสามารถมีองค์ประกอบ HTML อื่น ๆ
  • ใช้คุณสมบัติ CSS float: left เพื่อแสดงรายการในแนวนอน
❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯