กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ

ใบเนอหา หนาท

แผนท :

หนวยท 6 การสรางตารางบนเวบเพจ

สาระการเรยนร 6.1 การสรางตารางบนเวบเพจ 6.2 การใสขอมลลงในตาราง 6.3 การจดการกบแถว คอลมน และเซลล 6.4 การตกแตงตาราง 6.5 การน าเขาตารางจากโปรแกรมอน

วตถประสงคเชงพฤตกรรม 6.1 อธบายการสรางตารางบนเวบเพจได 6.2 อธบายการใสขอมลในตารางได 6.3 อธบายการปรบแปรงจ านวนแถว คอลมน และเซลลได 6.4 อธบายการตกแตงตารางได 6.5 อธบายการน าเขาตารางจากโปรแกรมอนได

กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ

ใบเนอหา หนาท

แผนท : วธการสรางตารางบนเวบเพจ มขนตอน ดงน 1. คลกต าแหนงทตองการสรางตาราง เลอกเมน Insert > Table

จะปรากฏหนาตาง Table ดงรป

ก าหนดคาตางๆตามความตองการ เสรจแลวคลก OK จะไดตารางดงน

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

จ านวนแถว

ความกวางของตาราง

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

ระยะหางระหวางขอความกบขอบเซลล ระยะหางระหวางแตละเซลลในตาราง

ก าหนดหวขอตาราง ค าอธบายตารางโดยสรป

จ านวนคอลมน

การก าหนดหวขอหลกของตาราง

กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ

ใบเนอหา หนาท

แผนท :

6.2.1 การใสขอความในตาราง มวธการใสขอความในตาราง ดงน 1. คลกทเซลลทจะท าการใสขอความ 2. เคอรเซอรจะปรากฏอยในชองเซลลนน พมพขอความลงในไปในตาราง 3. ถาตองการพมพขอมลลงเซลลใดใหน าเมาสไปคลกทเซลลนนๆ

6.2.2 การใสรปภาพในตาราง มวธการใสรปภาพในตาราง ดงน 1. คลกทเซลลทตองการจะใสรปภาพ

6.2 การใสขอมลในตาราง

กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ

ใบเนอหา หนาท

แผนท : จากนนจะปรากฏหนาตาง Select Image Source เลอกรปแบบทตองการแลวคลก OK

ภาพแทรกในเซลล ท าการปรบขนาดของภาพใหเหมาะสมกบตาราง

กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ

ใบเนอหา หนาท

แผนท :

6.3.1 การแทรกแถว 1. คลกบรเวณแถวทตองการแทรกตาราง แลวคลกค าสง Modifly > Table > Insert Row

จะมแถวเพมขนมา 1 แถว

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

กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ

ใบเนอหา หนาท

แผนท : 6.3.2 การแทรกคอลมน 1. คลกบรเวณคอลมนทตองการแทรก แลวคลกค าสง Modifly > Table > Insert Column

จะมคอลมนเพมขนมา 1 คอลมน

กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ

ใบเนอหา หนาท

แผนท : 6.3.3 การแทรกหลายแถวหลายคอลมน 1. คลกบรเวณแถวหรอคอลมนทตองการแทรก แลวคลกค าสง Modifly > Table > Insert Row or Column

จะปรากฏหนาตาง Insert Rows or Columns ระบจ านวนแถวและคอลมนทตองการ แลวคลกปม OK

เลอกแถวหรอคอลมน

ระบจ านวนแถว หรอคอลมน

กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ

ใบเนอหา หนาท

แผนท : 6.3.4 การลบแถวและคอลมน 1. คลกบรเวณแถวหรอคอลมนทตองการจะลบ จากนนคลกขวา เลอกค าสง Table > Delete Row หรอ Delete Colomn

6.3.5 การรวมเซล 1. คลกบรเวณเซลลทตองการจะรวมโดยการท าแถบด าทบรเวณทตองการรวม คลกขวาเลอกค าสง Table > Merge Cells

เซลลจะถกรวมเขาดวยกนทนท

กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ

ใบเนอหา หนาท

แผนท : 6.3.6 การแบงเซล 1. คลกบรเวณเซลลทตองการจะแบงโดยการท าแถบด าทบรเวณทตองการแบงเซลล คลกขวาเลอกค าสง Table > Split Cell

จะปรากฏหนาตาง Split Cell ระบจ านวนแถวและคอลมนทตองการ แลวคลกปม OK

6.4.1 การใสสพนตาราง 1. คลกเลอกบรเวณตารางทตองการใสสพนหลงและเสนขอบ 2. คลกเลอกส BG จะแสดงถาดส ดงภาพ

6.4 การตกแตงตาราง

ระบจ านวนคอลมน

คลกเลอกส

กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ

ใบเนอหา หนาท

แผนท : จะปรากฏสบนตาราง ดงภาพ

6.4.2 การใสภาพพนหลงในตาราง 1. คลกเลอกบรเวณตารางทตองการใสภาพพนหลง ไปท Properties คลก CSS เลอก Targeted Rule และเลอกค าสง <New Inline Style>

2. คลก Edit Rule จะปรากฏหนาตาง CSS Rule definition for <Inline style>

กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ

ใบเนอหา หนาท

แผนท : 3. คลกเลอก Background แลวเลอกปม Browse แลวท าการเลอกภาพทตองการ คลกปม OK ภาพจะถกน าไปสราง เปนพนหลง ดงภาพ

1. คลกเลอกต าแหนงทจะน าไฟลจากโปรแกรมอนเขามา 2. คลกเลอกค าสง Insert > Table Object > Import Tabular Data โดยไฟลทจะน าเขามาตองถกบนทกดวยนามสกล .txt

6.5 การน าเขาตารางจากโปรแกรมอน

กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ

ใบเนอหา หนาท

แผนท : 3. จะปรากฏหนาตาง Import Tabular Data คลกเลอกไฟลทปม Browse ก าหนดรายละเอยดแลวคลกปม OK

ขอมลจะถกแทรกเขามา ดงภาพ