การใช้ตารางในเว็บเพจ

 

กลับหน้าหลัก

การสร้างตารางบนเว็บเพจ

          ลักษณะของตารางบนเว็บเพจ

                    ตาราง (Table) ประกอบด้วยแถว (Row) และคอลัมน์ (Column) ใช้สำหรับแสดงข้อมูลที่ต้องการจัดลำดับ จัดเรียงเนื้อหา และจัดหมวดหมู่ เพื่อความเป็นระบบระเบียบ สะดวกในการค้นหา แก้ไขและนำไปช้งาน

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

                    ภายในตารางนอกจากจะใส่ข้อความแล้ว ยังสามารถใส่รูปภาพ ภาพกราฟิก วัตถุ ตารางซ้อนตาราง ตกแต่งตารางด้วยสีสันต่างๆ และใส่ภาพพื้นหลังได้สวยงาม

          วิธีสร้างตารางบนเว็บเพจ

                    การสร้างตารางบนเว็บเพจ มีขั้นตอน ดังนี้

                    1. เปิดเอกสารที่ต้องการจะสร้างตาราง
                    2. เลือกเมนู Insert > Table
                    3. หรือ เลือกเครื่องมือ    (Table) ที่กลุ่มเครื่องมือ Common หรือ ที่กลุ่มเครื่องมือ Layout

                    4. หรือใช้แป้นพิมพ์ <Ctrl> + <T> จะได้หน้าต่าง Table ดังรูป

                    5. เลือกลักษณะของตาราง ดังนี้

                Row                        จำนวนแถว
                          Column                   จำนวนคอลัมน์
                          Table width            ความกว้งของตาราง
                          Border thickness   ความหนาของเส้นตาราง
                          Cell padding           ระยะห่างระหว่างข้อความในเซลล์กับขอบเซลล์
                          Cell spacing            ระยะห่างระหว่างแต่ละเซลล์ในตาราง
                          Header                     พิมพ์หัวตารางและวางตำแหน่งการพิมพ์หัวตารางตามรูป
                          Caption                     กำหนดหัวข้อตาราง
                          Align caption          การวางหัวข้อของตาราง มีลักษณะการวาง คือ

                                      - default  ใช้ค่าอัตโนมัติที่โปรแกรมกำหนดมาให้
                                      - top
    วางหัวตารางไว้ด้านบน
                                      - bottom   
วางหัวตารางไว้ด้านล่าง
                                      - left
    วางหัวตารางไว้ด้านบน ข้อความชิดซ้าย
                                      - right   
วางหัวตารางไว้ด้านบน ข้อความชิดขวา
                 Summary                คำอธิบายตารางโดยสรุป

                   6. กำหนดค่าต่างๆ ตามที่ต้องการ เช่น สร้างตารางแบบ 3 แถว 4 คอลัมน์ เมื่อคลิกปุ่ม OK จะได้ตารางลักษณะ ดังนี้

กลับ
กลับหน้าหลัก

 

การใส่ข้อมูลในตาราง

                     ตารางที่สร้างเสร็จแล้วสามารถใส่ข้อมูลลงไปได้ 2 ประเภทหลักๆ คือ ข้อมูลข้อความ และข้อมูลรูปภาพหรือวัตถ

          ข้อมูลข้อความ

                     ข้อมูลข้อความ หมายรวมถึง ตัวอักษร ตัวเลข อักษรพิเศษ หรือสัญลักษณ์ต่างๆ มวิธีการใส่ในตาราง ดังนี้ด
                     1  คลิกที่เซลล์ที่จะใส่ข้อความ
                     2. เคอร์เซอร์จะปรากฎอยู่ในช่องเซลล์นั้น พิมพ์ข้อความลงไปเหมือนโปรแกรมเวิร์ด
                     3. ถ้าข้อความยาวมากๆ ใด้กดแป้ม <Enter> เพื่อขึ้นบรรทัดใหม่
                     4. ถ้าต้องการพิมพ์ข้อมูลเพิ่มเติมในเซลล์ใด ก็คลิกที่เซลล์นั้นๆ และพิมพ์ข้อมูลได้ทุกเซลล์

          ข้อมูลรูปภาพ

                     การใส่รูปภาพในเซลล์มีวิธีการเหมือนกับการใส่ภาพในเว็บเพจในบทที่ 4 ที่ได้ศึกษามา กล่าวโดยสรุปได้ ดังนี้
                     1. คลิกที่ช่องเซลล์ที่ต้องการจะใส่รูปภาพ
                     2. คลิกที่เครื่องมือรูปภาพ ( ) หรือ คำสั่ง Insert > Image
                    
 3. จะได้หน้าต่าง Select Image Source เลือกรูปภาพที่ต้องการ แล้วคลิก OK
                     4. ภาพจะแทรกในเซลล์นั้นทันที
                     5. ปรับขนาดของภาพให้เหมาะสมกับตาราง

