การจัดรูปแบบ การแสดงผลแบบกลุ่ม


Preformatted Text <PRE> .. </PRE>

ในการแสดงผลข้อความที่ปรากฏบนจอภาพนั้น โดยทั่วไปถ้าเรา ต้องการจัดรูปแบบของการแสดงผล เช่นจะให้ตัวอักษรไปอยู่ทางขวามือ 5 ตัวอักษร เว้นบรรทัด จัดตำแหน่ง คอมลัมน์ของข้อความให้ตรงกัน เป็นต้น เราจะใช้คำสั่งมากมายเพื่อกำหนดให้เวบบราวเซอร์ แสดงผลอย่างที่เราต้องการ
ดังนั้นการใช้คำสั่ง <PRE> .. </PRE> มาใช้ในการ กำหนดรูปแบบการแสดงผล คำสั่งนี้เราสามารถใช้แสดงผลได้ตามที่เราต้องการโดยไม่ต้องเสียเวลา เขียนคำสั่งใดๆ ลงไป

ตัวอย่าง

Source View
<html>
<head><title> </title></head>
<body>
<Pre>

		ดูเหมือนไม่เสียใจ    ที่เธอจะไป
	ทำเป็นไม่รัก  ไม่ดูไม่แคร์อะไร
		ที่จริงลึกลงข้างใน ความจริงจากใจ
	ยังคงต้องการแต่เธอ ไม่อยากให้เธอต้องไป
		เธออย่าไปอย่าไป อย่าไปตากฉันได้ไหม
	ก็ฉันมีเพียงแต่เธอแค่เธอเท่านั้น
		เธออย่าไปอย่าไปอย่าไป ขอวอนเลยเธออย่าไป
	ขาดเธอใจคงสลาย เพราะคิดถึงเธอ ...
</Pre>
</body>
</html>
 

                 ดูเหมือนไม่เสียใจ    ที่เธอจะไป
         ทำเป็นไม่รัก  ไม่ดูไม่แคร์อะไร
                 ที่จริงลึกลงข้างใน ความจริงจากใจ
         ยังคงต้องการแต่เธอ ไม่อยากให้เธอต้องไป
                 เธออย่าไปอย่าไป อย่าไปตากฉันได้ไหม
         ก็ฉันมีเพียงแต่เธอแค่เธอเท่านั้น
                 เธออย่าไปอย่าไปอย่าไป ขอวอนเลยเธออย่าไป
         ขาดเธอใจคงสลาย เพราะคิดถึงเธอ ...

 


ในการใช้คำสั่ง <Pre> ... </Pre> ตัวอักษรจะถูกแสดงด้วยตัวอักษรแบบ Fixed font ซึ่งลักษณะตัวอักษรจะมีขนาดความกว้างของ ตัวอักษรเท่ากันหมด ดังนั้นข้อความที่อยู่ในคำสั่ง <Pre> ... </Pre> จึงไม่สามารถ แสดงเป็นภาษาไทยได้ นอกจากจะมีFont ภาษาไทยเป็นแบบ Fixed Font ซึ่ง Thai Fixed Font ที่นิยมใช้ ในปัจจุบันนั้น ก็เห็นจะเป็น Font ที่ชื่อ FixedED ThaiText New ซึ่งสามารถ Download ได้ ที่นี่ครับ

NOTE & TIPS !
  • ในการใช้คำสั่ง <Pre> ... </Pre> โดยปกติเราไม่สามารถใช้คำสั่งนี้ให้แสดงผลเป็น ภาษาไทยได้ ถ้าไม่มี Fixed Font แบบภาษาไทย เราสามารถแก้ไขได้โดยการ ใช้คำสั่ง <Font face="ตัวอักษรที่ต้องการให้แสดง"> แทรกเข้าไป

    ตัวอย่าง
    <Pre> <Font face="Ms Sans Serif">
    ข้อความ
    </Pre>
    หลังจากสั่งให้แสดงผล เวบเบาวเซอร์จะแสดงข้อความในคำสั่ง <Pre> ... </Pre> เป็นภาษาไทยได้อย่างถูกต้อง

  • ในการใช้คำสั่ง <Pre> ... </Pre> เราสามารถแทรกคำสั่งอื่นๆเข้าไปได้ เช่นการกำหนดสีให้กับตัวอักษร คำสั่งขีดเส้นคั่น เป็นต้น