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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Funny today ไปไหน???
โดย chatee supasand พฤ 12 ธ.ค. 2019 11:44 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
4
พฤ 12 ธ.ค. 2019 11:44 am โดย chatee supasand
VDO - แนะนำการใช้งาน Plugin Content M Change Log
โดย numtan5839 พฤ 12 ธ.ค. 2019 10:47 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
0
3
พฤ 12 ธ.ค. 2019 10:47 am โดย numtan5839
งานประจำวันที่ 12 ธันวาคม 2562
โดย numtan5839 พฤ 12 ธ.ค. 2019 10:04 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
0
4
พฤ 12 ธ.ค. 2019 10:04 am โดย numtan5839
วิธีการนำข้อมูลคำอธิบายภาพออก ในโพสต์ของ php
โดย Ittichai_chupol พ 11 ธ.ค. 2019 7:03 pm บอร์ด PHP Knowledge
1
20
พฤ 12 ธ.ค. 2019 10:59 am โดย Sirayu
โปรแกรมคำนวณเพซ
โดย prmindphp พ 11 ธ.ค. 2019 6:50 pm บอร์ด MindPHP News & Feedback
0
18
พ 11 ธ.ค. 2019 6:50 pm โดย prmindphp
ArrayList Java กับการหาค่าที่มากที่สุดแล้วลบออก
โดย Grammanano พ 11 ธ.ค. 2019 6:38 pm บอร์ด Share Knowledge
0
20
พ 11 ธ.ค. 2019 6:38 pm โดย Grammanano
การเขียน switch case ในภาษา C
โดย Grammanano พ 11 ธ.ค. 2019 5:52 pm บอร์ด Share Knowledge
0
15
พ 11 ธ.ค. 2019 5:52 pm โดย Grammanano
VDO - Introducing to Pace Calculator
โดย numtan5839 พ 11 ธ.ค. 2019 5:38 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
2
16
พฤ 12 ธ.ค. 2019 11:15 am โดย mindphp
การลบข้อมูลจาก ArrayList ภาษา Java
โดย Grammanano พ 11 ธ.ค. 2019 5:32 pm บอร์ด Share Knowledge
0
16
พ 11 ธ.ค. 2019 5:32 pm โดย Grammanano
วิธีแปลงไฟล์ PDF เป็นไฟล์ Word ทางเว็ปไซต์
โดย noppadonsk พ 11 ธ.ค. 2019 4:24 pm บอร์ด Share Knowledge
0
22
พ 11 ธ.ค. 2019 4:24 pm โดย noppadonsk
วิธีใช้ text shortcut ใน Google Docs สร้างคำที่พิมพ์บ่อยให้พิมพ์ได้เร็วขึ้น
โดย noppadonsk พ 11 ธ.ค. 2019 4:02 pm บอร์ด Share Knowledge
0
8
พ 11 ธ.ค. 2019 4:02 pm โดย noppadonsk
รู้รึยัง Google Search ค้นหาเนื้อหาในวีดีโอได้แล้ว
โดย noppadonsk พ 11 ธ.ค. 2019 3:47 pm บอร์ด Share Knowledge
0
12
พ 11 ธ.ค. 2019 3:47 pm โดย noppadonsk
10 อันดับรถยนต์วินเทจ ที่ใครเห็นก็ต้องมอง
โดย Meygrand พ 11 ธ.ค. 2019 3:04 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
18
พ 11 ธ.ค. 2019 3:04 pm โดย Meygrand
อยากทราบวิธีการ override ไฟล์ bookmark มาใช้งานใน Extension ของ phpbb
โดย Ittichai_chupol พ 11 ธ.ค. 2019 11:00 am บอร์ด Programming - PHP
0
12
พ 11 ธ.ค. 2019 11:00 am โดย Ittichai_chupol
งานประจำวันที่ 11 ธันวาคม 2562
โดย noppadonsk พ 11 ธ.ค. 2019 10:05 am บอร์ด MT36 - นายนพดล สุชญากูล
10
42
พ 11 ธ.ค. 2019 7:00 pm โดย noppadonsk
งานประจำวันที่ 11 ธันวาคม 2562
โดย Grammanano พ 11 ธ.ค. 2019 10:02 am บอร์ด M098 - อนงค์นาท ไฝขาว
1
8
พ 11 ธ.ค. 2019 6:59 pm โดย Grammanano
งานประจำวันที่ 11 ธันวาคม 2562
โดย numtan5839 พ 11 ธ.ค. 2019 9:52 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
2
16
พ 11 ธ.ค. 2019 7:23 pm โดย numtan5839
R - Rotate back up file
โดย Grammanano จ 09 ธ.ค. 2019 8:20 pm บอร์ด M098 - อนงค์นาท ไฝขาว
1
7
จ 09 ธ.ค. 2019 8:24 pm โดย mindphp
การดึงข้อมูลใน ArrayList ภาษา Java
โดย Grammanano จ 09 ธ.ค. 2019 7:42 pm บอร์ด Share Knowledge
0
17
จ 09 ธ.ค. 2019 7:42 pm โดย Grammanano
ฺB - ไม่สามารถ cancel ใบกำกับภาษีที่สร้างผ่าน withholding tax โดยตรงได้
โดย nnamfon.26 จ 09 ธ.ค. 2019 7:27 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
4
จ 09 ธ.ค. 2019 7:27 pm โดย nnamfon.26