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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
มี Extension ตัวไหน ดึงข้อมูลจากเว็บอื่นมาแสดงได้ครับ
46
toonytoony2004 16 ก.ค. 2019 12:55 pm
สรุป openERP
2
jirawoot 15 ก.ค. 2019 8:01 pm
Youtube สามารถฟังเสียงแล้วถอดเป็นข้อความได้
42
jamepiyawat 15 ก.ค. 2019 7:11 pm
วิธีทำให้ Title joomla Module เปลี่ยนภาษาได้
25
jamepiyawat 15 ก.ค. 2019 6:07 pm
วิธีแก้ error ของการติดตั้ง psycopg2 หรือ psycopg2_binary
25
jirawoot 15 ก.ค. 2019 5:48 pm
การเปิดไฟล์ PDF อีกแท็บนึง ด้วย target ใน html
37
chatee supasand 15 ก.ค. 2019 5:42 pm
ฟังก์ชัน ip2long() - ใช้เก็บ IP ลงฐานข้อมูลทำให้ประหยัดพื้นที่
36
Patipat 15 ก.ค. 2019 5:33 pm
เราจะ SELECT หลายตาราง ออกมาใช้งานโดนที่ไม่ต้องเชื่อมตารางกันได้ไหมครับ
41
jamepiyawat 15 ก.ค. 2019 5:10 pm
ทำไมเมื่อวานมันยังได้ ????
28
chatee supasand 15 ก.ค. 2019 5:09 pm
สอบถามครับ-เรียกฐานข้อมูลมาแสดง เป็นภาษาไทยไม่ได้อะครับ ขึ้น error Ascii
49
chatee supasand 15 ก.ค. 2019 4:17 pm
รู้จักกับ ฟังก์ชัน hypot() - ใช้คำนวณความยาวตรงข้ามด้านสามเหลี่ยมมุมฉาก
29
Patipat 15 ก.ค. 2019 4:08 pm
ศึกษาทำความเข้าใจ-บุญนำพา
14
EyePornnipa 15 ก.ค. 2019 3:42 pm
สอบถาม การติดตั้ง library ด้วย requirements.txt
40
jirawoot 15 ก.ค. 2019 2:57 pm
ใช้งานหลายหน้าจอด้วย desktops V2.0 บน Windows
24
chatee supasand 15 ก.ค. 2019 12:00 pm
อยากทราบวิธีทำให้ สไลด์โชว์สินค้า เป็นแบบ Responsive แสดง Product ตามที่เรากำหนดขนาดหน้าจอ
51
Patipat 15 ก.ค. 2019 11:52 am
รับสมัคร Helpdesk, Programmer, Tester, System
20
ปัทมา แซ่เฮ้ง 15 ก.ค. 2019 11:51 am
สอบถาม path directory ของ server ubuntu หน่อยครับ
42
jirawoot 15 ก.ค. 2019 11:12 am
Q - ลืมหัก ณ ที่จ่าย ควรจะทำยังไงดีค่ะ
37
EyePornnipa 15 ก.ค. 2019 10:26 am
งานประจำวันที่ 15 กรกฎาคม 2562
17
Patipat 15 ก.ค. 2019 10:19 am
วิธีขอ API จาก Google กรณีอยากใส่ Map ในเว็บไซต์
32
idsittikorn 15 ก.ค. 2019 10:13 am