เรื่อง :: วิธีการสร้างกรอบข้อความด้วย CSS

เห็นว่ามีผู้สงสัยสอบถามกันเข้ามามากว่า จะสามารถสร้างกรอบข้อความอย่างไรให้แตกต่างไปจากกรอบของตารางทั่วไปที่สร้างกันขึ้นมา บทความนี้ผมจะแนะนำการสร้างกรอบแบบนั้นให้คุณครับ...เพราะผมบอกแล้วว่า Trick หรือเคล็ดลับรู้ก็ต้องนำมาบอกกัน ไม่มีกั๊กรู้อยู่คนเดียวแน่นอนครับ..มาลองทำกันดูครับ

วิธีการสร้างกรอบข้อความ

1. ให้ท่านทำการสร้างตารางขึ้นมาใหม่ 1 ตารางนะครับ โดยกำหนดค่าของ Cell และ Border ต่าง ๆ เป็น 0 ทั้งหมดดังภาพ Pic.1 ครับ

Pic.1

2. จากนั้นให้ท่านทำการเปิดหน้าต่าง CSS Style ขึ้นมาดังภาพ Pic.2 ครับ
Pic .2

ที่หน้าต่าง CSS นี้ให้คลิ๊กไปที่ New Style ดังภาพ เมื่อคลิ๊กไปแล้วจะมีหน้าต่างปรากฏใหม่ขึ้นมา ดังภาพ Pic.3

Pic.3

ที่หน้าต่าง New CSS Style ให้ท่านกำหนดค่าดังนี้

Selector Type : เลือกไปที่ Class (can apply to any tag)
Name : กำหนดชื่อของ Class ห้ามเป็นชื่อภาษาไทย อย่าเว้นวรรค
Define In : ตรงนี้เลือกตามสะดวกครับ เลือกที่ This Document Only
จากนั้นก็ OK ครับ

3. เมื่อทำตามขั้นตอนที่กล่าวมาแล้วก็จะมีหน้าต่างใหม่เกิดขึ้นมาอีกดังรูป Pic .4 ครับ

Pic.4

ที่หน้าต่าง CSS Rule definition for... ให้เลือกเมนูทางซ้ายมือไปที่เมนู Border ครับ จากนั้นให้มากำหนดค่าที่ Filed ต่าง ๆ ทางขวามือของท่านต่อไปดังนี้

Style : ให้เลือกรูปแบบของเส้นกรอบของตารางที่ต้องการ ซึ่งจะมีหลายแบบให้เลือกใช้ เช่น dotted ก็จะเป็นเส้นกรอบแบบเส้นปะ แต่ถ้าเป็น solid ก็จะเป็นเส้นกรอบแบบตรงบาง

Width : กำหนดค่าของขนาดเส้นกรอบ มีหลายหน่วยขนาดให้เลือก

Color : กำหนดสีสันของกรอบ

เมื่อท่านกำหนดเป็นที่พอใจแล้วก็ OK ได้เลยครับ

4. เมื่อกำหนดค่าจากข้อ 3 ผ่านมาแล้ว ต่อมาเราต้องทำการเรียกใช้งาน CSS ที่เราสร้างขึ้นนี้ โดยการ...ให้เราไปที่ตาราง (Table) ที่เราสร้างขึ้นไว้จากขั้นตอนที่ 1 จากนั้นให้ไปที่ Selector TAG ดังรูป จากนั้นให้เรา Click ขวา เลือกที่ Set Class แล้วเลือกชื่อ Class ที่เราสร้างขึ้นไว้จากข้อ 3 ดังรูป

จากนั้นทดลอง Preview ดูกับ Browser ของท่านครับ เป็นอันเสร็จสิ้นการทำกรอบที่ต้องการครับ

ตัวอย่างการสร้างกรอบข้อความ

................................................................................................................................................................................

Trick...ค่าฟิลต่าง ๆ  ที่เรากำหนดไป เราสามารถกำหนดได้ตามอิสระ คือ เส้นกรอบด้านบน ด้านล่าง ซ้าย ขวา จะกำหนดแยกเป็นส่วน ๆ ได้ โดยเรานำเอาเครื่องหมายถูกที่ช่อง Same for All ออก แล้วทำการกำหนดค่าต่าง ๆ

ps. Style ของกรอบขึ้นอยู่กับการแสดงผลของ Browser และ version ของ Browser เป็นสำคัญ บาง Browser อาจจะรองรับ Style Border ได้แตกต่างกัน ....

ps2. การกำหนด CSS เราอาจจะกำหนดแบบอื่นก็ได้ ไม่จำเป็นต้องทำการกำหนดแบบที่ผมแนะนำ แต่จุดหลัก ๆ คือให้เรากำหนด border ตามมที่แนะนำไป.