HTML Lists

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

HTML Lists ช่วยให้นักพัฒนาเว็บจัดกลุ่มชุดของรายการที่เกี่ยวข้องกันในรายการ

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

<h2>An Unordered HTML List</h2>

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

<h2>An Ordered HTML List</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 

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

Unordered HTML List

Unordered HTML List เริ่มต้นด้วย <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>
ลองดูสิ ❱

Ordered HTML List

Ordered HTML List เริ่มต้นด้วย <ol> แท็ก แต่ละรายการเริ่มต้นด้วย <li> แท็ก

รายการจะถูกทำเครื่องหมายด้วยตัวเลขตามค่าเริ่มต้น:

ตัวอย่าง 

<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

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

HTML Description Lists

HTML Description Lists คือ รายการคำศัพท์พร้อมคำอธิบายของแต่ละคำศัพท์

แท็ก <dl> กำหนดรายการคำอธิบาย <dt> แท็กกำหนดคำ (ชื่อ) และ <dd> แท็กอธิบายแต่ละคำ:

ตัวอย่าง 

<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

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

แท็กรายการ HTML

Tagคำอธิบาย
<ul>ใช้กำหนด Unordered List
<ol>ใช้กำหนด Ordered List
<li>ใช้กำหนด List Item
<dl>ใช้กำหนด Description List
<dt>ใช้กำหนด Description List
<dd>ใช้กำหนดคำอธิบายใน Description List
❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