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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
หลักในการทำ Infographic
โดย numtan5839 อ 05 พ.ย. 2019 11:25 am บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
1
23
พ 06 พ.ย. 2019 2:24 pm โดย numtan5839
อยากทราบว่าถ้ามีการแจ้งบิลการจ่ายชำระเงินในอีเมล แต่ไม่ได้แจ้งชื่อบริษัท จะหาข้อมูลหรือสืบค้นได้จากที่ไหน
โดย nnamfon.26 อ 05 พ.ย. 2019 11:21 am บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
19
อ 05 พ.ย. 2019 11:21 am โดย nnamfon.26
อ้างอิง Link ใต้รูปภาพ
โดย numtan5839 อ 05 พ.ย. 2019 11:02 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
56
อ 05 พ.ย. 2019 1:42 pm โดย numtan5839
อยากทราบวิธีการที่ที่จะส่งค่าเมนู tools ไปเเสดงบน part way ของ phpbb
โดย Ittichai_chupol อ 05 พ.ย. 2019 10:35 am บอร์ด Programming - PHP
1
25
อ 05 พ.ย. 2019 10:38 am โดย thatsawan
งานประจำวันที่ 5 พฤศจิกายน 2562
โดย numtan5839 อ 05 พ.ย. 2019 10:13 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
1
12
อ 05 พ.ย. 2019 6:04 pm โดย numtan5839
สอบถามการตั้งค่าใบปริ้นปะหน้าซองในระบบERP ให้มีเลขที่สาขาย่อย ต้องทำยังไงคะ
โดย nnamfon.26 อ 05 พ.ย. 2019 10:03 am บอร์ด OpenERP - MD-ERP (Main)
3
11
พฤ 07 พ.ย. 2019 6:35 pm โดย mindphp
เครื่องวัดอุณหภูมิร่างกายสำหรับวัดไข้
โดย LEG อ 05 พ.ย. 2019 9:58 am บอร์ด Share Knowledge
0
16
อ 05 พ.ย. 2019 9:58 am โดย LEG
insert ข้อมูล แบบ array ลงฐานข้อมูล
โดย bankjittapol จ 04 พ.ย. 2019 11:27 pm บอร์ด PHP Knowledge
0
45
จ 04 พ.ย. 2019 11:27 pm โดย bankjittapol
การสร้าง foreign key ใน MySQL ด้วย phpmyadmin สำหรับ ตารางที่เป็น innodb
โดย bankjittapol จ 04 พ.ย. 2019 10:57 pm บอร์ด SQL Knowledge
1
504
อ 05 พ.ย. 2019 3:19 am โดย mindphp
4 กลยุทธ์ที่จะช่วยให้ธุรกิจประสบผลสำเร็จ (4PS)
โดย numtan5839 จ 04 พ.ย. 2019 5:54 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
58
พ 06 พ.ย. 2019 2:33 pm โดย numtan5839
ทำให้ช่องทั้งสองขึ้นเป็นปีให้เลือกได้ทั้
โดย mstsksmstsks จ 04 พ.ย. 2019 5:16 pm บอร์ด HTML CSS
1
58
จ 04 พ.ย. 2019 5:17 pm โดย mstsksmstsks
6 จุดเช็กอินในเชียงใหม่ หน้าหนาวนี้ ต้องไปเยือน
โดย Meygrand จ 04 พ.ย. 2019 4:46 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
28
จ 04 พ.ย. 2019 4:46 pm โดย Meygrand
ทดสอบ
โดย mindphp จ 04 พ.ย. 2019 4:40 pm บอร์ด Programming - PHP
0
72
จ 04 พ.ย. 2019 4:40 pm โดย mindphp
แหล่งท่องเที่ยวในจังหวัดสุพรรณบุรี
โดย numtan5839 จ 04 พ.ย. 2019 4:00 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
71
พ 06 พ.ย. 2019 2:36 pm โดย numtan5839
การสร้างปีภาษีสำหรับการบัญทึกบัญชี
โดย nnamfon.26 จ 04 พ.ย. 2019 3:36 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
26
จ 04 พ.ย. 2019 3:36 pm โดย nnamfon.26
รวมรายการลดหย่อนภาษี ปี 62 แค่วางแผนให้ดี ก็มีเงินเหลือแน่นอน!
โดย promotion จ 04 พ.ย. 2019 3:35 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
34
จ 04 พ.ย. 2019 3:35 pm โดย promotion
อยากทราบวิธีการส่งค่าเมนู ไปแสดงที่ part way ของ phpbb
โดย Ittichai_chupol จ 04 พ.ย. 2019 3:02 pm บอร์ด Programming - PHP
1
28
จ 04 พ.ย. 2019 3:09 pm โดย thatsawan
วิธีการใช้ textwarp เพื่อทำการนำข้อความที่ยาวเกินไปมาขึ้นบรรทัดใหม่
โดย jirawoot จ 04 พ.ย. 2019 2:57 pm บอร์ด Python Knowledge
0
55
จ 04 พ.ย. 2019 2:57 pm โดย jirawoot
ต้องการ เลือก ข้อมูลใน select tag แล้ว block เปลี่ยนตำแหน่งไปตามนั้น
โดย bankjittapol จ 04 พ.ย. 2019 11:51 am บอร์ด JavaScript & Jquery Ajax
1
56
จ 04 พ.ย. 2019 12:02 pm โดย tsukasaz
note
โดย numtan5839 จ 04 พ.ย. 2019 11:21 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
5
47
อ 12 พ.ย. 2019 7:49 pm โดย numtan5839