การแสดงข้อมูลแบบลิสต์รายการใช้ในกรณีที่เราต้องการทำรายการเป็นข้อๆ เรียงลำดับ โดยสามารถกำหนดรายการแบบต่างๆ ได้ดังนี้

การแสดงรายการแบบมีลำดับกำกับ (Order List)

<ol type= “Type” start= “Start”>
    <li value= “Value”>First Choice</li>
    <li>Second Choice</li>
    <li>Third Choice</li>
</ol> 

Type คือ ประเภทของรายการ คือ 1/A/a/I/i

            1 เป็นลำดับตัวเลข ซึ่งเป็นค่า Default ในกรณีที่ไม่ระบุ Type

            A เป็นลำดับตัวอักษรตัวพิมพ์ใหญ่

            a เป็นลำดับตัวอักษรตัวพิมพ์เล็ก

            I เป็นลำดับตัวเลขโรมันใหญ่

            i เป็นลำดับตัวเลขโรมันเล็ก

Start คือ ลำดับเริ่มต้น
Value คือ ลำดับที่ต้องการให้แสดง เช่น 5

ตัวอย่าง ex16.html

<html>
<head>
<title>Order List</title>
</head>
<body>
		<ol start= “1”>
			<li>First Choice</li>
			<li>Second Choice</li>
		</ol>
<ol type= “A” start= “1”>
			<li>First Choice</li>
			<li>Second Choice</li>
		</ol>
<ol type= “a” start= “1”>
			<li>First Choice</li>
			<li>Second Choice</li>
		</ol>
<ol type= “I” start= “1”>
			<li>First Choice</li>
			<li>Second Choice</li>
		</ol>
<ol type= “i” start= “1”>
			<li>First Choice</li>
			<li>Second Choice</li>
		</ol>
</body>
</html>


ผลลัพธ์

************************************************************************

การแสดงรายการแบบมีสัญลักษณ์กำกับ (Bulleted List)

<ul type= “Type” start= “Start”>
    <li value= “Value”>First Choice</li>
    <li>Second Choice</li>
    <li>Third Choice</li>
</ul> 

 

Type คือ ประเภทของรายการ คือ disc/circle/square

            disc เป็นการกำหนดรายการแบบวงกลมทึบ โดย Default อยู่แล้ว

            circle เป็นการกำหนดรายการแบบวงกลมกลวง

            square เป็นการกำหนดรายการแบบสี่เหลี่ยมทึบ

Start คือ ลำดับเริ่มต้น
Value คือ ลำดับที่ต้องการให้แสดง เช่น 5

ตัวอย่าง ex17.html
 

<html>
<head>
<title>Bulleted List</title>
</head>
<body>
		<ul start= “1”>
			<li>First Choice</li>
			<li>Second Choice</li>
		</ul>
<ul type= “disc” start= “1”>
			<li>First Choice</li>
			<li>Second Choice</li>
		</ul>
<ul type= “circle” start= “1”>
			<li>First Choice</li>
			<li>Second Choice</li>
		</ul>
<ul type= “square” start= “1”>
			<li>First Choice</li>
			<li>Second Choice</li>
		</ul>
</body>
</html>


ผลลัพธ์

******************************************************************

การแสดงรายการแบบข้อมูลนิยาม (Definition List) หรือการเยื้อง

<dl>
    <dt>Title Text</dt>
    <dd>Detail Text</dd>
</dl> 

Title Text คือ ข้อความหัวเรื่อง

Detail Text คือ ข้อความรายการย่อย

ตัวอย่าง ex18.html

<html>
<head>
<title>Bulleted List</title>
</head>
<body>
		<dl>
			<dt>Title 1</dt>
				<dd>Sub Title1</dd>
				<dd>Sub Title2</dd>
			<dt>Title 2</dt>
				<dd>Sub Title1</dd>
				<dd>Sub Title2</dd>
		</dl>
</body>
</html>


ผลลัพธ์​​​​​​​

 


 

ความคิดเห็น

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com