ตัวอย่างคำสั่ง HTML LISTS

ตัวอย่างคำสั่ง HTML LISTS

จากบทความ HTML คืออะไร? ทำไมคนเขียนเว็บไซต์ต้องใช้งาน เราได้รู้ความหมายและลักษณะของการเขียน Code HTML ไปแล้ว สำหรับในบทความนี้จะยกตัวอย่าง Code HTML ที่ใช้สำหรับข้อความที่ต้องการเขียนออกมาในรูปแบบของรายการ(Lists) หรือที่ถูกเรียกว่า HTML LISTS นั้นสามารถเขียนออกมาในลักษณะใดได้บ้างและมีหน้าตาการแสดงผลที่แตกต่างกันออกไปอย่างไร

ความแตกต่างระหว่างการใช้ <ul> & <ol>

<!DOCTYPE html>
<html>
<body>

<h2>An Unordered HTML List</h2>

<ul> ------> Lists ที่ต้องการให้เป็นจุด
  <li>Terrestrial</li>
  <li>Pankesum</li>
  <li>Cranehop</li>
</ul>  

<h2>An Ordered HTML List</h2>

<ol> ------> Lists ที่ต้องการให้เป็นเลข

  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 

</body>
</html>

An Unordered HTML List

  • Terrestrial
  • Pankesum
  • Cranehop

An Ordered HTML List

  1. Terrestrial
  2. Pankesum
  3. Cranehop

ความแตกต่างระหว่างการใช้ <dt> & <dd>

<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

<dl> ------> Lists แบบไม่มี -
  <dt>Coffee</dt> ------> Lists ไม่มีเว้นย่อหน้า
  <dt>- black hot drink</dt>
  <dt>Milk</dt>
  <dd>- white cold drink</dd> ------> Lists ที่ต้องการย่อหน้า
</dl>

</body>
</html>

ความแตกต่างระหว่าง Disc & Square & Circle

<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Circle Bullets</h2>

<ul style="list-style-type:disc;"> ----> จุดทึบ
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Disc Bullets</h2>

<ul style="list-style-type:square;"> -----> สี่เหลี่ยม
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

<h2>Unordered List with Square Bullets</h2>

<ul style="list-style-type:circle;"> -------> จุดโปร่ง
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

Type & Start

<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Letters</h2>

<ol type="A"> ----> เรียงลำดับจาก A
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

<ol start="211"> ----> เรียงลำดับจาก 211
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

</body>
</html>

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.