กลับ
กลับหน้าหลัก

 

การปรับขนาดของตาราง

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

                    2. ปรับขนาดคอลัมน์ เลื่อนเมาส์มาตรงเส้นแนวนอน เมาส์จะเปลี่ยนเป็นรูป        คลิกค้างไว้แล้วลากย่อหรือขยายคอลัมน์

                    3. การขยายทั้งตารางให้เลื่อนเมาส์มาที่ปุ่มจับด้านขวามือล่างสุดของตาราง เมาส์จะเปลี่ยนเป็นรูปลูกศรสองหัวเฉียงๆ () คลิกและลาก เพื่อย่อหรือขยายตารางทั้งหมด

กลับ
กลับหน้าหลัก

 

การเลือกตาราง

                   การเลือกตารางเป็นการเลือกส่วนใดๆ หรือทั้งหมดของตารางเพื่อปรับขนาดหรือจัดการกับตารางนั้น

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

                   การเลือกตารางทั้งหมดมีวิธีทำ 3 วิธี ดังนี้
                   วิธีที่ 1 การใช้เมาส์ เลื่อนเมาส์ไปยังขอบตาราง เมาส์จะเปลี่ยนเป็นรูปลูกศรเฉียงๆ ( ) และมีรูปตารางห้อยอยู่ด้านล่าง ให้คลิกเมาส์
                   วิธีที่ 2 การใช้คำสั่ง คลิกเมาส์ที่ช่องเซลล์ใดๆ ของตาราง แล้วเลือกคำสั่ง Modify > Table > Select Table
                   วิธีที่ 3 ใช้แท็ก <Table>
โดยคลิกที่แท็ก <Table> ที่แถบสถานะ

          เลือกทั้งแถว

                    1. เลื่อนเมาส์ไปยังด้านซ้ายสุดของแถวที่จะเลือก
                    2. เมาส์จะเปลี่ยนเป็นรูปลูกศร () ให้คลิกเมาส์เลือกแถว

          เลือกทั้งคอลัมน

                    1. เลื่อนเมาส์ไปยังขอบบนสุดของคอลัมน์ที่จะเลือก
                    2. เมาส์จะเปลี่ยนเป็นรูปลูกศรชี้ลง () ให้คลิกเมาส์เลือกคอลัมน์

          เลือกเซลล์

                     1. การเลือกเซลล์ๆ เดียวให้คลิกที่ช่องเซลล์นั้น
                     2. คลิกที่แท็ก <td> ที่แถบสถานะ         
                     3. หรือ ใช้แป้นพิมพ์ <Ctrl> + <A>
                

         เลือกหลายเซลล์ที่อยู่ติดกัน

                    1. คลิกเลือกเซลล์แรก (Ctrl + A)
                    2. กดแป้น <Shift> ค้างไว้ แลเว้ลือกเซลล์อื่นๆ

          เลือกกลุ่มเซลล์ที่ไม่ติดกัน

                    1. คลิกเลือกเซลล์แรก
                    2. กดแป้น <Ctrl> ค้าวไว้ แล้วคลิกเลือกเซลล์ที่ต้องการ

กลับ
กลับหน้าหลัก

 

