ให้เรตสมาชิก: 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> กำหนดคำอธิบายของแต่ละข้อมูล

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ดู java อ่านเขียนไฟล์ ช่วยผมหน่อยครับ
โดย วัชระ สินธุมาลา ส 02 พ.ย. 2019 3:30 pm บอร์ด Programming - C/C++ & java & Python
0
38
ส 02 พ.ย. 2019 3:30 pm โดย วัชระ สินธุมาลา
ดู java อ่านเขียนไฟล์ ช่วยผมหน่อยครับ ผมต้องการค่าของ ตัวแปรอะเร ใน เมทธอด ของคลาสอื่น มาใช้งาน มันไม่ยอมมา
โดย วัชระ สินธุมาลา ส 02 พ.ย. 2019 3:27 pm บอร์ด Programming - C/C++ & java & Python
0
29
ส 02 พ.ย. 2019 3:27 pm โดย วัชระ สินธุมาลา
ทำไม insert ลงฐานข้อมูลไม่ได้
โดย bankjittapol ส 02 พ.ย. 2019 3:25 pm บอร์ด Programming - PHP
3
80
ส 02 พ.ย. 2019 4:29 pm โดย mindphp
มีคำสั่ง JavaScript อันที่จะช่วยเราเช็กว่ามี .(จุด) มากกว่า 1 จุด อยู่ในค่าได้บ้างครับ
โดย jamepiyawat ส 02 พ.ย. 2019 3:23 pm บอร์ด JavaScript & Jquery Ajax
0
37
ส 02 พ.ย. 2019 3:23 pm โดย jamepiyawat
ทำไม select จาก id แต่ข้อมูลออกมาหลายชุด
โดย bankjittapol ส 02 พ.ย. 2019 12:48 pm บอร์ด Programming - PHP
3
45
ส 02 พ.ย. 2019 1:55 pm โดย mindphp
จะทำอย่างไรให้ split สามารถแบ่งอาเรย์ได้ตาม string ที่ขึ้นบรรทัดใหม่ครับ
โดย jamepiyawat ส 02 พ.ย. 2019 11:59 am บอร์ด JavaScript & Jquery Ajax
2
56
ส 02 พ.ย. 2019 2:51 pm โดย jamepiyawat
ต้องการสร้างขอบเขต การลากของ block interact.js
โดย bankjittapol ส 02 พ.ย. 2019 11:08 am บอร์ด JavaScript & Jquery Ajax
1
20
ส 02 พ.ย. 2019 11:15 am โดย mindphp
การสร้างใบชำระเงินของผู้จำหน่ายบนระบบ ERP
โดย nnamfon.26 ศ 01 พ.ย. 2019 7:30 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
48
ศ 01 พ.ย. 2019 7:30 pm โดย nnamfon.26
วิธีเปลี่ยน E-Mail Sender ตอนสร้าง แพคเกจใน Directadmin
โดย mindphp ศ 01 พ.ย. 2019 6:15 pm บอร์ด Linux - Web Server
0
40
ศ 01 พ.ย. 2019 6:15 pm โดย mindphp
จะทำอย่างไรให้สามารถใส่ . ได้บรรทัดละตัวครับ
โดย jamepiyawat ศ 01 พ.ย. 2019 5:35 pm บอร์ด JavaScript & Jquery Ajax
1
110
ศ 01 พ.ย. 2019 5:49 pm โดย mindphp
เคล็ดลับแก้ไขง่ายๆ กับปัญหาชาร์จแบตเตอรี่โน๊ตบุ๊คไม่เข้า เกิดจากอะไร และ ปัญหาคืออะไร มาดู
โดย popeyebkk ศ 01 พ.ย. 2019 5:28 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
33
ศ 01 พ.ย. 2019 5:28 pm โดย popeyebkk
รูปภาพบางรูปเมือเอาไปแปลงเป็น pdf แล้วไม่ขึ้นครับ
โดย jamepiyawat ศ 01 พ.ย. 2019 5:07 pm บอร์ด Programming - PHP
0
31
ศ 01 พ.ย. 2019 5:07 pm โดย jamepiyawat
อยากทราบ เรื่องการ insert array ลงฐานข้อมูล
โดย bankjittapol ศ 01 พ.ย. 2019 2:32 pm บอร์ด Programming - PHP
3
56
ศ 01 พ.ย. 2019 2:58 pm โดย thatsawan
การคำนวณค่าเสื่อมราคาและค่าตัดจำหน่าย
โดย nnamfon.26 ศ 01 พ.ย. 2019 12:04 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
35
ศ 01 พ.ย. 2019 12:04 pm โดย nnamfon.26
อยากให้คำว่า คำบรรยายขึ้นมาข้างบนกรอบ
โดย mstsksmstsks ศ 01 พ.ย. 2019 11:57 am บอร์ด HTML CSS
6
71
ศ 01 พ.ย. 2019 5:34 pm โดย mstsksmstsks
วิธีอัพเดด Directadmin แบบแมนนวล
โดย mindphp ศ 01 พ.ย. 2019 4:04 am บอร์ด Linux - Web Server
1
36
ศ 01 พ.ย. 2019 4:05 am โดย mindphp
อัพเกรด MySQL และ mariadb บน Directadmin
โดย mindphp ศ 01 พ.ย. 2019 3:49 am บอร์ด Linux - Web Server
0
495
ศ 01 พ.ย. 2019 3:49 am โดย mindphp
การบันทึกใบ Invoice จากการแจ้งหนี้ของผู้จำหน่าย
โดย nnamfon.26 พฤ 31 ต.ค. 2019 5:12 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
52
พฤ 31 ต.ค. 2019 5:12 pm โดย nnamfon.26
ปัญหาแบตเตอรี่โน๊ตบุ๊คชาร์จไม่เข้า ทำยังไงดี วันนี้เรามาดูกันเลย มีสาระดีๆ รอคุณอยู่
โดย popeyebkk พฤ 31 ต.ค. 2019 4:52 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
44
พฤ 31 ต.ค. 2019 4:52 pm โดย popeyebkk
อยากให้ * แทน ตัวเลข 3 ตัวท้าย
โดย bankjittapol พฤ 31 ต.ค. 2019 3:06 pm บอร์ด Programming - PHP
1
42
พฤ 31 ต.ค. 2019 5:20 pm โดย thatsawan