lesson5_KhruDaony

บทที่ 5
ตารางกับการออกแบบเวบ็ เพจ

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

การสร้างตาราง

1. สว่ นประกอบของตาราง
ตาราง (Table) ประกอบด้วยคอลัมน์ (Column) ซึ่งอยู่ในแนวต้ัง และแถว (Row) ใน

แนวนอน มีช่องเล็ก ๆ ท่ีเกิดจากจุดตัดของคอลัมน์และแถว เรียกว่าเซลล์ (Cell) จากภาพที่ 5.1 เป็น
ตารางท่ปี ระกอบดว้ ยคอลัมน์จำนวน 3 คอลัมน์ และแถวจำนวน 3 แถว

คอลัมน์

แถว เซลล์

ภาพที่ 5.1 สว่ นประกอบของตาราง (Table)

2. การสรา้ งตาราง

การสรา้ งตารางของโปรแกรม Macromedia Dreamweaver 8 ทำได้ดงั นี้คือ (ดภู าพที่ 5.2)

1. คลิกเมาสท์ ่ตี ำแหนง่ ทตี่ อ้ งการสรา้ งตาราง

2. คลิกแถบคอมมอน (common)บนแถบเครือ่ งมือแทรก

3. คลิกเคร่ืองมือเทเบ้ิล(Table) เพื่อสร้างตาราง จะปรากฏไดอะล็อกบ็อกซ์ชื่อ (Table)

ขนึ้ มา

4. กำหนดคุณสมบตั ขิ องตารางดงั รายละเอยี ดต่อไปนี้

Rows ระบุจำนวนแถว

Columns ระบุจำนวนคอลมั น์

2

Table width ความกวา้ งของตาราง หนว่ ยทใ่ี ชจ้ ะเปน็ เปอรเ์ ซน็ ต์ (Percent)

หรือพิกเซล (Pixcls)

Border thickness ความหนาของขอบตาราง

Cell Padding ระยะหา่ งระหวา่ งข้อความในตารางกับขอบตาราง

Cell Spacing ระยะหา่ งระหว่างแตล่ ะเซลล์ในตาราง

5. กำหนดคอลมั นห์ รอื แถวสำหรบั เปน็ หวั เรอื่ งของตาราง (ถ้าตอ้ งการ)

None ไมก่ ำหนด (ตารางไมม่ หี วั เร่อื ง)

Left ใหค้ อลัมนซ์ ้ายสุดเป็นหัวเร่อื ง

Top ใหแ้ ถวบนสุดเป็นหัวเร่อื ง

Both ให้แถบบนสดุ และคอลัมน์ซา้ ยสุดเปน็ หัวเรอื่ ง

6. กำหนดตัวเลอื กสำหรบั เสรมิ การใช้งานของตาราง (ถา้ ต้องการ)

Caption ข้อความแสดงกำกับตาราง

Align caption การจัดตำแหนง่ ของขอ้ ความแสดงกำกับตาราง (Caption)

Summary ข้อความสรุปเก่ียวกับตาราง (ใช้สำหรับโปรแกรมที่อ่าน

ขอ้ ความบนหนา้ จอเป็นเสยี ง แต่จะไม่ปรากฏบนเว็บเพจ)

7. คลิกปมุ่ OK

ภาพที่ 5.2 การสรา้ งตาราง (Table)

3. การใส่เนื้อหาในตาราง
เนื้อหาที่นำมาแทรกในตาราง สามารถแทรกได้เกือบทุกชนิด เช่น ข้อความ (Text)

ภาพกราฟิก (Graphic) สื่อประสม (Multimedia) หรือแม้แต่การสร้างตารางย่อยซ้อนไว้ในภายในเซลล์
ของตารางใหญ่ โดยสามารถทำได้ดังน้ี (ดภู าพที่ 5.3)

3

1. คลิกเพื่อวางเคอรเ์ ซอร์ลงในเซลลท์ ี่ตอ้ งการใส่ข้อมลู
2. ใชค้ ำสั่งเพอ่ื พมิ พ์ขอ้ ความ หรือแทรกข้อมูลชนิดอน่ื ๆ ลงในเซลล์ที่ต้องการ
3. การเล่ือนเคอรเ์ ซอร์ไปยังเซลล์ใหม่ ซ่ึงทำได้หลายวธิ ี ดังน้คี ือ

3.1 คลิกเมาส์ทเ่ี ซลล์ทต่ี อ้ งการ
3.2 กดแป้นพมิ พล์ ูกศรท่ีคียบ์ อร์ด
3.3 กดแป้นพมิ พ์ [Tab]

ภาพที่ 5.3 ตารางที่มีข้อมูลท้งั แบบขอ้ ความและกราฟิก

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

