การปรับแต่งตาราง ด้วยการใส่สีพื้นและเส้นขอบ

บทความนี้เป็นบทความต่อจากบทความสอน Dreamweaver ในบทความที่แล้วค่ะ หลังจากที่บทความที่แล้วเราทำ Workshop Photoshop สร้างตารางได้แล้ว ในบทความนี้เราจะมาปรับแต่งตารางของเราโดยการเพิ่มสีสันให้พื้นตารางและเส้นขอบ

ขั้นตอนแรก ก่อนอื่นเราต้องสร้างตารางขึ้นมาก่อนนะค่ะ จะกี่แถวกี่คอลัมน์ก็ได้ Webmaster ขอใช้ Table จากบทความ การสร้างตารางใน Dreamweaver ที่ได้สร้างไว้ในบทความที่แล้วนะค่ะ

เมื่อสร้างตารางแล้ว หากเราไม่ได้กำหนดเส้นขอบตาราง (เหมือนบทความที่ผ่านมาตอนสร้าง Table กำหนด Border=0) ตั้งแต่เริ่มต้นสร้าง เมื่อเราจะใส่สีของเส้นขอบ ถ้าเราใส่สีไปจะทำให้ไม่เห็นสีของเส้นขอบตาราง ดังนั้นเราจึงต้องไปกำหนดเส้นขอบของตารางกันก่อน โดยการใช้เมาส์จับที่ตาราง จากนั้นกำหนดค่า Border ที่ส่วน Properties ให้มีค่าเท่ากับ 1 ดังที่ปรากฏตามภาพที่ 1

เมื่อเรากำหนด Border=1 แล้ว เส้นขอบของตารางจะเปลี่ยนไปดังภาพที่ 2 และ เมื่อทดสอบดูผ่าน Browser ก็ทำให้เราสามารถเห็นขอบของตารางได้

ขั้นตอนที่ 2 เมื่อเราได้เส้นขอบของตารางแล้ว ให้เราใช้เมาส์จับที่ที่ตาราง จากนั้น สังเกตที่ส่วนของ Properties แล้วคลิกเลือก Brdr Color เพื่อใส่สีให้กับเส้นของตาราง และเมื่อใส่สีแล้วก็จะได้เส้นขอบตารางเหมือนภาพที่ 3 ค่ะ

ขั้นตอนที่ 3 ขั้นตอนนี้เราจะมาใส่สีให้กับพื้นหลังของตารางกันค่ะ เริ่มต้นโดยให้เราใช้เมาส์จับที่ที่ตาราง จากนั้นใส่สีให้ Background ของตารางโดยคลิกเลือกสีที่ Bg Color ของ Properties จากนั้นคลิกเลือกสีที่ต้องการค่ะ

และแ้ล้วก็เสร็จเรียบร้อย ได้ผลลัพธ์ของการปรับแต่งตาราง ตามภาพที่ 4 ค่ะ