Munu

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

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

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

บทความนี้เป็นบทความต่อจากบทความสอน 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 ค่ะ

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

เรามีทีมงานผู้เชี่ยวชาญที่มีประสบการณ์ด้านเว็บไซต์

มาประยุกต์ในการพัฒนาการให้บริการอยู่ตลอดเวลา เพื่อสร้างความพึงพอใจสูงสุดให้แก่ลูกค้าทุกท่าน
ด้วยประสบการณ์ที่เรามีอยู่นั้น ทำให้มั่นใจได้ว่าลูกค้าทุกท่านจะได้รับการบริการที่ดีจากเรา

Call

082-493-2295

E-mail

Konyubyub@Gmail.com

Location

บริษัท ดีไซน์นำโชค จำกัด
58/146 หมู่ที่ 6 หมู่บ้านซื่อตรง คลอง13 ตำบลบึงน้ำรักษ์ อำเภอธัญบุรี จังหวัดปทุมธานี 12110

2014 Powered by IYATHAI.com
Tel: 082-493-2295 E-mail: Konyubyub@gmail.com