4.1 ปรบั ขนาดคอลมั น์ จากนั้น
วางเมาส์ที่เส้นคอลัมน์ที่ต้องการปรับ สังเกตว่าเมาส์จะเปลี่ยนเป็นรูป

แดรกเมาสไ์ ปในแนวนอนหรอื ทางดา้ นขวามอื ให้ไดข้ นาดตามที่ตอ้ งการ

4.2 ปรบั ขนาดแถว จากน้ัน
วางเมาส์ที่เส้นของแถวท่ีต้องการปรับ สังเกตว่าเมาส์จะเปล่ียนเป็นรูป

แดรกเมาส์ไปในแนวตัง้ หรือทางด้านลา่ งให้ได้ขนาดตามทีต่ ้องการ

5. การเลอื กส่วนตา่ ง ๆ ของตาราง
ตารางคือวัตถุหรือออบเจ็กต์หน่ึงเช่นเดียวกับข้อความ หรือรูปภาพ ดังนั้นการปรับแต่งตาราง

เชน่ สี ขนาด หรอื รปู แบบตา่ ง ๆ ในตาราง จะต้องเร่ิมจากขนั้ ตอนของการเลอื กสว่ นของตารางก่อนเสมอ

5.1 การเลือกแถว
5.1.1 วางเซลลพ์ อยเตอร์หน้าแถวทีต่ อ้ งการ โดยสังเกตเมาสพ์ อยเตอร์จะเปลี่ยน
เป็นรปู 

5.1.2 คลกิ เมาส์ 1 ครง้ั หรอื แครกเมาสไ์ ปตามจำนวนแถวทีต่ ้องการ

กรณที ตี่ ้องการเลือกหลายแถวตดิ ต่อกัน

4

5.2. การเลอื กคอลัมน์
5.2.1 วางเซลล์พอยเตอรบ์ นคอลมั นท์ ีต่ ้องการ โดยสงั เกตเมาส์พอยเตอรจ์ ะเปลี่ยน
เป็นรูป 
5.2.2 คลกิ เมาส์ 1 ครั้ง หรือแดรกเมาสไ์ ปตามจำนวนคอลมั นท์ ่ตี ้องการ กรณที ่ีต้องการ
เลอื กหลายคอลมั น์ตดิ ต่อกนั

5.3. การเลือกเซลล์
5.3.1 การเลือกเพียง 1 เซลล์ ทำไดโ้ ดยคลิกเมาสเ์ พอ่ื วางเคอรเ์ ซอรใ์ นเซลล์นน้ั ๆ
5.3.2 การเลอื กหลายเซลล์ต่อเน่อื งกนั ใหค้ ลิกเมาสท์ ี่เซลลแ์ รก จากนน้ั แดรกเมาส์
ใหค้ รอบคลุมเซลล์ทงั้ หมดท่ีตอ้ งการ

5.4. การเลอื กทัง้ ตาราง
5.4.1 วางเซลลพ์ อยเตอรท์ ีม่ ุมบนซ้าย หรอื มุมล่างขวาของตาราง สงั เกต
เมาส์พอยเตอร์จะเปล่ียนเปน็ รปู
5.4.2 คลิกเมาส์ 1 ครงั้

6. การแทรกแถว และคอลมั น์
6.1 การเพ่ิมแถว
6.1.1 วางเคอรเ์ ซอรท์ แ่ี ถวทตี่ ้องการแทรก
6.1.2 คลิดเมาส์ปุ่มขวา แลว้ คลิกคำส่ัง Table Insert Row
6.2 การเพิ่มคอลัมน์
6.2.1 ระบายแถบสีท่คี อลัมนท์ ่ตี ้องการแทรก
6.2.2 คลิกเมาส์ปุม่ ขวา แล้วเลือกคำส่งั Table Insert Column

7. การลบแถว คอลัมน์ และตาราง
7.1 คลิกเลอื กแถว คอลัมน์ หรือตาราง ทต่ี ้องการลบ
7.2 กดแปน้ พิมพ์ [Delete]

การปรบั แต่งคณุ สมบตั ขิ องตาราง

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

1. การปรับแต่งตาราง
1.1 คลกิ เลอื กตารางที่ต้องการปรับแต่ง
1.2 กำหนดค่าในพาเนลกำหนดคณุ สมบัติ ซึง่ มีรายละเอยี ดดังนี้คือ (ดูภาพท่ี 5.4)

5

จำนวนแถว ความสูงและ ระยะหา่ ง การจดั วาง
และคอลมั น์ ความกวา้ งของตาราง ระหว่างข้อมลู ตำแหน่งตาราง

ช่ือตาราง

สีของพื้นตาราง ใส่รปู เปน็ พื้นหลงั สขี องเสน้ ขอบ ขนาดขอบตาราง
ของตาราง ตาราง

