การจัดการตาราง

การตกแต่งตาราง

การตกแต่งตาราง สามารถใส่สีช่องตาราง พื้นหลังตาราง หรือเส้นขอบของตารางได้ ดังนี้

การกำหนดสีให้เซลล์ในตาราง

1 คลิกวางเคอร์เซอร์ในช่องเซลล์ที่ต้องการใส่สี

2 คลิกเลือกสีในช่อง Bg

3 จะปรากฏสีพื้นหลังของช่องเซลล์ตามที่เราเลือก

Note การยกเลิกสีในช่องเซลล์ ขั้นตอนเหมือนการใส่สีในช่องเซลล์ แต่ในช่อง Bg เลือก

การกำหนดสีของตารางโดยใช้ CSS

การปรับแต่งสีของตาราง เราสามารถใช้ CSS (Cascading Style Sheets) เข้ามาช่วย ซึ่งจะมีรายละเอียดต่าง ๆ ดังนี้

การสร้างกฎใหม่

เป็นการกำหนดกฎ (Rule) ใหม่ขึ้นมา เพื่อใช้บังคับส่วนประกอบในหน้าเว็บที่เราเลือก ให้แสดงผลตามกฎที่เราตั้งไว้ เราจะสร้างกฎใหม่จากพาเนล CSS Styles โดยเรียกขึ้นมาจากเมนูคำสั่ง Window -> CSS Styles แล้วทำตามขั้นตอนดังนี้

1 คลิกที่ปุ่ม All

2 คลิกที่ปุ่ม New CSS Rule เพื่อสร้างกฎใหม่

3 เลือก Class เพื่อสร้างกฎที่ใช้งานได้ทุกที่

4 ตั้งชื่อกฎ

5 กำหนดให้สร้างกฎฝังในหน้าเว็บ

6 คลิกเมาส์ปุ่ม OK

7 เลือก Background

8 Background-color : กำหนดสีพื้นหลัง
Background-image : กำหนดพื้นหลังเป็นภาพ

9 เลือก Border

10 เลือกกำหนดลักษณะเส้นขอบ (Solid = เส้นทึบ)

11 กำหนดความหนาเส้นขอบ

12 กำหนดสีเส้นขอบ

13 คลิกเมาส์ปุ่ม OK

14 แสดงกฎใหม่ที่สร้างขึ้นมา

Note
ใน 1 กฎเราสามารถกำหนดหลาย ๆ คุณสมบัติรวมกันได้ เช่น กำหนดสีพื้นหลัง กำหนดสีเส้นขอบ รวมอยู่ในกฎเดียวกัน
ใน 1 หน้าเว็บเราสามารถกำหนดหลาย ๆ กฎได้ เช่น กฎที่หนึ่งกำหนดสีพื้นเป็นสีแดง กฎที่สองกำหนดสีพื้นหลังเป็นสีดำ โดยสามารถใช้วิธีในตัวอย่างที่ผ่านมาในการสร้างกฎ ใหม่เพิ่มขึ้นมาอีกได้

การกำหนดสีพื้นหลังและสีเส้นขอบให้กับตาราง

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

1 คลิกเลือกทั้งตาราง

2 ในช่อง Class เลือกกฎที่เราสร้าง

3 ตารางถูกตกแต่งด้วยสีพื้นหลังและสีเส้นของที่กำหนดไว้ในกฎ

ครูอัครชัย โพนสัย

บทเรียนบนเครือข่ายอินเทอร์เน็ต
การสร้างเว็บไซต์ด้วย Dreamweaver CS6
กลุ่มสาระการเรียนรู้การงานอาชีพและเทคโนโลยี
โรงเรียนเมืองแกพิทยาคม
สังกัดสำนักงานเขตพื้นที่การศึกษามัธยมศึกษาเขต 32
สำนักงานคณะกรรมการการศึกษาขั้นพื้นฐาน
กระทรวงศึกษาธิการ

6 หมู่ 6 ต.เมืองแก
อำเภอสตึก จังหวัดบุรีรัมย์

mr.auckarachai@hotmail.com

090-360-3400

Your message has been sent. Thank you!