Categories
CSS HTML

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

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

สำหรับ 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

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

Leave a Reply

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