ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 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> กำหนดคำอธิบายของแต่ละข้อมูล

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
VDO - Sport Lineup Program
โดย numtan5839 พ 27 พ.ย. 2019 5:39 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
0
4
พ 27 พ.ย. 2019 5:39 pm โดย numtan5839
Excel เพิ่มฟีเจอร์ Sheet View ใช้งานร่วมกันหลายๆคนได้แบบไม่มีปัญหา
โดย chatee supasand พ 27 พ.ย. 2019 4:37 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
22
พ 27 พ.ย. 2019 4:37 pm โดย chatee supasand
วิธีการใช้งาน JQuery กับ Ajax เพื่อค้นหาข้อมูลจากฐานข้อมูลว่ามมีจริงหรือไม
โดย Ittichai_chupol พ 27 พ.ย. 2019 2:28 pm บอร์ด Jquery & Ajax Knowledge
0
37
พ 27 พ.ย. 2019 2:28 pm โดย Ittichai_chupol
GENNECT Cross คืออะไร?
โดย LEG พ 27 พ.ย. 2019 1:28 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
27
พ 27 พ.ย. 2019 1:28 pm โดย LEG
จะกำหนด icon เฉพาะ ข้อความใน tag new ได้ยังไงครับ
โดย bankjittapol พ 27 พ.ย. 2019 12:20 pm บอร์ด Joomla Development
2
41
ส 30 พ.ย. 2019 1:36 pm โดย bankjittapol
B - ปัญหา login ผ่าน xmlrpc แล้ว Error Connect error: Connection timed out (110)
โดย tsukasaz พ 27 พ.ย. 2019 10:10 am บอร์ด MlineCRM Line + MD-CRM
5
9
พ 27 พ.ย. 2019 5:12 pm โดย mindphp
งานประจำวันที่ 27 พฤศจิกายน 2562
โดย numtan5839 พ 27 พ.ย. 2019 10:11 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
4
33
พ 27 พ.ย. 2019 7:04 pm โดย jamepiyawat
พรีฯของจากจีนมาขาย สั่งเองไม่ยาก ไม่เก่งภาษาจีนก็ทำได้!
โดย promotion ศ 08 พ.ย. 2019 3:06 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
121
พ 27 พ.ย. 2019 9:22 am โดย LEG
ทำความรู้จักกับ Forex ตลาดแลกเปลี่ยนเงินตราต่างประเทศ
โดย numtan5839 ศ 08 พ.ย. 2019 4:03 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
151
พ 27 พ.ย. 2019 5:26 am โดย npfurion
ขอวิธีสร้าง Dropdown list จังหวัด อำเภอ ตำบล เพียงใส
โดย spawat ส 02 พ.ย. 2019 4:49 pm บอร์ด Programming - PHP
4
221
พฤ 28 พ.ย. 2019 10:49 am โดย ololl04
VDO - โปรแกรมจัดรูปแบบแผนการเล่นฟุตบอล
โดย numtan5839 อ 26 พ.ย. 2019 6:04 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
2
16
อ 26 พ.ย. 2019 6:19 pm โดย numtan5839
โปรแกรมแปลงพื้นที่
โดย prmindphp อ 26 พ.ย. 2019 5:20 pm บอร์ด MindPHP News & Feedback
0
39
อ 26 พ.ย. 2019 5:20 pm โดย prmindphp
เชื่อม template engine twig แล้ว error ครับ
โดย jamepiyawat อ 26 พ.ย. 2019 1:45 pm บอร์ด Programming - PHP
2
43
อ 26 พ.ย. 2019 2:42 pm โดย jamepiyawat
ภาษาซี (C/C++) กับ โจทย์ทางคณิตศาสตร์ (2) แปลงฟุต&นิ้ว เป็น เซนติเมตร
โดย Aussadawut จ 19 พ.ย. 2018 2:57 pm บอร์ด Share Knowledge
1
2639
อ 26 พ.ย. 2019 12:24 pm โดย mindphp
งานประจำวันที่ 26 พฤศจิกายน 2562
โดย numtan5839 อ 26 พ.ย. 2019 10:22 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
2
12
อ 26 พ.ย. 2019 7:39 pm โดย numtan5839
ระวังไว้! 'โรคเอ็มเอส' โรคใหม่วัยทำงาน
โดย promotion พฤ 31 ต.ค. 2019 3:00 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
188
อ 26 พ.ย. 2019 4:04 am โดย weeha
การปรับแก้ไขข้อมูลเมื่อทำการ Quote เพื่อปรับแก้ไขชื่อของ User ที่ทำการ Quote ใน phpbb
โดย Ittichai_chupol จ 25 พ.ย. 2019 6:39 pm บอร์ด PHP Knowledge
0
36
จ 25 พ.ย. 2019 6:39 pm โดย Ittichai_chupol
dapper line ช่วยตรวจสอบให้ด้วยว่าเกิดอะไรขึ้น
โดย thatsawan จ 25 พ.ย. 2019 6:29 pm บอร์ด MD-CRM - Tester
3
10
ศ 06 ธ.ค. 2019 4:04 pm โดย thatsawan
ความสามมารถ ของ สิริ ผู้ช่วยดิจิตอลอัจฉริยะของ Apple
โดย Ittichai_chupol จ 25 พ.ย. 2019 6:00 pm บอร์ด Mobile Application Developing- Android, iOS
0
39
จ 25 พ.ย. 2019 6:00 pm โดย Ittichai_chupol
บอลไทย
โดย jataz2 จ 25 พ.ย. 2019 5:18 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
4
54
พ 27 พ.ย. 2019 10:45 am โดย aloha11x