การปรับแต่งรายละเอียดของตาราง

          การปรับแต่งรายละเอียด หรือคุณสมบัติของตาราง เพื่อให้เหมาะสมกับการใช้งานนั้นได้โดยใช้ Property Inspector และเมนูคำสั่ง ดังนี้

          การปรับตารางด้วย Property Inspector

                    เมื่อคลิกเลือกตารางที่ Property Inspector จะปรากฏคุณสมบัติของตารางขึ้นมา สามารถปรับเปลี่ยนได้ตามต้องการ

          การปรับตารางด้วยเมนูคำสั่ง

                    การใช้เมนูคำสั่งในการปรับตาราง มีวิธีการทำ ดังนี้

                    1. คลิกที่เมนู Modify แล้วเลือกคำสั่งย่อย Table
                    2. หรือ คลิกขวาที่ตารางจะได้เมนูลัด เลือกคำสั่งย่อย Table


                                                                                                                          

กลับ
กลับหน้าหลัก

 

การจัดเรียงข้อมูลในตาราง

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

          1. คลิกเลือกตารางที่ต้องการจะจัดเรียงข้อความ
          2. เลือกคำสั่ง Commands > Sort Table...

          3. จะได้หน้าต่าง Sort Table เพื่อกำหนดรายละเอียดการจัดเรียง ดังนี้

                    - Sort by          เรียงลำดับโดย ให้เลือกคอลัมน์แรกที่จะนำมาเรียงลำดับ
                    - Order             ลักษณะการเรียง เช่น เรียงตามตัวอักษร จากน้อยไปหามาก
                    - Then by         แล้วเรียงลำดับตาม เลือกคอลัมน์ที่จะนำมาเรียงลำดับอื่นๆ
                    - Options         ตัวเลือกเพิ่มเติมการเรียง

          4. เลือกรูปแบบการเรียงตามที่ต้องการ เช่น เรียงจากน้อยไปมาก ตามลำดับตัวอักษรซึ่งจะได้ตัวอย่างดังรูป

กลับ
กลับหน้าหลัก

 

การจัดการกับแถว คอลัมน์และเซลล์

          การแทรกแถว

                    1. คลิกขวา ณ ตำแหน่งที่ต้องการจะแทรกแถว
                    2. จะได้เมนูลัด เลือกคำสั่ง Table > Insert Row
                    3. จะมีแถวเพิ่มมาให้ 1 แถว

          การแทรกคอลัมน์

                    
