การใช้ตาราง เหมาะสำหรับการนำเสนอข้อมูลจำนวนมากที่ต้องการจัดให้เป็นระเบียบ โดยอยู่ในรูปของแถวและคอลัมน์ เช่น จัดเก็บคะแนน, ข้อมูลหุ้น, และการแสดงยอดขายสินค้าชนิดต่างๆ ในเว็บเพจให้อยู่ในตำแหน่งที่ต้องการได้อย่างเป็นสัดส่วนอีกด้วย
นอกจากนี้ เรายังสามารถแทรกภาพรวมกับข้อความในช่องตารางแต่ละช่อง เพื่อแบ่งแยกข้อความที่ใช้ประกอบภาพในแต่ละภาพได้อย่างชัดเจน และเป็นระเบียบ
การสร้างตารางในโปรแกรม Dreamweaver สามารถทำได้ง่ายๆ เพราะมีเครื่องมือ (Table) ที่ช่วยสร้างตารางบนเว็บเพจของเราได้ตามต้องการ
วิธีการสร้างตารางนั้น มีขั้นตอนในการสร้างตารางอยู่ 3 วิธี คือ
วิธีที่ 1 เลือกเมนูคำสั่ง Insert > Table
วิธีที่ 2 เลือกเครื่องมือ (Table) ที่แท็บ Common หรือแท็บ Layout
วิธีที่ 3 กดคีย์ <Ctrl+Alt+T> ที่แป้นพิมพ์
โดยทั้ง 3 วิธีนี้จะแสดงหน้าต่าง Table สำหรับใช้กำหนดรายละเอียดเกี่ยวกับตาราง ดังนี้
Rows จำนวนแถวที่ต้องการ
Columns
จำนวนคอลัมน์ที่ต้องการ
Table Width ความกว้างของตารางหน่วยที่ใช้จะเป็นเปอร์เซ็นต์ หรือพิกเซลก็ได้
Border Thickness ความหนาของขอบตาราง
Cell padding
ระยะห่างระหว่างข้อความภายในเซลล์กับขอบเซลล์
Cell spacing ระยะห่างระหว่างแต่ละเซลล์ในตาราง
Header
กำหนดให้เราสามารถพิมพ์หัวข้อของข้อความภายในเซลล์ และจัดวางตรงส่วนไหนของตาราง
โดยกำหนดได้ดังนี้
Caption กำหนดหัวข้อของตาราง
Align caption จัดวางหัวข้อของตารางไว้ในตำแหน่งที่ต้องการ โดยที่
default ไม่มีการกำหนดค่า ให้ใช้ค่าปกติ
นั่นคือจัดวางหัวข้อของตารางไว้ข้างบนและจัด วางตารางกลางของตาราง
top จัดวางหัวข้อของตารางไว้ข้างบน และจัดตำแหน่งตรงกลางของตาราง
bottom จัดวางหัวข้อของตารางไว้ด้านล่าง และจัดตำแหน่งตรงกลางของตาราง
left
จัดวางหัวข้อของตารางไว้ด้านบน แต่จัดตำแหน่งไว้ชิดซ้ายของตาราง
right จัดวางหัวข้อของตารางไว้ด้านบน แต่จัดตำแหน่งไว้ชิดขวาของตาราง
Summary
เขียนคำอธิบายเกี่ยวกับตาราง แต่ไม่แสดงให้เห็นบนหน้าเว็บ จะถูกฝังไว้ในโค้ด HTML เท่านั้น
เมื่อกำหนดค่าตามที่เราต้องการในหน้าต่าง Table แล้ว ให้เราคลิกเมาส์ปุ่ม เราก็จะได้ตารางตามที่กำหนดไว้ ซึ่งใน Dreamweaver เมื่อเราสร้างตารางจะมีส่วนที่เรียกว่า ส่วนที่ใช้จัดการตาราง/คอลัมน์เพิ่มขึ้นมา ซึ่งมีประโยชน์ในการจัดระเบียบตาราง และข้อมูลให้ง่าย และดูสวยงาม
เราสามารถใส่ข้อมูลเข้าไปในตารางที่สร้างได้ โดยคลิกเลือกช่องเซลล์ที่ต้องการ แล้วพิมพ์ข้อความที่ต้องการลงไปได้เลย
ใส่รูปภาพในตาราง
เมื่อเราต้องการแทรกภาพลงในช่องตาราง และปรับขนาดภาพให้พอดีกับช่องตาราง
ก็สามารถทำได้ ดังนี้
เราสามารถปรับขนาดของช่องตารางในแถว หรือคอลัมน์ของตารางให้ได้สัดส่วนตามที่เราต้องการ โดยการคลิกที่เส้นตาราง และลากเมาส์ปรับขนาดได้
การทำงานกับตารางไม่ว่าจะเป็นการตกแต่งรายละเอียด หรือจัดรูปแบบตาราง ล้วนต้องเลือกตารางช่องต่างๆก่อนเสมอ
เลือกทั้งตาราง
การเลือกทั้งตาราง มีอยู่ 3 วิธี คือ
วิธีที่ 1 ให้เลื่อนเมาส์ไปที่ขอบตารางจนตัวชี้เมาส์เปลี่ยนเป็น แล้วคลิกเมาส์เพื่อเลือกทั้งตาราง
วิธีที่ 2 ให้เลือกเซลล์ใดก็ได้ในตารางและเลือกคำสั่ง Modify > Table > Select Table
วิธีที่ 3 ขณะเลือกเซลล์ใดๆ อยู่ ให้คลิกที่แท็ก <Table> ที่แถบสถานะด้านล่างของหน้าเว็บที่เรากำลังทำงานอยู่
ให้คลิกเมาส์เลือกเซลล์แรก และให้กดคีย์ <Ctrl> ค้างไว้ก่อนเลือกเซลล์ต่อไปที่ไม่อยู่ติดกัน ดังนี้
1.นำเมาส์ไปวางหน้าแถวที่ต้องการเลือก จะปรากฏลูกศรสีดำหน้าแถวนั้น
2.ให้คลิกที่ลูกศร ก็จะเป็นการเลือกแถวนั้นทั้งแถว หรือจะคลิกเลือกเซลล์ใดก็ได้ในตาราง และคลิกแท็ก <tr> ที่เป็นของแถวนั้น
1.นำเมาส์ไปวางไว้บนคอลัมน์ที่ต้องการเลือก จะปรากฏลูกศรสีดำอยู่บนคอลัมน์นั้น
2.ให้คลิกที่ลูกศรจะเป็นการเลือกทั้งคอลัมน์นั้น
ในโปรแกรม Dreamweaver ได้เพิ่มส่วนที่ใช้จัดการกับตารางที่เราเลือก โดยแบ่งออกเป็น 2 ส่วน คือ ส่วนที่ใช้จัดการกับคอลัมน์ทั้งตาราง และส่วนที่ใช้จัดการคอลัมน์ที่เลือก ช่วยจัดระเบียบของข้อมูลในตารางให้ได้สัดส่วนมากขึ้น ดังรายละเอียดต่อไปนี้
จัดการกับคอลัมน์ทั้งตาราง
มีประโยชน์คือ ใช้จัดระเบียบของตารางและข้อมูลในตารางให้ดูสมส่วนและสวยงาม ดังตัวอย่างเราจะลบค่าช่องว่างของคอลัมน์ทั้งตารางตามแนวกว้าง เพื่อให้ช่องตารางพอดีกับภาพ และข้อความในช่องตารางทั้งหมด โดยเลือกที่คำสั่ง Clear All Widths มีขั้นตอนดังนี้
1. คลิกเมาส์ที่ปุ่มลูกศร ของช่องตารางทั้งตาราง แล้วเลือกคำสั่งที่ใช้ในการจัดการกับคอลัมน์ทั้งตาราง ดังนี้
* Select Table
เลือกตารางทั้งหมด
* Clear All Heights ลบค่าช่องว่างตามความสูงของทั้งตาราง
*
Clear All Widths ลบค่าช่องว่างตามความกว้างของทั้งตาราง
* Make All Widths Consistent ทำให้ความกว้างในแต่ละคอลัมน์กว้างเท่ากันหมด
* Hide Table Widths ซ่อนส่วนที่ใช้จัดการตารางนี้ (หากต้องการให้แสดงความกว้างของตารางอีกครั้งให้เลือกคำสั่ง
View > Visual Aids > Table Widths)
ในตัวอย่างจะเลือกใช้คำสั่ง Clear All Widths เพื่อลบค่าช่องว่างของคอลัมน์ทั้งตารางตามแนวความกว้าง
2. แสดงการลบค่าช่องว่างของคอลัมน์ทั้งตาราง ทำให้แต่ละคอลัมน์มีขนาดตามข้อมูลที่อยู่ในนั้น
-
จัดการเฉพาะคอลัมน์
เราสามารถจัดการเฉพาะคอลัมน์ที่เราเลือกได้ ดังตัวอย่างเราจะสั่งลบช่องว่างในคอลัมน์แรกให้พอดีกับข้อความ
1. คลิกเมาส์ที่ปุ่มลูกศร
ในคอลัมน์ที่เราจะลบความกว้าง โดยมีคำสั่งให้เราเลือก ดังนี้
* Select Column
เลือกเซลล์ทั้งหมดในคอลัมน์ที่เราเลือก
* Clear Column Width ลบค่าช่องว่างของคอลัมน์ที่เราเลือก
*Insert Column Left
เพิ่มคอลัมน์ใหม่ด้านซ้ายจากคอลัมน์ที่เราเลือก
*Insert Column Right เพิ่มคอลัมน์ใหม่ด้านขวาจากคอลัมน์ที่เราเลือก
2. แสดงการลบค่าช่องว่างเฉพาะในคอลัมน์ที่เราเลือก
นอกจากการใช้เมาส์ปรับคุณสมบัติต่างๆของตารางแล้ว เรายังสามารถกำหนดรายละเอียดต่างๆ ได้จาก Properties Inspector โดยเมื่อเราคลิกเลือกตาราง หรือคอลัมน์ หรือเซลล์ในตารางแล้ว ก็จะสามารถปรับขนาดเซลล์/แถว/คอลัมน์ ปรับความสูง/ความกว้าง/ความหนาของตาราง อีกทั้งสามารถเลือกตำแหน่งที่จะวางตารางบนเว็บเพจได้
รูปแบบ | คำอธิบาย |
Tale ID | กำหนดชื่อตารางนี้ (เราจะอ้างอิงถึงชื่อตารางเมื่อมีการใช้ Behavior) |
Rows, ID | (จำนวนแถวและคอลัมน์)ระบุจำนวนแถวและคอลัมน์ของตารางตามต้องการใช้ระบุความกว้างของตาราง โดยระบุเป็นเปอร์เซ็นต์เทียบกับความกว้างของหน้าต่างบราวเซอร์ หรือ ระบุเป็นพิกเซลก็ได้ |
CellPad | กำหนดระยะห่างระหว่างข้อความในตารางกับขอบตาราง ค่านี้มีผลกับทั้งตารางค่าที่กำหนดไว้เป็นมาตรฐานคือ 1 |
CellSpace | กำหนดระยะห่างระหว่างเซลล์ที่อยู่ในตาราง ค่านี้มีผลกับทั้งตารางค่าที่กำหนดไว้เป็นมาตรฐานคือ 2 |
Align | ใช้ระบุการจัดวางตารางให้ชิดซ้าย (Left) ชิดขวา (Right) กึ่งกลาง (Center) หน้าเว็บได้ โดยค่าที่ต้องการให้มีเส้นขอบตารางให้กำหนดไว้เป็นมาตรฐาน (Default) คือ Left |
Border | ถ้าเราไม่ต้องการให้มีเส้นขอบตารางให้กำหนดค่าในช่องนี้เป็น 0 หากต้องการให้มีเส้นขอบตาราง ให้กำหนดความหนาของเส้นขอบได้ในช่องนี้ |
Clear Row Heights, | คลิกเมาส์เพื่อลบค่าความสูง หรือความกว้างของแถวหรือคอลัมน์ |
Convert Table Widths to Pixel, Percent | คลิกเมาส์เพื่อแปลงค่าความกว้างของตารางที่เรากำหนดไว้จากพิกเซลเป็นค่าเปอร์เซ็นต์หรือจากค่าเปอร์เซ็นต์เป็นค่าพิกเซล |
Class | ใช้ในกรณีที่เรากำหนดค่า CSS ให้กับตาราง |
Bg Image, Bg Color, | ระบุภาพที่จะใช้เป็นพื้นหลังของตาราง หรือสีที่ใช้เป็นพื้นหลัง และสีของขอบตาราง |
จัดข้อมูลในแนวนอน
เราสามารถจัดข้อมูลที่แสดงในช่องตารางให้ชิดขวา ชิดซ้าย
หรืออยู่กึ่งกลางของช่องตาราง โดยการคลิกช่องตารางที่ต้องจัดข้อมูล แล้วกำหนดตำแหน่งของข้อมูลในช่อง Horz จาก Properties Inspector ดังนี้
- จัดข้อมูลในแนวตั้ง
ถ้าเรามีช่องตารางที่ขยายออกมากกว่า 1 แถว เราสามารถกำหนดข้อมูลในตารางช่องนั้นให้อยู่ชิดบน ชิดล่าง หรืออยู่กึ่งกลาง โดยการคลิกช่องตารางที่ต้องการจัดข้อมูล แล้วกำหนดตำแหน่งของข้อมูลในช่อง Vert จาก Properties Inspector ดังนี้
การแทรกคอลัมน์
เราสามารถแทรกคอลัมน์เพื่อเพิ่มคอลัมน์ในตารางได้โดยขั้นตอนต่อไปนี้
- คลิกที่เซลล์ตรงคอลัมน์ที่จะแทรก
- หากต้องการแทรกคอลัมน์ ให้เลือกเมนูคำสั่ง Modify > Table > Insert Column
หากต้องการแทรกคอลัมน์ทางซ้ายหรือทางขวาของเซลล์นั้น ให้เลือกเมนูคำสั่ง Modify > Table > Insert Rows or Columns แล้วเลือกตัวเลือกดังรูป
การแทรกแถว
นอกจากเราสามารถแทรกคอลัมน์ได้แล้วเรายังสามารถแทรกแถวได้เช่นเดียวกัน โดยวิธีต่อไปนี้
- คลิกที่เซลล์ตรงแถวที่จะแทรก
- หากต้องการแทรกแถว ให้เลือกเมนูคำสั่ง Modify > Table > Insert Row
หากต้องการแทรกแถวด้านบนหรือด้านล่างของเซลล์นั้น ให้เลือกเมนูคำสั่ง Modify > Table > Insert Rows or Columns แล้วเลือกตัวเลือกดังรูป
การลบแถวหรือคอลัมน์ เราสามารถลบแถวหรือคอลัมน์ได้โดยวิธีต่อไปนี้
- คลิกที่แถวหรือคอลัมน์ที่ต้องการจะลบ
- การลบแถว
ให้เลือกเมนูคำสั่ง Modify > Table > Delete Row
การลบคอลัมน์ ให้เลือกเมนูคำสั่ง Modify > Table > Delete Column
การรวมเซลล์
เราสามารถรวมเซลล์ในตารางได้โดยวิธีต่อไปนี้
- เลือกเซลล์ที่จะรวม(ต้องเป็นเซลล์ที่ติดกัน) โดยกด <Ctrl> ค้างไว้พร้อมกับเลือกเซลล์ที่จะรวมกัน
- เลือกเมนูคำสั่ง Modify > Table > Merge Cells หรือ คลิกที่ปุ่ม ( Merge Cells) ในพาเนล Properties
การแบ่งเซลล์
เราสามารถแบ่งเซลล์ได้โดยวิธีต่อไปนี้
- คลิกที่เซลล์ที่ต้องการแบ่ง
- เลือกเมนูคำสั่ง Modify > Table > Split Cell หรือ คลิกที่ปุ่ม (Split Cell) ในพาเนล Properties
- จะปรากฏหน้าต่าง Split Cell ขึ้นมาให้เลือกรูปแบบของการแบ่งเซลล์ ดังนี้
นอกจากการรวมเซลล์ และการแยกเซลล์ เราสามารถปรับเปลี่ยนบางช่องเซลล์ในตารางให้ขยายออกมามากกว่า 1 คอลัมน์ หรือ 1 แถวก็ได้
เพื่อใช้ในการจัดเรียงข้อมูลอย่างเหมาะสม
การขยายช่องเซลล์
ในที่นี้จะแสดงตัวอย่างการเพิ่มความกว้างเซลล์ตามแนวตั้ง และตามแนวนอน ซึ่งเราทำได้โดยการคลิกเมาส์ปุ่มขวา เลือกช่องเซลล์ที่ต้องการปรับ เลือกคำสั่ง Modify >
Table > Increase Row Span เพื่อเพิ่มความกว้างเซลล์ตามแนวตั้งลงมาด้านล่าง หรือเลือก Modify > Table > Increase Column Span เพื่อเพิ่มความกว้างเซลล์ตามแนวนอนไปทางขวา ดังรูป
- การคืนสภาพช่องเซลล์
จากหัวข้อที่ผ่านมาเราได้ขยายขนาดของช่องเซลล์ในแนวตั้ง และแนวนอนเรียบร้อย ในหัวข้อนี้เราสามารถสามารถปรับช่องเซลล์ที่เราขยายคืนสู่สภาพเดิม โดยเลือกคำสั่ง Modify > Table > Decrease Row Span สำหรับการคืนสภาพเซลล์ในแถว หรือ Modify > Table > Decrease Column Span สำหรับการคืนสภาพเซลล์ในคอลัมน์ ดังนี้
ใน Properties Inspector มีคำสั่งที่ใช้กำหนดความกว้างของทั้งตาราง หรือเซลล์ใดๆ ในตาราง
โดยเราสามารถระบุค่าที่เจาะจงสำหรับการปรับขนาดของตารางได้เอง ดังนี้
ปรับความกว้างของทั้งตาราง
เราสามารถปรับขนาดความกว้างของทั้งตารางได้ โดยคลิกเลือกทั้งตาราง จากนั้นกำหนดขนาดความกว้างในช่อง
(กำหนดเป็นเปอร์เซ็นต์เทียบกับความกว้างของหน้าต่างบราวเซอร์ หรือระบุเป็นพิกเซลด้วยขนาดที่เฉพาะเจาะจงก็ได้)
ปรับความสูงและความกว้างของช่องเซลล์
เราสามารถกำหนดขนาดความกว้างของช่องตารางได้อย่างเจาะจง โดยคลิกที่ช่องตารางที่ต้องการปรับขนาด แล้วกำหนดขนาดความกว้างในช่อง
กำหนดความสูงในช่อง โดยมีขั้นตอนดังนี้
การสร้างตารางซ้อนกันนั้น สามารถช่วยในการนำเสนอข้อมูลที่ซับซ้อนได้ ดังนี้
การปรับแต่งสีของตารางใน Properties Inspector มีรายละเอียดดังนี้
Dreamweaver สามารถจัดเรียงข้อมูลในตารางได้หลายรูปแบบ เช่น เรียงลำดับตัวอักษร หรือตัวเลขที่อยู่ในตารางจากค้าอยไปมากหรือมากไปน้อยได้ เป็นต้นโดยใช้คำสั่ง Commands > Sort Table… ซึ่งจะมีการกำหนดค่าต่างๆ ในการจัดเรียงข้อมูลที่อยู่ในตาราง ดังนี้
- Sort By กำหนดคอลัมน์หลักที่จะใช้ในการเรียงลำดับข้อมูล
- Order เลือกวิธีเรียงลำดับข้อมูล
- Then By ถ้าข้อมูลในคอลัมน์ที่กำหนดให้ใช้ในการเรียยงลำดับข้อมูลเกิดซ้ำกัน เราสามารถกำหนดคอลัมน์เพิ่มที่ใช้ในเรียงลำดับข้อมูลได้ในช่อง Then By
- Sort includes the first row เลือกว่าจะเอาข้อมูลในแถวแรกมาเรียงด้วยหรือไม่ โดยปกติข้อมูลแถวแรกจะไม่ถูกนำมาเรียงเพราะ
- Sort header rows ทำการจัดเรียงข้อมูลที่อยู่ภายในแถวของส่วนหัวตารางด้านบนที่เรียกว่า Header (แท็ก <thead>)
- Sort footer rows ทำการจัดเรียงข้อมูลที่อยู่ภายในแถวของส่วนท้ายตารางด้านล่างที่เรียกว่า Footer (แท็ก <tfoot>)
- Keep all row colors the same after the sort has been completed กำหนดให้สีพื้นหลังของเซลล์เป็นเหมือนเดิมหลังจากทำการจัดเรียงข้อมูล