แท็ ก คำสั่ง ตาม ข้อ ใด ต่อ ไป นี้ ที่ นำ มา ใช้ สร้าง ตาราง

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

 การสร้างตารางในโปรแกรม 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 ดังนี้

การแทรกคอลัมน์
   เราสามารถแทรกคอลัมน์เพื่อเพิ่มคอลัมน์ในตารางได้โดยขั้นตอนต่อไปนี้

  1. คลิกที่เซลล์ตรงคอลัมน์ที่จะแทรก
  2. หากต้องการแทรกคอลัมน์ ให้เลือกเมนูคำสั่ง  Modify >  TableInsert  Column

 หากต้องการแทรกคอลัมน์ทางซ้ายหรือทางขวาของเซลล์นั้น ให้เลือกเมนูคำสั่ง  Modify > Table > Insert Rows or Columns แล้วเลือกตัวเลือกดังรูป

การแทรกแถว
นอกจากเราสามารถแทรกคอลัมน์ได้แล้วเรายังสามารถแทรกแถวได้เช่นเดียวกัน โดยวิธีต่อไปนี้

  1. คลิกที่เซลล์ตรงแถวที่จะแทรก
  2. หากต้องการแทรกแถว ให้เลือกเมนูคำสั่ง Modify > Table > Insert Row 

หากต้องการแทรกแถวด้านบนหรือด้านล่างของเซลล์นั้น ให้เลือกเมนูคำสั่ง  Modify > Table > Insert Rows or Columns แล้วเลือกตัวเลือกดังรูป

การลบแถวหรือคอลัมน์  เราสามารถลบแถวหรือคอลัมน์ได้โดยวิธีต่อไปนี้

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

การรวมเซลล์
            เราสามารถรวมเซลล์ในตารางได้โดยวิธีต่อไปนี้

  1. เลือกเซลล์ที่จะรวม(ต้องเป็นเซลล์ที่ติดกัน) โดยกด <Ctrl> ค้างไว้พร้อมกับเลือกเซลล์ที่จะรวมกัน
  2. เลือกเมนูคำสั่ง Modify > Table  > Merge Cells หรือ คลิกที่ปุ่ม  ( Merge Cells)  ในพาเนล Properties

การแบ่งเซลล์
             เราสามารถแบ่งเซลล์ได้โดยวิธีต่อไปนี้

  1. คลิกที่เซลล์ที่ต้องการแบ่ง
  2. เลือกเมนูคำสั่ง Modify > Table  > Split Cell  หรือ คลิกที่ปุ่ม   (Split Cell)  ในพาเนล Properties
  3. จะปรากฏหน้าต่าง 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  กำหนดให้สีพื้นหลังของเซลล์เป็นเหมือนเดิมหลังจากทำการจัดเรียงข้อมูล

 

Toplist

โพสต์ล่าสุด

แท็ก

แปลภาษาไทย ไทยแปลอังกฤษ โปรแกรม-แปล-ภาษา-อังกฤษ พร้อม-คำ-อ่าน lmyour แปลภาษา ห่อหมกฮวกไปฝากป้าmv แปลภาษาอาหรับ-ไทย แปลภาษาอังกฤษเป็นไทย pantip แอพแปลภาษาอาหรับเป็นไทย ค้นหา ประวัติ นามสกุล ห่อหมกฮวกไปฝากป้า หนังเต็มเรื่อง ไทยแปลอังกฤษ ประโยค Terjemahan เมอร์ซี่ อาร์สยาม ล่าสุด แปลภาษาจีน กรมส่งเสริมการปกครองท้องถิ่น ่้แปลภาษา Google Translate ข้อสอบคณิตศาสตร์ พร้อมเฉลย พร บ ระเบียบบริหารราชการแผ่นดิน ระเบียบกระทรวงการคลังว่าด้วยการจัดซื้อจัดจ้างและการบริหารพัสดุภาครัฐ พ.ศ. 2560 วิธีใช้มิเตอร์วัดไฟดิจิตอล สหกรณ์ออมทรัพย์กรมส่งเสริมการปกครอง ส่วนท้องถิ่น ห่อหมกฮวก แปลว่า Bahasa Thailand Thailand translate mu-x มือสอง รถบ้าน การวัดกระแสไฟฟ้า ด้วย แอมมิเตอร์ การ์ดแคปเตอร์ซากุระ ภาค 4 ก่อนจะนิ่งก็ต้องกลิ้งมาก่อน เนื้อเพลง ก่อนจะนิ่งก็ต้องกลิ้งมาก่อน แคปชั่น พจนานุกรมศัพท์ทหาร ภูมิอากาศ มีอะไรบ้าง สถาบันพัฒนาบุคลากรท้องถิ่น อาจารย์ ตจต อเวนเจอร์ส ทั้งหมด เขียน อาหรับ แปลไทย ใบรับรอง กรมพัฒนาฝีมือแรงงาน Google map Spirited Away 2 spirited away ดูได้ที่ไหน tor คือ จัดซื้อจัดจ้าง กินยาคุมกี่วัน ถึง ปล่อยในได้ ธาตุทองซาวด์เนื้อเพลง บช.สอท.ตำรวจไซเบอร์ ล่าสุด บบบย มิติวิญญาณมหัศจรรย์ ตอนจบ รหัสจังหวัด อําเภอ ตําบล ศัพท์ทางทหาร military words สอบ O หยน