1. คลิกขวา ณ ตำแหน่งที่ต้องการจะแทรกคอลัมน์
                    2. จะได้เมนูลัด เลือกคำสั่ง Table > Insert Column

          การแทรกหลายแถวและคอลัมน์

                    ถ้าต้องการจะแทรกแถวและคอลัมน์จำนวนมากในคราวเดียวกัน มีวิธีการทำ ดังนี้
                    1. คลิกขวา ณ ตำแหน่งที่ต้องการจะแทรกแถวหรือคอลัมน์
                    2. เลือกคำสั่ง Table > Insert Rows or Columns
                    3. จะได้หน้าต่าง Insert Rows or Columns

                    4. ระบุจำนวนแถวหรือคอลัมน์ที่ต้องการ แล้วคลิกปุ่ม OK

          การลบแถวและคอลัมน์

                    1. คลิกเลือกแถวหรือคอลัมน์ที่ต้องการจะลบ
                    2. กดแป้น <Delete> หรือ กดแป้น <Backspace>
                    3. หรือ คลิกขวาเลือกเมนูลัด แล้วเลือกคำสั่ง Table > Delete Row หรือ Delete Column

          การรวมและแบ่งเซลล์

                    บางครั้งเซลล์ในตารางอาจจะมีมากเกินไปจึงต้องรวมเข้าด้วยกันเพื่อลดจำนวนลงหรือต้องการแบ่งแยกเซลล์เพื่อเพิ่มจำนวนให้มากขึ้น ทำได้ดังนี้
                    1. การรวมเซลล์ (Merge Cells) ให้เลือกเซลล์ที่ต้องการจะรวมโดยกดแป้น <Ctrl> ค้างไว้พร้อมเลือกเซลล์ด
                    2. คลิกขวาเลือกคำสั่ง Table > Merge Cells หรือ แป้น <Ctrl> + <Alt> +<M>
                    3. หรือ ใช้เมนูคำสั่ง Modify > Table > Merge Cells
                    4. เซลล์ขะถูกรวมเข้าด้วยกันทันที

                   5. การแบ่งเซลล์ (Split Cells) ให้คลิกขวาเซลล์ที่ต้องการจะแบ่ง
                   6. จะได้เมนูลัด เลือกคำสั่ง Table > Split Cell หรือใช้แป้น <Ctrl> + <Alt> + <S> จะได้หน้าต่าง Split Cells

                   7. เลือกจำนวนแถว หรือ คอลัมน์ที่ต้องการ แล้วคลิก OK

          การจัดการแถวและคอลัมน์ด้วย properties

                   การปรับลักษณะของแถวและคอลัมน์นอกจากจะใช้เมนูคำสั่งแล้ว ยังสามารถใช้ properties Inspector ทั้งกำหนดความกว้าง ความสูง แบ่งเซลล์ และรวมเซลล์ เป็นต้น ดังนี้
                   1. ปรับความกว้างและความสูงของทั้งตาราง

                    2. ปรับความกว้างและความสูงเฉพาะเซลล์

                    การกำหนดความกว้างและความสูงของคอลั น์ให้ใส่เฉพาะตัวเลข ซึ่งหมายถึง มีหน่วยวัดเป็นพิกเซล (Pixel) โดยไม่ต้องใส่เครื่องหมายใดๆ ตามหลังตัวเลข

กลับ
กลับหน้าหลัก

 

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

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

                    1. คลิกเลือกตารางหรือช่องเซลลืที่ต้องการจะใส่สีพื้นหลังและเส้นขอบ
                    2. คลิกเลือก     จะแสดงถาดสีให้จำนวนมาก
                    3. คลิกเลือกสีที่ต้องการ


      

                    4. การเลือกสีของเส้นขอบให้คลิกที่      จะได้ถาดสีขึ้นมา คลิกเลือกสีที่ต้องการ (ควรกำหนดขนาดของเส้นขอบที่ช่อง     ถ้าเป็น 0 จะไม่แสดงสีเส้นขอบ)

          การใส่ภาพพื้นหลังตาราง

                    นอกจากจะตกแต่งตารางด้วยสีสันต่างๆแล้ว ยังสามารถนำภาพมาเปฌนพื้นหลังของตารางได้อีกด้วย โดยมีวิธีทำ ดังนี้
                    1. คลิกเลือกตารางทั้งตาราง หรือ เลือกบางเซลล์ก็ได้
                    2. คลิกที่ปุ่ม       ของช่อง Bg Image( )
                    3.จะได้หน้าต่าง Select Image Source คลิกเลือกภาพที่ต้องการจะนำไปสร้างพื้นหลัง เสร็จแล้วคลิกปุ่ม OK

                   4. ภาพจะถูกนำไปสร้างเป็นพื้นหลังทันที

         การเปลี่ยนขนาดเส้นตาราง

                   เส้นตารางที่สร้างไว้นั้น หากไม่ต้องการแสดงผลบน Browser ก็สามารถสั่งให้ซ่อนเส้นตาราง หรือจะเปลี่ยนขนาดของเส้นให้มีขนาดใหญ่ขึ้น หรือเล็กลงก็ได้ ดังนี้
                    1. คลิกเลือกตารางหรือเส้นตารางที่ต้องการจะเปลี่ยนขนาดเส้นขอบ
                    2. ถ้าต้องการให้ซ่อนเส้นขอบให้เปลี่ยนเป็นเลข 0

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

                    4.ถ้าต้องการเปลี่ยนตารางให้แก้ไขตัวเลขในช่อง Border เช่น 1 2 3 ...

กลับ
กลับหน้าหลัก

 

