คู่มือท่องเที่ยว สำหรับคนรักการท่องเที่ยว

Chapter 11

สิสต์รายการ (List)

ลิสต์รายการ แบบมีลำดับ (Ordered List)

<ol> ใช้คู่กับ <li> ในการแสดงผลลิสต์รายการแบบมีลำดับ เราสามารถกำหนดลำดับเป็น ตัวเลข ตัวอักษร หรือ ตัวเลขโรมัน ก็ได้ โดยใช้ attribute type และยังสามารถกำหนดจุดเริ่มต้นของการนับได้ โดยใช้ attributer start มาดูตัวอย่างกันเลยค่ะ

tag <ol>,<li> การแสดงผล
<ol>
<li>HTML
<li>CSS
<li>XHTML
</ol>
  1. HTML
  2. CSS
  3. XHTML
<ol start="3">
<li>HTML
<li>CSS
<li>XHTML
</ol>
  1. HTML
  2. CSS
  3. XHTML
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>XHTML</li>
</ol>
  1. HTML
  2. CSS
  3. XHTML
<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>XHTML</li>
</ol>
  1. HTML
  2. CSS
  3. XHTML
<ol type="I" start="5">
<li>HTML</li>
<li>CSS</li>
<li>XHTML</li>
</ol>
  1. HTML
  2. CSS
  3. XHTML


ลิสต์รายการ แบบไม่มีลำดับ โดยใช้สัญลักษณ์กำกับ (Unordered List หรือ Bullet List)

<ul> ใช้คู่กับ <li> ในการแสดงผลลิสต์รายการแบบไม่มีลำดับ เราสามารถกำหนดสัญลักษณ์หน้ารายการที่ต้องการ ผ่าน attribute type ที่มีค่าเป็น
disc = จุดกลมทึบ
circle = จุดกลมใหญ่ ไม่ทึบ
square = สี่เหลี่ยมทึบ

tag <ul>,<li> การแสดงผล
<ul>
<li>HTML
<li>CSS
<li>XHTML
</ul>
  • HTML
  • CSS
  • XHTML
<ul type="disc">
<li>HTML
<li>CSS
<li>XHTML
</ul>
  • HTML
  • CSS
  • XHTML
<ul type="circle">
<li>HTML
<li>CSS
<li>XHTML
</ul>
  • HTML
  • CSS
  • XHTML
<ul type="square">
<li>HTML
<li>CSS
<li>XHTML
</ul>
  • HTML
  • CSS
  • XHTML
<ul>
<li type="disc">HTML</li>
<li type="circle">CSS</li>
<li type="square">XHTML</li>
</ul>
  • HTML
  • CSS
  • XHTML
<ul type="disc">
<li>HTML</li>
  <ul type="circle">
  <li>item1</li>
  <li>item2</li>
  </ul>
<li>CSS</li>
<li>XHTML</li>
</ul>
  • HTML
    • item1
    • item2
  • CSS
  • XHTML


ลิสต์รายการ แบบให้คำนิยาม (Definition List)

<dl> ใช้คู่กับ <dt> และ <dd> ในการแสดงผลลิสต์รายการแบบให้คำนิยาม

definition list เริ่มด้วย <dl> tag (definition list)
แต่ละ term เริ่มด้วย <dt> tag (definition term)
และ แต่ละ description เริ่มด้วย <dd> tag (definition description)

tag <dl>,<dt>,<dd> การแสดงผล
<dl>
<dt>ชาเขียว</dt>
  <dd>ชาที่ไม่ได้ผ่านการหมัก</dd>
<dt>ชาอู่หลง</dt>
  <dd>ชากึ่งหมัก</dd>
<dt>ชาดำ</dt>
  <dd>ชาที่่ผ่านการหมัก</dd>
</dl>
ชาเขียว
ชาที่ไม่ได้ผ่านการหมัก
ชาอู่หลง
ชากึ่งหมัก
ชาดำ
ชาที่่ผ่านการหมัก


« Chapter 10
Chapter 12 »