[HTML] [CSS] tag ต่าง ๆ และ CSS ที่เกี่ยวกับ list

สำหรับ tag ของ HTML นั้น มีชุดของ tag อยู่ชุดนึง ที่ใช้สำหรับบอกถึงความเป็นรายการ หรือ list ซึ่ง tag ที่เกี่ยวกับรายการนั้นจะมีดังนี้ (คำภาษาไทยเนี่ย ผมคิดเองนะครับ ไม่ได้เป็นคำที่เป็นทางการอะไร)

  • รายการที่ไม่มีลำดับ (Unordered list) tag คือ ul
  • รายการที่มีลำดับ (Ordered list) tag คือ ol
  • รายการที่มีความหมาย (Definition list) tag คือ dl

ul li

สำหรับ tag ul นั้น เราจะใช้คู่กับ tag li

[html]
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
[/html]

ผลลัพธ์ออกมาเป็นแบบนี้

An Unordered List:

  • Coffee
  • Tea
  • Milk

ol li

สำหรับ tag ol นั้น เราจะใช้คู่กับ tag li

[html]
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
[/html]

ผลลัพธ์ออกมาเป็นแบบนี้

An Ordered List:

  1. Coffee
  2. Tea
  3. Milk

dl dt dd

สำหรับ tag dl นั้น เราจะใช้คู่กับ tag dt และ dd โดย dt เปรียบเสมือนหัวข้อ และ dd นั้นจะอธิบายหัวข้อ

[html]
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
[/html]

ผลลัพธ์ออกมาเป็นแบบนี้

A Definition List:

Coffee
Black hot drink
Milk
White cold drink

CSS กับ List

เราสามารถกำหนดรูปแบบของ List ได้ด้วยคำสั่งเหล่านี้

  • list-style-image สามารถนำรูปแบบใช้แทน bullet มาตรฐานได้ ตัวอย่างการใช้งาน list-style-image:url(images/bullet.png);
  • list-style-position กำหนดตำแหน่งของ bullet โดยมีสามแบบคือ inside outside และ inherit
  • list-style-type กำหนดลักษณะของ bullet อาจจะเป็นสี่เหลี่ยม เป็นวงกลม เป็นเลขโรมัน หรือเป็นตัว A B C ก็แล้วแต่เรจะกำหนด อย่างเช่น list-style-type:upper-alpha; แบบคือเราต้องการให้ bullet เป็นตัวอักษร A B C

Posted

in

by

Tags:

Comments

3 responses to “[HTML] [CSS] tag ต่าง ๆ และ CSS ที่เกี่ยวกับ list”

  1. นุ Avatar
    นุ

    คำสั่ง ul > li กับ ul li ต่างกันยังไงเหรอครับ

    1. rabbitinblack Avatar
      rabbitinblack

      ลองดูตามนี้ครับน่าจะเห็นภาพการใช้งาน

      https://codepen.io/rabbitinblack/pen/BoJzyV

      1. นุ Avatar
        นุ

        ขอบคุณครับ

Leave a Reply

Your email address will not be published. Required fields are marked *