บทที่ 13 HTML Lists
HTML Lists คือ การสร้างรายการใน html รายการใน html มี 3 แบบด้วยกัน คือ
1.รายการแบบไม่มีลำดับ (unordered list) ใช้แท็ก <ul>
รายการแบบไม่มีลำดับ จะใช้แท็ก <ul> (ย่อมาจาก unordered list) และแต่ละรายการภายในจะอยู่ในแท็ก <li> (ย่อมาจาก list item)
โดยแต่ละรายการจะแสดงเครื่องหมายด้วยจุดวงกลมสีดำ (โดยค่าเริ่มต้น)
ตัวอย่าง
<html>
<body>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>ผลลัพธ์คือ
2.รายการแบบมีลำดับ (ordered list) ใช้แท็ก <ol>
รายการแบบมีลำดับ จะใช้แท็ก <ol> (ย่อมาจาก ordered list) และแต่ละรายการภายในจะอยู่ในแท็ก <li> (ย่อมาจาก list item) เหมือนกับแท็ก <ul>
โดยแต่ละรายการจะแสดงเป็นตัวเลขเรียกลำดับกันไป (โดยค่าเริ่มต้น)
ตัวอย่าง
<html>
<body>
<ol>
<li>ผัดไทย</li>
<li>บะหมี่</li>
<li>สปาเกตตี้</li>
</ol>
<ol start="50">
<li>ผัดไทย</li>
<li>บะหมี่</li>
<li>สปาเกตตี้</li>
</ol>
</body>
</html>ผลลัพธ์คือ
3.รายการแบบคำนิยาม (definition list) ใช้แท็ก <dl>
รายการแบบคำนิยาม คือ รายการของแต่ละข้อมูล และมีคำอธิบายของแต่ละรายการ
รายการแบบคำนิยามจะใช้แท็ก <dl> (ย่อมาจาก definition list ) และแต่ละรายการภายในจะอยู่ในแท็ก <dt> และ คำอธิบายของแต่ละแท็ก <dt> จะอยู่ในแท็ก <dd>
ตัวอย่าง
<html>
<body>
<dl>
<dt>ผัดไทย</dt>
<dd>วุ้นเส้น ทะเล</dd>
<dt>บะหมี่</dt>
<dd>แห้ง หมูแดง</dd>
</dl>
</body>
</html>ผลลัพธ์คือ
Tag ที่เกี่ยวข้อง
| <ol> | กำหนดรายการที่มีลำดับ |
| <ul> | กำหนดรายการที่ไม่มีลำดับ |
| <li> | กำหนดข้อมูลของแต่ละรายการ |
| <dl> | กำหนดรายการคำนิยาม |
| <dt> | กำหนดข้อมูลของแต่ละรายการ |
| <dd> | กำหนดคำอธิบายของแต่ละข้อมูล |
