แท็ก HTML <ul> กำหนดรายการที่ไม่มีลำดับ (สัญลักษณ์แสดงหัวข้อย่อย)
รายการแบบไม่เรียงลำดับ (Unordered Lists)
รายการที่ไม่เรียงลำดับเริ่มต้นด้วย<ul>แท็ก แต่ละรายการเริ่มต้นด้วย <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เพื่อแสดงรายการในแนวนอน