[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