ภาพที่ 5.4 คณุ สมบัติของตาราง (Table Properties)

Table ID ชอื่ ตาราง

Rows จำนวนแถว

Cols จำนวนคอลมั น์

W / H ความกวา้ ง / ความสูง หนว่ ยเปน็ เปอร์เซ็นต์ % หรือพิกเซล (Pixel)

CellPad ระยะหา่ งระหว่างขอบเซลล์กับเนื้อหาภายในเซลล์

CellSpace ระยะหา่ งระหวา่ งเซลลแ์ ต่ละเซลล์

Align จัดตารางให้อยูช่ ิดซา้ ย ชดิ ขวา หรอื อยูก่ งึ่ กลางหนา้ เวบ็ เพจ

Border ความหนาของเสน้ ขอบตาราง

Bg color สีพ้ืนของตาราง

Brdr สีเส้นของตาราง

Bg Image กำหนดรปู ภาพให้เป็นพน้ื หลงั

Clear column Widths ยกเลิกคา่ ความกวา้ งของทกุ คอลัมน์

Clear Row Heights ยกเลกิ คา่ ความสูงของทกุ แถว

Convert Table Widths to Pixels เปล่ียนหน่วยวดั ของความกว้างเป็นพกิ เซล

Convert Table Widths to Percent เปลี่ยนหนว่ ยวดั ของความกวา้ งเป็นเปอรเ์ ซ็นต์

Convert Table Heights to Pixels เปล่ยี นหนว่ ยวัดของความสงู เปน็ พิกเซล

Convert Table Heights to Percent เปล่ยี นหนว่ ยวดั ของความสูงเป็นเปอรเ์ ซน็ ต์

2. การปรับแต่งแถว คอลมั น์ และเซลล์
การป รับ แต่งคุณ สมบั ติของแถว คอลัมน์ และเซลล์ ในโป รแกรม Macromedia

Dreamweaver 8 ทำได้โดยเลือกแถว คอลัมน์ และเซลล์ที่ต้องการ จากนั้นปรับแต่งคุณสมบัติท่ีพาเนล
กำหนดคณุ สมบตั ิ ดังนี้คอื

6

2.1 คลิกเลอื กแถว คอลัมน์ หรือเซลล์ทตี่ อ้ งการปรับแตง่
2.2 กำหนดค่าในพาเนลกำหนดคณุ สมบตั ิ ซ่ึงมรี ายละเอยี ดดงั นี้คอื (ดภู าพท่ี 5.5)

การรวม จัดวางขอ้ มลู สีของขอบ ใสภ่ าพเปน็ พนื้ หลัง
หรือแยกเซลล์ แนวตง้ั / แนวนอน ขนาดของแถว สพี ื้น

ภาพที่ 5.5 คณุ สมบัตขิ องแถว (Row Properties)

Merges selected cells using spans รวมเซลลห์ ลายเซลล์เปน็ 1 เซลล์
Splits cell into rows or columns แยกเซลล์ออกเป็นแถวหรือคอลมั น์
Horz จัดวางข้อมลู แนวนอน
Vert จัดวางข้อมลู แนวตัง้
W / H ความกว้าง / ความสูง หน่วยเป็นเปอรเ์ ซน็ ต์ % หรือพกิ เซล (Pixel)
No warp ไม่ตัดคำอัตโนมัติ
Header กำหนดข้อความเปน็ หวั ตาราง
Bg Image กำหนดรปู ภาพให้เป็นพน้ื หลงั ของตาราง
Bg color สพี ืน้ ของตาราง
Brdr สีเส้นของแถว คอลมั น์ หรือเซลล์

3. คำส่งั เกีย่ วกับการปรบั แตง่ ตาราง
นอกจากการปรับแต่งตารางโดยการใช้พาเนลกำหนดคุณสมบัติแล้ว ผู้ออกแบบยังสามารถ

ปรับแต่งตารางได้โดยการใช้คำส่งั ตามวธิ ีการดังนีค้ อื
1. เลอื กแถว คอลัมน์ หรอื เซลล์ ที่ตอ้ งการปรบั แตง่
2. คลกิ คำส่ัง Modify  Table (ดูภาพท่ี 5.6) หรอื คลิกเมาส์ป่มุ ขวา แล้วคดิ คำส่งั Table

7

ภาพท่ี 5.6 ปรบั แตง่ ตารางด้วยคำสัง่ Modify  Table

เทคนิคการออกแบบเว็บเพจดว้ ยตาราง

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

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

8

บทสรุป

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