การสร้างตารางซ้อนตาราง

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

          การสร้างตารางซ้อนตารางทำได้ ดังนี้
          1. คลิกที่เซลล์ที่ต้องการจะสร้างตารางซ้อนตาราง
          2. คลิกที่ทูลบาร์ตาราง (    )
          3. กำหนดรายละเอียดของตารางที่หน้าต่าง Table
          4. คลิก OK จะได้ตารางซ้อน

          5. การปรับแต่งตารางที่ซ้อนกันสามารถทำได้เหมือนตารางปกติ แต่จะมีผลทำให้ตารางใหญ่ขยับตำแหน่งไปด้วย

กลับ
กลับหน้าหลัก

 

การใช้ตารางอัตโนมัติ

          ตารางอัตโนมัติเป็นตารางสำเร็จรูปที่โปรแกรมสร้างเอาไว้ให้เลือกใช้ได้ง่ายๆ เพียงแต่ผู้ใช้สร้างตารางและกรอกรายละเอียดในตารางไว้ แล้วเลือกรูปแบบสำเร็จ ก็จะได้ตาราง รูปแบบนั้นทันที การใช้ตารางอัตโนมัติมีวิธีการทำ ดังนี้
          1.สร้างตารางโดยกรอกข้อมูลให้ครบถ้วน
          2.เลือกคำสั่ง Command > Format Table จะได้หน้าต่าง Format Table ดังรูป

          3. เลือกรูปแบบที่ต้องการ (ดูตัวอย่าง) เช่น DblRows : Cyan
          4. คลิก OK จะได้ตารางตามที่เลือกไว้

กลับ
กลับหน้าหลัก

 

การนำเข้าตารางจากโปรแกรมอื่น

          ถ้ามีข้อมูลที่พิมพ์ไว้แล้วด้วยโปรแกรมอื่น เช่น World  Excel ฯลฯ ก็สามารถนำมาใช้ใน Dreamweaver ได้โดยไม่ต้องพิมพ์ใหม่ ในรูปแบบเท็กซ์ไฟล์ (.txt) และสามารถแปลงไฟล์จาก โปรแกรม Dreamweaver ไปใช้ในโปรแกรมอื่นได้ในรูปบบไฟล์ .csv ดังนี้
          1. คลิกเลือกตำแหน่งที่จะนำไฟล์จากโปรแกรมอื่นเข้ามาไว้
          2. คลิกเลือกที่เครื่องมือ   จากกลุ่มเครื่องมือ Layout หรือ เลือกคำสั่ง Insert > Table Object > Import Tabular Data
          3. จะได้หน้าต่าง Import Tabular Data คลิกเลือกไฟล์ที่ช่อง Browse

         4. กำหนดรายละเอียดที่ต้องการแล้วคลิกปุ่ม OK
         5.ข้อมูลจะถูกนำมาแทรกไว้ทันที

หมายเหตุ : ถ้าไม่สามารถแทรกไฟล์ได้ ให้เปิดไปที่ไฟล์ต้นฉบับแล้วบันทึกใหม่โดยเปลี่ยนนามสกุลให้เป็น..txt และบางครั้งโปรแกรมอาจจะไม่รับฟอนต์ภาษาไทย จึงควรเลือกฟอนต์ มาตรฐาน

          6. การนำข้อมูลในโปรแกรม Dreamweaver ออกมาใช้ในโปรแกรมอื่น ทำได้โดยคลิกเลือกช่วงของตารางข้อมูล
          7. แล้วเลือกคำสั่ง File > Export > Table จะได้หน้าต่าง Export Table

          8. เลือกลักษณะการนำออกข้อมูลแล้วคลิกปุ่ม Export จะได้หน้างต่าง Export Table as


          9. ตั้งชื่อไฟล์และเลือกไดรฟ์ที่จะนำข้อมูลออกไปไว้ แล้วคลิกปุ่ม save
         10. ข้อมูลจะถูกนำไปบันทึกไว้ในชื่อที่กำหนดทันที    

กลับ
กลับหน้าหลัก