ใบความรู้ที่ 5 เกี่ยวกับตาราง
เกี่ยวกับตาราง ( Table )
Table มีส่วนช่วยในการจัดระเบียบข้อความและรูปภาพทั้งหลาย มีเพียงโปรแกรมใน Dreamweaver เท่านั้นที่สามารถ เปลี่ยนเวบที่ออกแบบด้วยเลเยอร์มาเป็นตาราง ได้ทำให้เราสามารถออกแบบได้อย่างอิสระในตอนแรก จากนั้นจึงเปลี่ยนมา ใช้ระบบตารางเพื่อให้เปิดดูใน Browser ได้ทุกระบบไม่ผิดเพี้ยน (สาเหตุที่ Dreamweaver ต้องมีคำสั่งแบบนี้ เพราะ Browser รุ่นเก่าไม่สามารถใช้เลเยอร์ได้นั่นเอง)Tool บางตัวที่ใช้เขียนเวบเพจจะใช้หลัก Table ในการออกแบบเป็นหลักเช่น FRONTPAGE เนื่องจากใช้งานง่าย และเมื่อดูใน Browser จะได้ผลไม่ผิดเพี้ยนเลย แต่มีข้อด้อยคือไม่ให้ความอิสระ ในออกแบบเหมือนเลเยอร์
สร้างตาราง
- เลือกตำแหน่งที่ต้องการใส่ตาราง ด้วยการวางเคอร์เซอร์ที่ตำแหน่งนั้น คลิกปุ่ม Table ใน Object Palette หรือเลือกเมนู Insert > Table
- จะมี Dialog box ขึ้นมาให้เลือกจำนวนและค่าต่างๆ
- Row จำนวนแถวแนวนอน
- Columns จำนวนแถวแนวตั้ง
- Width ขนาดของตารางโดยรวม เลือกได้ว่าจะให้หน่วยเป็น percent หรือ Pixel
- Border กรอบของตาราง
- Cell Padding ช่องว่างระหว่าง Cell โปรแกรมตั้งไว้ที่ 1
- Cell Spacing ช่องว่างระหว่าง Cell โปรแกรมตั้งไว้ที่ 2
- Click OK จะมีตารางที่เราได้กำหนดขนาดปรากฎที่หน้า Document ดังภาพ
- Columns จำนวนแถวแนวตั้ง
- Width ขนาดของตารางโดยรวม เลือกได้ว่าจะให้หน่วยเป็น percent หรือ Pixel
- Border กรอบของตาราง
- Cell Padding ช่องว่างระหว่าง Cell โปรแกรมตั้งไว้ที่ 1
- Cell Spacing ช่องว่างระหว่าง Cell โปรแกรมตั้งไว้ที่ 2
- Click OK จะมีตารางที่เราได้กำหนดขนาดปรากฎที่หน้า Document ดังภาพ
- เราสามารถปรับขนาดได้จาก Property inspector ได้โดยการคลิกที่ขอบของ Tableให้ทำงาน
Select table element
ตารางสามารถเลือกส่วนที่จะเซ็ทค่าต่างได้หลายแบบ โดยจะเลือกแก้ไขทั้งตาราง หรือแก้ไขทีละช่อง หรือ แก้ไขทีละแถว หรือที่ละคอลัมน์ก็ได้
ตารางสามารถเลือกส่วนที่จะเซ็ทค่าต่างได้หลายแบบ โดยจะเลือกแก้ไขทั้งตาราง หรือแก้ไขทีละช่อง หรือ แก้ไขทีละแถว หรือที่ละคอลัมน์ก็ได้
การเลือกทั้งตารางเพื่อแก้ไข
- คลิกที่ขอบด้านใดด้านหนึ่งของตาราง (วิธีนี้ค่อนข้างลำบากโดยเฉพาะถ้าตารางนั้นซ้อนอยู่ในเลเยอร์อีกที)
- คลิกในตารางส่วนใดก็ได้หนึ่งครั้ง แล้วคลิกขวาที่เมาส์เลือก Table > select tableการเลือกเฉพาะในแถว
- คลิกเลือกตารางช่องหัวแถวที่เราจะเลือกแล้วลากเมาส์ไปทางขวา
การเลือกเฉพาะคอลัมน์
- คลิกที่ตารางบนสุดของ Column นั้น แล้วลากเมาส์ลงมา
การเลือกเฉพาะตารางที่ต้องการ
- กด CTRL ค้างไว้ แล้วคลิกไปทีละช่องที่ต้องการ
- คลิกที่ขอบด้านใดด้านหนึ่งของตาราง (วิธีนี้ค่อนข้างลำบากโดยเฉพาะถ้าตารางนั้นซ้อนอยู่ในเลเยอร์อีกที)
- คลิกในตารางส่วนใดก็ได้หนึ่งครั้ง แล้วคลิกขวาที่เมาส์เลือก Table > select tableการเลือกเฉพาะในแถว
- คลิกเลือกตารางช่องหัวแถวที่เราจะเลือกแล้วลากเมาส์ไปทางขวา
การเลือกเฉพาะคอลัมน์
- คลิกที่ตารางบนสุดของ Column นั้น แล้วลากเมาส์ลงมา
การเลือกเฉพาะตารางที่ต้องการ
- กด CTRL ค้างไว้ แล้วคลิกไปทีละช่องที่ต้องการ
เกี่ยวกับตาราง 2( Table )
Table property
หลังจากที่เลือก Table แล้วมาดูค่าต่างๆใน Property inspector ว่าสามารถกำหนดค่าอะไรได้บ้าง
หลังจากที่เลือก Table แล้วมาดูค่าต่างๆใน Property inspector ว่าสามารถกำหนดค่าอะไรได้บ้าง
- Table Name : ตั้งชื่อไว้เรียกอ้างอิง
- Rows : สามารถเพิ่มจำนวนแถวได้โดยพิมพ์ตัวเลขเพิ่มเข้าไป
- Cols : สามารถเพิ่มจำนวน Columns ได้โดยการเพิ่มจำนวนตัวเลขเข้าไป
- W และ H : ความกว้างและความสูงของตาราง ถ้าความกว้างถูกเซ็ทหน่วยเป็นเปอร์เซ็นหมายถึง สั่งให้ Browser ปรับความ กว้างของหน้าจอซึ่งจะทำให้ความกว้างของตารางไม่แน่นอน ถ้าระบุเป็นหน่วย Pixel หรือ หน่วยอื่นจะดีกว่า
- Cell Pad ช่องว่างระหว่าง Cell โปรแกรมตั้งไว้ที่ 1
- Cell Space ช่องว่างระหว่าง Cell โปรแกรมตั้งไว้ที่ 2
- Align : กำหนดชิดซ้าย กลาง หรือ ขวา
- Border : ขอบของตาราง
- Bg Color : สีพื้นหลังของตาราง
- Bg Image : ใช้รูปเป็นพื้นหลังของตาราง
- Brdr Color : สีของขอบของตาราง
- Rows : สามารถเพิ่มจำนวนแถวได้โดยพิมพ์ตัวเลขเพิ่มเข้าไป
- Cols : สามารถเพิ่มจำนวน Columns ได้โดยการเพิ่มจำนวนตัวเลขเข้าไป
- W และ H : ความกว้างและความสูงของตาราง ถ้าความกว้างถูกเซ็ทหน่วยเป็นเปอร์เซ็นหมายถึง สั่งให้ Browser ปรับความ กว้างของหน้าจอซึ่งจะทำให้ความกว้างของตารางไม่แน่นอน ถ้าระบุเป็นหน่วย Pixel หรือ หน่วยอื่นจะดีกว่า
- Cell Pad ช่องว่างระหว่าง Cell โปรแกรมตั้งไว้ที่ 1
- Cell Space ช่องว่างระหว่าง Cell โปรแกรมตั้งไว้ที่ 2
- Align : กำหนดชิดซ้าย กลาง หรือ ขวา
- Border : ขอบของตาราง
- Bg Color : สีพื้นหลังของตาราง
- Bg Image : ใช้รูปเป็นพื้นหลังของตาราง
- Brdr Color : สีของขอบของตาราง
Property inspector ของ Row ,Columm และ Cell
Porperty ในการใช้งานแต่ละอย่างจะไม่แตกต่างกันขึ้นอยู่กับที่เราทำการเลือก Select ไม่ว่าจะเป็น Row Column Cell
Porperty ในการใช้งานแต่ละอย่างจะไม่แตกต่างกันขึ้นอยู่กับที่เราทำการเลือก Select ไม่ว่าจะเป็น Row Column Cell
- Property ส่วนบนจะเป็นการควบคุมตัวอักษรหรือรูปภาพที่นำมาใส่ในตารางเหมือนกับ Property ของ Font ที่ได้กล่าวมาแล้ว
- Property ส่วนล่างเป็น Property ที่ควบคุมตารางในส่วนของ Row Column Cell
- W และ H : ขนาดความกว้างของ Cell ไม่จำเป็นต้องปรับ
- No Wrap : ช่อง Wrap จะสั่งให้โปรแกรมทำการตัดคำเมื่อเจอประโยคยาว ๆ แต่จะขยายช่องให้ตามแนวนอนไปเรื่อยๆ จนกระทั่งหมดคำแล้วจึงขึ้นบรรทัดใหม่ (ไม่ต้องติ๊กช่องนี้)
- Head : ในช่อง Head จะทำให้ช่องตารางนั้นกลายเป็นข้อความ เหมือนส่วนหัวตาราง คือเป็นส่วนใหญ่ ตัวหนา และจัดตำแหน่งอยู่กึ่งกลางเสมอ
- Bg : การนำรูปภาพมาทำเป็นพื้นหลัง
- Bg: เลือกสีทำเป็นพื้นหลังถ้าเลือกรูปภาพแล้วไม่ต้องเลือกสี
- Brdr : เลือกสีของขอบพร้อมทั้งขนาดของขอบ
- Property ส่วนล่างเป็น Property ที่ควบคุมตารางในส่วนของ Row Column Cell
- W และ H : ขนาดความกว้างของ Cell ไม่จำเป็นต้องปรับ
- No Wrap : ช่อง Wrap จะสั่งให้โปรแกรมทำการตัดคำเมื่อเจอประโยคยาว ๆ แต่จะขยายช่องให้ตามแนวนอนไปเรื่อยๆ จนกระทั่งหมดคำแล้วจึงขึ้นบรรทัดใหม่ (ไม่ต้องติ๊กช่องนี้)
- Head : ในช่อง Head จะทำให้ช่องตารางนั้นกลายเป็นข้อความ เหมือนส่วนหัวตาราง คือเป็นส่วนใหญ่ ตัวหนา และจัดตำแหน่งอยู่กึ่งกลางเสมอ
- Bg : การนำรูปภาพมาทำเป็นพื้นหลัง
- Bg: เลือกสีทำเป็นพื้นหลังถ้าเลือกรูปภาพแล้วไม่ต้องเลือกสี
- Brdr : เลือกสีของขอบพร้อมทั้งขนาดของขอบ
- คลิกรวม Cell
- หลังจากคลิกรวม Cell
Select Cell ที่ต้องการแบ่ง Cell โดย กด Ctrl ค้างแล้วคลิกภายใน Cell
- มาที่ Property inspector
- คลิกที่ Splits cell ดังภาพด้านบน
- จากนั้นจะมี Dialog box ให้ใส่ค่าดังนี้
- จากนั้นจะมี Dialog box ให้ใส่ค่าดังนี้
- Split Cell Into : ให้ทำการเลือกว่าต้องการเพิ่ม Cell ไปในทางไหน Row หรือ Columns
- Number of Rows : ระบุจำนวน Cell ที่ต้องการ ส่วนมากโปรแกรมจะคำนวนจำนวนมาให้พอดีแล้ว
- คลิก OK
- Number of Rows : ระบุจำนวน Cell ที่ต้องการ ส่วนมากโปรแกรมจะคำนวนจำนวนมาให้พอดีแล้ว
- คลิก OK
การใช้ตารางในการออกแบบเป็นสิ่งที่จำเป็นอย่างยิ่งเพื่อช่วยเพิ่มความสวยงามและการจัดระเบียบได้อย่างถูกต้อง และ Browser ก็สามารถแสดงผลได้เป็นอย่างดีไม่ว่า Browser จะเป็นรุ่นไหน เก่า หรือ ใหม่ ก็ไม่เป็นปัญหาในการแสดงผล และ สามารถนำตารางมาประยุกต์ใช้ช่วยเพิ่มความเร็วในการ Load รูปภาพโดยการนำรูปภาพมาแบ่งเป็นชิ้นส่วนเล็กๆ แล้วนำมาใส่ ในตารางทีละช่องและกำหนดไม่ให้แสดงขอบของตารางพอที่ Browser ก็จะเหมือนกับว่ารูปที่นำมาต่อกันในตารางนั้นเป็นรูปเดียว กัน และยังสามารถรับชมได้เร็วไม่ต้องเสียเวลา Load นานอีกด้วย ดังนั้นต้องศึกษาและทำความเข้าใจให้ดีเพื่อประโยชน์ ในการออกแบบ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น