ตาราง ประกอบด้วยคอลัมน์ ซึ่งอยู่ในแนวตั้ง และแถวซึ่งอยู่ในแนวนอน มีช่องเล็ก ๆ ท่ีเกิดจาก
จดุ ตดั ของคอลมั นแ์ ละแถว เรียกว่าเซลล์

การสร้างตาราง ทำได้โดยคลิกแถบคอมมอน (Common) บนแถบเคร่ืองมือแทรก แล้วคลิก
เครอื่ งมือเทเบล้ิ (Table) จากนน้ั กำหนดจำนวนแถวและคอลัมน์ท่ตี อ้ งการ

เนื้อหาที่นำมาใส่ในตาราง สามารถใส่เนื้อหาได้เกือบทุกชนิด เช่น ข้อความ (Text) ภาพกราฟิก
(Graphic) สื่อประสม (Multimedia) หรือแม้แต่การสร้างตารางย่อยซ้อนไว้ภายในเซลล์ของตารางใหญ่
โดยการวางเคอรเ์ ซอร์ในเซลล์ทตี่ ้องการ แล้วพมิ พข์ อ้ ความหรือแทรกขอ้ มลู ชนิดอื่น ๆ โดยการใช้คำสัง่ ตาม
ชนิดของขอ้ มูล

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

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

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

9

คำถามทา้ ยบทที่ 5

คำชแี้ จง
1. คำถามทา้ ยบทท่ี 5 เพอื่ ทบทวนความรู้ของนักศึกษา เรอ่ื งตารางกบั การออกแบบเวบ็ เพจ
2. การตอบคำถาม ใหน้ กั ศึกษาเดิมขอ้ ความลงในช่องว่างให้สมบรู ณ์

1. การสรา้ งตาราง (Table) ของโปรแกรม Macromedia Dreamweaver ทำได้โดยคลกิ ท่แี ถบ.............
...............................................................บนแถบเคร่ืองมือแทรก (Insert Bar) จากน้นั คลิกเคร่ืองมือ......
..................................แลว้ กำหนดจำนวนแถวทรี่ ายการ........................กำหนดจำนวนคอลมั นท์ ่รี ายการ
..................................กำหนดความกว้างของตารางท่ีรายการ..................................................................

2. เนอื้ หาทน่ี ำมาแทรกในตาราง สามารถแทรกเนื้อหาได้เกือบทุกชนดิ เชน่ .................................................
.......................................................................................................... .......................................................
.......................................................................................................... .......................................................

3. เม่อื ตอ้ งการกำหนดระยะห่างระหว่างข้อมูลในตารางกับขอบตาราง ตอ้ งกำหนดท.่ี .................................
ในพาเนลกำหนดคณุ สมบัตขิ อง ตาราง (Table)

4. เม่อื ตอ้ งการกำหนดระยะห่างระหวา่ งแตล่ ะเซลล์ในตาราง ต้องกำหนดท.ี่ ................................................
ในพาเนลกำหนดคุณสมบตั ิของ ตาราง (Table)

5. คุณสมบตั ิ Merges selected cells using spans ใช้สำหรบั ..................................................................
6. คณุ สมบตั ิ Splits cell into rows or columns ใช้สำหรบั .....................................................................
7. การออกแบบเวบ็ เพจด้วยตารางพอสรปุ ได้ดังนี้ คอื

7.1............................................................................................................................................................
7.2............................................................................................................................................................
7.3............................................................................................................................................................

10

เอกสารอา้ งอิง

บญุ สืบ โพธศิ์ รี และอำภา กุลธรรมโยธนิ (2547). การพฒั นาเว็บเพจดว้ ยโปรแกรมสำเรจ็ รูป.
กรุงเทพฯ: ศูนยส์ ่งเสรมิ อาชีวะ.

ดวงพร เก๋ยี งคำ. (2549). อินไซต์ Dreamweaver 8. กรงุ เทพฯ: โปรวชิ ่ัน.
ดวงพร เก๋ียงคำ. (2550). ค่มู ือสรา้ งเวบ็ ไซต์ดว้ ยตนเอง. กรงุ เพทฯ: โปรวิช่นั .
บรรณาธิการ นาถสงค์. (2550). Dreamweaver 8 Workshop. กรุงเทพฯ: ซัคเซส มีเดยี .
บอกอ แรมโบ.้ (2550). มอื ใหม่ Dreamweaver 8. กรุงเทพฯ: ซัคเซส มีเดยี .
พนั จนั ทร์ ธนวัฒนเสถียร. (2550). Dreamweaver 8 ฉบับเรยี นลัด. กรงุ เทพฯ: ซัคเซส มีเดีย.
สทิ ธิชยั ประสานวงศ์. (2550). สรา้ งสรรคเ์ ว็บสวยด้วย Dreamweaver 8. กรุงเทพฯ: ซอฟทเ์ พรส.