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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
จะทำอย่างไรให้เราดึงชื่อรูปออกมาได้จากพาดยาว ๆ ครับ
โดย jamepiyawat จ 25 พ.ย. 2019 4:44 pm บอร์ด Programming - PHP
1
30
จ 25 พ.ย. 2019 4:45 pm โดย tsukasaz
โปรแกรมคำนวณอัตราแลกเปลี่ยนสกุลเงิน
โดย prmindphp จ 25 พ.ย. 2019 4:26 pm บอร์ด MindPHP News & Feedback
0
26
จ 25 พ.ย. 2019 4:26 pm โดย prmindphp
โปรแกรมตรวจสอบหมายเลขพัสดุ
โดย prmindphp จ 25 พ.ย. 2019 4:12 pm บอร์ด MindPHP News & Feedback
0
37
จ 25 พ.ย. 2019 4:12 pm โดย prmindphp
นิยามของสินทรัพย์ หนี้สิน และส่วนของเจ้าของ
โดย Chidchanok อ 15 ม.ค. 2019 6:13 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
1
1494
จ 25 พ.ย. 2019 3:39 pm โดย mindphp
VDO - Program Convert Area
โดย numtan5839 จ 25 พ.ย. 2019 3:16 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
3
25
พ 27 พ.ย. 2019 2:29 am โดย mindphp
งานประจำวันที่ 25 พฤศจิกายน 2562
โดย numtan5839 จ 25 พ.ย. 2019 10:13 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
1
17
จ 25 พ.ย. 2019 7:22 pm โดย numtan5839
วิธีการลงทุนที่ดีที่สุดสำหรับ "มนุษย์เงินเดือน"
โดย somying อ 12 พ.ย. 2019 12:13 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
263
จ 25 พ.ย. 2019 5:58 am โดย tidehunter
ไปรษณีย์ไทยเอาใจ e-commerce ด้วยบริการ ePacket
โดย numtan5839 ส 09 พ.ย. 2019 11:21 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
190
จ 09 ธ.ค. 2019 3:21 pm โดย LEG
อัพเดดความคืบหน้า / Progress - AZKing
โดย mindphp อ 29 มิ.ย. 2014 5:47 pm บอร์ด AZKing (Main)
598
3298
อ 03 ธ.ค. 2019 6:34 pm โดย thatsawan
insert แล้วไม่ขึ้น error ไม่มีข้อความไดเกิดขึ้น ไม่บันทึกข้อมูลลงฐานข้อมูลด้วยคับ
โดย สายลม พ 06 พฤษภาคม 2015 8:20 am บอร์ด Programming - PHP
6
3389
ส 23 พ.ย. 2019 9:50 pm โดย Weerawut Wongdang
Animation ประกอบ Tools
โดย numtan5839 ส 23 พ.ย. 2019 7:21 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
8
56
ศ 13 ธ.ค. 2019 6:37 pm โดย numtan5839
ข้อแตกต่าง ระหว่าง ฟังก์ชัน onContentBeforeDisplay กับ onContentAfterDisplay
โดย bankjittapol ส 23 พ.ย. 2019 6:56 pm บอร์ด Joomla Developing Knowledge
0
41
ส 23 พ.ย. 2019 6:56 pm โดย bankjittapol
หน่วยของค่าที่ใช้ต่างๆ ใน CSS
โดย bankjittapol ส 23 พ.ย. 2019 6:20 pm บอร์ด CSS Knowledge
0
47
ส 23 พ.ย. 2019 6:20 pm โดย bankjittapol
งานประจำวันที่ 23 พฤศจิกายน 2562
โดย numtan5839 ส 23 พ.ย. 2019 10:17 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
6
29
ส 23 พ.ย. 2019 7:22 pm โดย numtan5839
จะแปลง {new} {/new} {update} {/update} {bug} {/bug} ให้เป็นตามรูปยังไงครับ(ตามรูปที่แนบไว้)
โดย bankjittapol ส 23 พ.ย. 2019 5:08 pm บอร์ด Joomla Development
0
60
ส 23 พ.ย. 2019 5:08 pm โดย bankjittapol
จะเอาเลขเวอร์ชั่น และวันที่ ที่อยู่ข้างใน {version} ออกมายังไงครับ
โดย bankjittapol ส 23 พ.ย. 2019 3:39 pm บอร์ด Joomla Development
2
62
ส 23 พ.ย. 2019 3:56 pm โดย bankjittapol
มาแล้ว !! Plugin MDEmbed สร้าง Link อัพวีดีโอบทความ เว็บไซต์ Joomla 2.5, 3.x
โดย Patipat ศ 30 ส.ค. 2019 5:46 pm บอร์ด MindPHP News & Feedback
1
306
ส 23 พ.ย. 2019 11:11 am โดย mindphp
รวม แนะนำโปรแกรม POS (ระบบขายหน้าร้าน)
โดย nipon09 พฤ 06 พ.ย. 2014 7:09 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
5
7619
ส 23 พ.ย. 2019 1:30 am โดย nightstalker
การใช้ text-align เพื่อจัดข้อความ
โดย bankjittapol ศ 22 พ.ย. 2019 6:28 pm บอร์ด CSS Knowledge
0
59
ศ 22 พ.ย. 2019 6:28 pm โดย bankjittapol
อยากทราบคำสั่ง joomla ที่จะทำให้ย่อยรูปได้ครับ
โดย jamepiyawat ศ 22 พ.ย. 2019 5:53 pm บอร์ด Joomla Development
1
76
ศ 22 พ.ย. 2019 8:35 pm โดย mindphp