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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Index - Update Thailand Hotel
โดย Patipat ศ 09 ส.ค. 2019 3:35 pm บอร์ด M088 - ปฏิภัทร สารธรรม
1
14
อ 13 ส.ค. 2019 4:17 pm โดย thatsawan
Nissan ได้พัฒนาหุ่นยนต์ กำจัดวัชพืช ออกจากนาข้าวในประเทศ ญี่ปุ่น
โดย chatee supasand ศ 09 ส.ค. 2019 2:19 pm บอร์ด MindPHP News
0
65
ศ 09 ส.ค. 2019 2:19 pm โดย chatee supasand
บริษัท NEC ญี่ปุ่น โชว์รถยนต์บินได้ ทดสอบบิน สูงกว่า 3 เมตร!!!
โดย chatee supasand ศ 09 ส.ค. 2019 2:15 pm บอร์ด MindPHP News
0
38
ศ 09 ส.ค. 2019 2:15 pm โดย chatee supasand
บริษัท NEC ญี่ปุ่น โชว์รถยนต์บินได้ ทดสอบบิน สูงกว่า 3 เมตร!!!
โดย chatee supasand ศ 09 ส.ค. 2019 12:27 pm บอร์ด MT33 - นายชาตรี สุภาแสน
2
9
ศ 09 ส.ค. 2019 2:13 pm โดย chatee supasand
อยากทราบวิธีการปัญหาUndefined offset: 101 Undefined offset: 102 ใน phpbb
โดย Ittichai_chupol ศ 09 ส.ค. 2019 11:59 am บอร์ด Programming - PHP
2
79
ศ 09 ส.ค. 2019 1:56 pm โดย Ittichai_chupol
สืบสานงานศิลป์ถิ่นภูมิปัญญา เครื่องเงินล้ำค่าตระการตาผ้าทอน่าน
โดย ยู. จีน ศ 09 ส.ค. 2019 11:55 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
54
ส 17 ส.ค. 2019 11:11 am โดย Tanadet
Samsung ร่วมจับมือกับ Microsoft ขยายความร่วมมือ ก่อนเปิดตัว Galaxy Note 10
โดย chatee supasand ศ 09 ส.ค. 2019 11:16 am บอร์ด Microsoft Office Knowledge & line & Etc
0
36
ศ 09 ส.ค. 2019 11:16 am โดย chatee supasand
อัพเดต odoojob
โดย jamepiyawat ศ 09 ส.ค. 2019 10:22 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
6
37
จ 19 ส.ค. 2019 7:27 pm โดย jamepiyawat
งานประจำวันที่ 9 สิงหาคม 2562
โดย chatee supasand ศ 09 ส.ค. 2019 9:39 am บอร์ด MT33 - นายชาตรี สุภาแสน
1
11
ศ 09 ส.ค. 2019 7:06 pm โดย chatee supasand
สามารถคัดแบบ บอจ.3 และ บอจ.4 ทางอินเตอร์เน็ตได้ไหมค่ะ
โดย EyePornnipa ศ 09 ส.ค. 2019 9:28 am บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
4
126
ส 17 ส.ค. 2019 11:00 am โดย Amp_Audit
งานประจำวันที่ 09 สิงหาคม 2562
โดย EyePornnipa ศ 09 ส.ค. 2019 9:19 am บอร์ด M089 - นางสาวพรนิภา ราชธานี
2
32
ศ 09 ส.ค. 2019 7:17 pm โดย EyePornnipa
งานประจำวันที่ 9 สิงหาคม 2562
โดย jirawoot ศ 09 ส.ค. 2019 9:17 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
1
10
ศ 09 ส.ค. 2019 7:25 pm โดย jirawoot
งานประจำวันที่ 9 กรกฏาคม 2562
โดย jamepiyawat ศ 09 ส.ค. 2019 9:16 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
3
20
ศ 09 ส.ค. 2019 7:41 pm โดย jamepiyawat
งานประจำวันที่ 9 สิงหาคม 2562
โดย Patipat ศ 09 ส.ค. 2019 9:13 am บอร์ด M088 - ปฏิภัทร สารธรรม
1
15
ศ 09 ส.ค. 2019 7:25 pm โดย Patipat
งานประจำวันที่ 9 สิงหาคม 2562
โดย Auttasti ศ 09 ส.ค. 2019 9:09 am บอร์ด MT34 - นายอัฐสิทธิ์ รอดถนอม
1
9
ศ 09 ส.ค. 2019 6:19 pm โดย Auttasti
เมื่อพูดถึงโปรแกรมเมอร์ มีประสบการณ์และไม่มีประสบการณ์
โดย chatee supasand พฤ 08 ส.ค. 2019 7:27 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
86
พฤ 08 ส.ค. 2019 7:27 pm โดย chatee supasand
แอป Google Fit เพิ่ม Dark Theme และเก็บข้อมูลการนอน
โดย jamepiyawat พฤ 08 ส.ค. 2019 7:08 pm บอร์ด Share Knowledge
0
40
พฤ 08 ส.ค. 2019 7:08 pm โดย jamepiyawat
TEST บทความ siamsporttalk เรื่อง กีฬา กาบัดดี้ คืออะไร
โดย jirawoot พฤ 08 ส.ค. 2019 6:58 pm บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
0
6
พฤ 08 ส.ค. 2019 6:58 pm โดย jirawoot
รหัสไปรษณีย์ใน กรุงเทพมหานคร
โดย jamepiyawat พฤ 08 ส.ค. 2019 6:40 pm บอร์ด M084 - นายปิยวัช เชาว์วิมล
0
4
พฤ 08 ส.ค. 2019 6:40 pm โดย jamepiyawat
สามารถเปลี่ยนคำสั่ง css ได้ด้วย @media
โดย jamepiyawat พฤ 08 ส.ค. 2019 6:24 pm บอร์ด CSS Knowledge
0
33
พฤ 08 ส.ค. 2019 6:24 pm โดย jamepiyawat