ข้อใด ไม่ใช่ วิธีการสร้างตาราง

เลือกเซลล์ภายในข้อมูลของคุณ
เลือก หน้าแรก > จัดรูปแบบเป็นตาราง
เลือกสไตล์ของตารางของคุณ
ในกล่องโต้ตอบ สร้าง ตาราง ให้ตั้งค่าช่วงเซลล์ของคุณ
ให้มาร์กอัปว่าตารางของคุณมีส่วนหัวหรือไม่
เลือก ตกลง

แทรกตารางในสเปรดชีตของคุณ ดูภาพรวมของExcelตารางเพื่อดูข้อมูลเพิ่มเติม
เลือกเซลล์ภายในข้อมูลของคุณ
เลือก หน้าแรก > จัดรูปแบบเป็นตาราง
เลือกสไตล์ของตารางของคุณ
ในกล่องโต้ตอบ สร้าง ตาราง ให้ตั้งค่าช่วงเซลล์ของคุณ
ให้มาร์กอัปว่าตารางของคุณมีส่วนหัวหรือไม่
เลือก ตกลง

เมื่อต้องการเพิ่มตารางเปล่า ให้เลือกเซลล์ที่คุณต้องการให้รวมอยู่ในตารางแล้วคลิก แทรก > ตาราง

เมื่อต้องการจัดรูปแบบข้อมูลที่มีอยู่เป็นตารางโดยการใช้สไตล์ตารางเริ่มต้น ให้ทำดังนี้

เลือกเซลล์ที่มีข้อมูลอยู่
คลิก หน้าแรก > ตาราง > จัดรูปแบบเป็นตาราง
ถ้าคุณไม่เลือกกล่อง ตารางของฉัน มีส่วนหัวของตาราง Excel สำหรับเว็บ ส่วนหัวด้วยชื่อเริ่มต้น เช่น คอลัมน์1 และ คอลัมน์2 เหนือข้อมูล เมื่อต้องการเปลี่ยนชื่อส่วนหัวเริ่มต้น ให้ดับเบิลคลิกแล้วพิมพ์ชื่อใหม่

หมายเหตุ: คุณไม่สามารถเปลี่ยนการจัดรูปแบบตารางเริ่มต้นใน Excel สำหรับเว็บ ได้

การใช้ตาราง เหมาะสำหรับการนำเสนอข้อมูลจำนวนมากที่ต้องการจัดให้เป็นระเบียบ โดยอยู่ในรูปของแถวและคอลัมน์ เช่น จัดเก็บคะแนน, ข้อมูลหุ้น, และการแสดงยอดขายสินค้าชนิดต่างๆ ในเว็บเพจให้อยู่ในตำแหน่งที่ต้องการได้อย่างเป็นสัดส่วนอีกด้วย
นอกจากนี้ เรายังสามารถแทรกภาพรวมกับข้อความในช่องตารางแต่ละช่อง เพื่อแบ่งแยกข้อความที่ใช้ประกอบภาพในแต่ละภาพได้อย่างชัดเจน และเป็นระเบียบ

การสร้างตารางในโปรแกรม 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, Clear Column Widths	คลิกเมาส์เพื่อลบค่าความสูง หรือความกว้างของแถวหรือคอลัมน์
Convert Table Widths to Pixel, Percent	คลิกเมาส์เพื่อแปลงค่าความกว้างของตารางที่เรากำหนดไว้จากพิกเซลเป็นค่าเปอร์เซ็นต์หรือจากค่าเปอร์เซ็นต์เป็นค่าพิกเซล
Class	ใช้ในกรณีที่เรากำหนดค่า CSS ให้กับตาราง
Bg Image, Bg Color, Brdr Color (Bord 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 กำหนดให้สีพื้นหลังของเซลล์เป็นเหมือนเดิมหลังจากทำการจัดเรียงข้อมูล