Embed Size (px)
Citation preview
บทท 9 จดหนาเวบเพจดวยตาราง (Table)
ตาราง (Table)เปนสงททกคนรจกกนด ซงสวนใหญจะใชเพอน าเสนอขอมลทเปนรายชอหรอรายการของสงตางๆแตบนเวบเพจตารางยงมประโยชนส าคญอกอยาง คอใชส าหรบจดวางเลยเอาทของหนาเอกสาร เพอชวยในการแสดงขอมลหรอองคประกอบตางๆไดตรงตามต าแหนงทตองการ ไมวาจะเปนขอความ ภาพกราฟก ปมเมน แบบฟอรม มลตมเดย รวมทงออบเจคอนๆ แมวาปจจปนจะมเทคนคใหมทสามารถใชจดเลยเอาทของเวบเพจไดสะดวกขน แตตารางกยงเปนเครองมอยอดนยม และสามารถแสดงผลบนบราวเซอรตางๆไดอยางถกตองมากกวา มมมองส าหรบการจดหนาเวบเพจดวยตาราง ใน Dreamweaver คณสามารถเลอกมมมองทใชจดเลยเอาทของเวบเพจได 2 แบบ คอมมมองปกตและมมมองขยาย วธสลบการท างานระหวางมมมองเหลานท าไดโดยเลอกค าสง view > table mode >เลอกมมมอง หรอคลกปม standard หรอปม expanded บนแทบlayout ของพาเนลinsert ดงรป เปดมมมองเลยเอาท เปดมมมองปกต เปดมมมองขยาย เปดมมมองปกต
เปดมมมองขยาย
รปท 2.105 มมมองส าหรบการจดหนาเวบเพจดวยตาราง
มมมอง Standard คอมมมองปกตทคณพบเมอเรมใชโปรแกรมครงแรก มมมองนเหมาะส าหรบการสรางและแกไขเวบเพจโดยทวไป และจะแสดงผลไดใกลเคยงกบบราวเซอรมากกวามมมองอนๆ มมมอง Expanded เปนมมมองทชวยใหคณเหนโครงสรางและขอบเขตของตารางทงหมด โดยในมมมองนตารางจะถกแสดงแบบมเสนขอบและระยะระหวางเซลเสมอ ซงจะท าใหปรบแตงตารางและแกไขขอมลไดงายขน สรางตาราง รจกกบโครงสรางของตาราง โครงสรางของตารางประกอบดวย คอลมน (column)ทอยในแนวตง และแถว (row) ในแนวนอน โดยมจดตดทเกดจากแถวและคอลมน เรยกวา เซล (cell)ตารางทงายทสดจะประกอบดวย 1 แถว 1 คอลมน และมเซลเพยงเซลเดยว ขนตอนการสรางตาราง 1.คลกตรงต าแหนง ทจะสรางตาราง 2.คลกปม Table 3.ก าหนดคณสมบตตาง
4.คลก
รปท 2.106 แสดงขนตอนการสรางตาราง
คณสมบตของตาราง Tablee size เปนสวนทใชก าหนดขนาด จ านวนแถว/คอลมน และอนๆ
Rows/Clumnsจ านวนแถว/จ านวนคอลมน และอนๆ Table width ความกวางทงหมดของตาราง โดยระบคาแลวเลอกหนวยเปนพกเซล
(pixels)หรอเปอรเซนต (percent) Border thickness ความหนาของเสนขอบตาราง หนวยเปนพกเซล Call padding ระยะหางระหวางเซลกบเนอหาภายในเซล Call spacing ระยะหางระหวางเซลแตละเซล
Haederก าหนดใหคอลมนแรกหรอแถวแรกเปนหวเรองของตาราง None ไมก าหนด
Accessibility ก าหนดออปชนส าหรบเสรมการใชงานของตาราง Caption ขอความออปชนส าหรบเสรมการใชงานของตาราง Summary ค าอธบายตาราง
สวนประกอบของตาราง จากรปจะเหนวา นอกจากตวตารางซงมคณสมบตตามทคณก าหนดแลว Dreamweaver ยงแสดงสวนประกอบอนๆ ส าหรบชวยในการปรบแตงและจดการตารางดวย เชน ตวเลขทบอกความกวางของตารางและเซล และเมนค าสง ซงสวนประกอบเหลานจะปรากฏเมอคณคลกวางเคอรเซอรบนตาราง หรอเลอกออบเจคชนใดชนหนงอยในตาราง แตจะไมปรากฏบนเวบเพจ ใสเนอหาในตาราง ภายในตารางคณสามารถวางองคประกอบตางๆของเวบเพจลงไปไดเกอบทกชนด ไมวาจะเปนขอความ, ภาพกราฟก, มลตมเดย, ฟอรม หรอแมแตจะสรางตารางยอยซอนไวภายในเซลของตารางหลกเปนชนๆกได ส าหรบวธใสเนอหาเหลานกจะเหมอนกบการใสเนอหาลงบนเวบเพจตามปกต ดงน
1. คลกวางเคอรเซอรในเซลทตองการใสเนอหา 2. ใชค าสงเพอใสเนอหาชนดตางๆตามตองการ
เลอกสวนตางๆของตาราง เมอจะจดการใดๆกบตาราง สงแรกทคณตองท าคอการเลอกสวนของตารางทตองการ จากนนจงคอยเลอกค าสงของโปรแกรม เลอกทงตารางท าไดหลายวธตามความถนดหรอความเหมาะสม
ชเมาสทมม หรอทต าแหนงเหนอหรอไดตารางเลกนอย แลวคลกหรอชทขอบเซล คลกขวาบนตาราง แลวเลอกค าสง Table > Select Table คลกเซลในตาราง จากนนคลกเมนหวตาราง แลวเลอกค าสง Select Table
เลอกแถว เลอกแถวเดยว ชเมาสทขอบซายของแถว (เมาสเปนรป ) แลวคลก เลอกหลายแถว ชเมาสทขอบซายของแถวแรก (เมาสเปนรป ) แลวคลกลากไปตามแถวอนๆ
เลอกคอลมน เลอกคอลมนเดยว คลกเซลในตาราง จากน นคลกเมนหวคอลมน แลวเลอก Select
Column เลอกคอลมนเดยว (อกวธ) ชเมาสทขอบบนของคอลมน (เมาสเปนรป ) แลวคลก เลอกหลายคอลมน ชเมาสทขอบบนของคอลมนแรก (เมาสเปนรป ) แลวคลกลากไป
ตามคอลมนอนๆ เลอกเซล
เลอกเซลเดยว คลกวางเคอรเซอรในเซลนน (หรอกดคย Ctrl คางไวแลวคลกบนเซลนน) เลอกหลายเซลทตอเนองกน ชเมาสทเซลแรก (เมาสเปนรป ) จากนนคลกครอบคลมทก
เซลทตองการ เลอกหลายเซลทตอเนองกน (อกวธ) คลกบนเซลแรก จากนนกดคย Shift คางไว แลวคลก
บนเซลสดทาย เลอกหลายเซลทไมตอเนองกน กดคย Ctrl คางๆไว แลวคลกบนเซลแตละเซล
เลอกสวนประกอบของตารางดวย Tag Selector ถาหากการเลอกดวยวธการตางๆขางตนไมสะดวกหรอไมสามารถท าได เชน เมอมตารางหลายตารางซอนกนอย คณสามารถเลอกดวย Tag Selector ดงน
แทก HTML ของตาราง การเลอกสวนของตารางดวย Tag Selector สามารถใชไดกบทกๆกรณ ไมวาตารางจะมความซบซอนเพยงใด แตการทจะใชวธนไดอยางมประสทธภาพ คณจะตองพจารณาล าดบของแทกใหด และควรมความรพนฐานเกยวกบภาษา HTML บางเลกนอย ตวอยางการพจารณาแทกค าสง ชดค าสง HTML ของตารางทประกอบดวย 3 แถว และ 2 คอลมน โดยแถวบนสดเปนหวเรองของตาราง
จะสงเกตวาแทกของตารางจะซอนกนอยเปนชนๆในลกษณะ<ตาราง><แถว><เซล>ดงนนล าดบแทกทปรากฏบน Tag Selector จงเปน <body><table><td>(<body>คอแทกของสวนทเปนเนอหาเวบเพจทงหมด)
ถาหากมตารางซอนกนอย 2 ชน ตารางชนในจะอยภายในเซลใดเซลหนง (แทก<td>) ของตารางชนนอก ในลกษณะ<ตาราง><แถว><เซล><ตาราง><แถว><เซล> ดงนนล าดบแทบบน Tag Selector จงเปน<body><table><td><body><table><td>
การเลอกตาราง, แถว หรอเซล ท าไดโดยคลกทแทก<table>, <tr>หรอ <td>ซงถามตารางซอนกนหลายชนกจะตองคลกใหถกตว โดยชนทอยดานในนนแทกจะอยทางขวาบน Tag Selector คณสมบตของตารางบนพาเนลProperties เนองคณเลอกตารางทงตาราง (แทก<table>) บนพาเนลProperties จะแสดคณสมบตเฉพาะของตารางนนขนมาเพอใหคณปรบแตงได ดงรป ระยะหางระหวางขอบเซลกบเนอหา เครองมอปรบ ความกวาง เสนขอบตาราง
เสนขอบตาราง
ชอตาราง
รปท 2.107 คณสมบตของตารางบนพาเนลProperties
จ านวนคอลมน จ านวนแถว
ความกวาง
ระยะหางระหวางขอบเซลกบเนอหา
ระยะหางระหวางเซลแตละเซล
เครองมอปรบความกวาง/ความสง ต าแหนงของ
ตารางในหนาเวบ
เลอกจดรปแบบดวย CSS
Table ชอตาราง Rows/Cols จ านวนแถว/จ านวนคอลมน (เปลยนคาเพอเพม-ลดแถวหรอคอลมนได) W ความกวางของตาราง มหนวยเปนเปอรเซนต (%) หรอพกเซล (pixels) CellPadระยะหางระหวางขอบเซลกบเนอหาภายในเซล (cell padding) CellSpaceระยะหางระหวางเซลแตละเซล (cell spacing) Align การจดต าแหนงตารางใหชดซาย ชดขวา หรอกงกลางหนาเวบเพจ Border ความหนาของเสนขอบตาราง หนวยเปนพกเซล (ตามปกตคณไมสามารถก าหนด
ความหนาของเสนขอบเซล แตเมอคานเปน 0 ตารางจะไมแสดงทงเสนขอบตารางและเสนขอบเซล) Class เลอกรปแบบตารางดวย CSS ทก าหนดรปแบบไว Clear Column Widths คลกเพอยกเลกคาความกวางของตาราง และคาความกวางของทก
คอลมน (ผลกคอจะท าใหทกคอลมนมความกวางพอดกบเนอหา) Clear Row Heightsคลกเพอยกเลกคาความสงของตาราง และคาความสงของทกแถว (ท า
ใหทกแถวมความสงพอดกบเนอหา) Convert Table Widths to Pixels เปลยนหนวยของความกวางเปนพกเซล Convert Table Widths to Percent เปลยนหนวยของความกวางเปนเปอรเซนต
ปรบความกวางและความสงของตาราง ปรบดวยวธคลกลาก เมอเลอกตารางแลวคณจะสามารถปรบขนาดตารางไดโดยคลกลากทจดแฮนเตล หนวยของขนาดตาราง ในการก าหนดความกวางของตาราง คณสามารถระบหนวยวดได 2 แบบ คอ
แบบเปอรเซนต (%) เปนการก าหนดโดยเทยบกบองคประกอบอนทตารางถกบรรจอย เชน
ส าหรบตารางชนนอกสด จะคดเทยบกบขนาดวนโดวของบราวเซอรทผใชเปดอยในขณะทชมเวบเพจ เชน 100 % คอเตมวนโดวพอด (ไมรวมระยะ margin ของเวบเพจ)
ส าหรบตารางทอยภายในเซลของตารางอน จะคดเทยบกบขนาดของเซลนน แบบพกเซล (picels)เปนการก าหนดขนาดแบบแนนอนตามจ านวนพกเซลทระบ เชน 300
pixleตารางกจะมความกวาง 300 พกเซล
นอกจากนขนาดตารางยงขนกบเนอหาภายในดวย เนองจากตารางจะเลกกวาเนอหาทบรรทดจะไมได ดงนนตวเลขทระบนจงเปน “ขนาดเลทสดทเปนไปได” เพราะถาคณใสออบเจค
ใหญๆ เชน รปภาพ (ขอความไมคอยมปญหา เพราะถกตดค าได) ตารางจะถกขยายใหพอบรรจภาพนนและถาไมระบขนาดตาราง ความกวางและสงกจะเทากบเนอหาทบรรจอยพอด วธจดต าแหนงตาราง เรมแรกตารางทคณสรางจะไมระบวธจดต าแหนง (คาเปน Default) ซงบราวเซอรสวนใหญจะจดชดดานซายของเวบเพจแตหากคณตองการจดตารางใหอยกงกลางหรอชดดานขวาของเวบเพจกท าไดโดย 1.เลอกตาราง 2.คลกเลอกต าแหนงตาราง ใสเสนของตาราง ท าไดโดยก าหนดความหนาของเสนขอบตาราง ซงมหนวยเปนพกเซล (ถาจะไมใหมเสนขอบกใสคา 0) ส าหรบสของเสน ถาคณไมก าหนดกจะเปนไปตามคาดฟอลดของบราวเซอร ซงมกจะแสดงเปนสเทาหรอด า ใสสพนตาราง ตารางทคณสรางใหมจะมพนโปรงใส ท าใหมองผานไปเหนสพนหรอภาพพนหลงของเวบเพจตองการคณกสามารถก าหนดสพนตารางไดดงน 1.เลอกตาราง 2.เลอก Modify > Edit Tag 3.คลกเลอกสพน 4.คลก
รปท 2.109 ใสเสนของตาราง
รปท 2.108 วธจดต าแหนงตาราง
ใสภาพฉากหลงตาราง 1.เลอกตาราง 2.เลอก Modify > Edit Tag 3.คลกเลอกไฟลภาพ 4.คลก ใสสเสนขอบตาราง 1.เลอกตาราง 2.เลอก Modify > Edit Tag 3.คลกเลอกสเสนขอบ 4.คลก
รปท 2.110 ใสภาพฉากหลงตาราง
รปท 2.111 ใสสเสนขอบตาราง
คณสมบตของเซลบนพาเนลProperties เมอคณเลอกเซล ไมวาจะเพยงเซลเดยว, หลายเซล, ทงแถว หรอทงคอลมนกตาม บนพาเนลProperties จะแสดงคณสมบตเฉพาะของเซลเหลานนเพอใหคณปรบแตงได ดงรป จดต าแหนงเนอหาแนวนอน จดต าแหนงเนอหาแนวตง บงคบขอความไมใหขนบรรทดใหม สวนทประกอบ ก าลงเลอก รวมเซล แยกเซล ความกวางและความสง ใหเปนเซลหวเรอง สพนเซล ปรบขนาดเซล แถว และคอลมน ปรบดวยพาเนลProperties ท าไดโดยก าหนดคาความกวางของเซลหรอคอลมนในชอง W และความสงของเซลหรอแถวในชอง H ซงตามปกตจะมหนวยเปนพกเซล หากตองการใชหนวยเปอรเซนตใหใสเครองหมาย % ดวย เชน 30% 1.เลอกเซล, แถวหรอคอลมน 2.ปอนความกวางและความสง
รปท 2.113ปรบขนาดเซล แถว และคอลมน
รปท 2.112คณสมบตของเซลบนพาเนลProperties
ปรบดวยวธคลกลาก คณสามารถปรบความกวางของคอลมนและความสงของแถวไดงายๆ โดยคลกลากทเสนขอบเซลตรงจดทตองการปรบ คลกลากขอบดานลางของแถวทตองการปรบคลกลากขอบดานขวาของคอลมนทตองการปรบ
ขณะทคณคลกลากจะปรากฏเสนแสดงต าแหนงใหมของแถวหรอคอลมน และกรณปรบความกวางคอลมน จะปรากฏคาความกวางใหมทสวนหวของทกคอลมนทไดรบผลจากการปรบดวย(ตวเลขสน าเงน) ตามปกตการปรบความกวางคอลมนจะไมท าใหความกวางของตารางเปลยนแปลง โดยจะมผลตอความกวางของคอลมนขางเคยงแทน หากคณตองการปรบโดยใหคอลมนขางเคยงไมถกกระทบแตใหความกวางตารางเปลยนได กใหกดคย Shift คางไวขณะคลกลาก จดต าแหนงเนอหาภายในเซล
การจดต าแหนงแนวนอน เปนการจดใหเนอหาอยชดซาย, กงกลาง หรอชดขวา การจดต าแหนงแนวตง เปนการจดใหเนอหาภายในเซลอยชดขอบบน, กงกลางหรอชด
ขอบลาง 1.เลอกเซล, แถวหรอคอลมน 3.คลกเลอกต าแหนงแนวตง 2.คลกเลอกต าแหนงแนวนอน
รปท 2.114ปรบดวยวธคลกลาก
รปท 2.115 การจดต าแหนงเนอหาภายในเซล
ออปชนBaseline ของตารางต าแหนงแนวตง หมายถง การจดใหแนวเสนฐานของขอความบรรทดแรกของทกเซลในแถวอยตรงกน ซงจะแตกตางจากแบบ Top ใสสพน สเสนขอบ และภาพฉากหลงของเซล 1.เลอกเซล, แถวหรอคอลมน 2.ก าหนดสพน สเสนขอบหรอภาพฉากหลง ท าภาพเปนฉากหลงและสเสนขอบของเซล 1.เลอกเซล, แถวหรอคอลมน 2.เลอก Modefy > Edit Tag 3.ก าหนดภาพฉากหลงหรอสเสนขอบ ปรบแตงเซลในตาราง ลบแถวและคอลมน สามารถลบแถวหรอคอลมนทไมตองการได แตควรระวงเวลาลบในตารางทมการรวมหรอแยกเซล เพราะตารางประเภทนจะมแถวหรอคอลมนทไมไดอยเปนแนวตรงกนตามปกต ซงอาจจะท าใหลบผดได
รปท 2.116ใสสพน สเสนขอบ และภาพฉากหลงของเซล
รปท 2.117 ท าภาพเปนฉากหลงและสเสนขอบของเซล
4. คลก
แยกเซล (Split Cell) การแยกเซล คอการแบงเซลๆหนงออกเปนหลายแถวหรอหลายคอลมนเฉพาะตรงจดนนโดยคณสมบตของกลมเซลใหมทไดจะเปนไปตามเซลตนแบบ รวมเซล (Merge Cells) การรวมเซล คอการน าเซลหลายๆเซลมารวมกนใหเหลอเพยงเซลเดยว โดยกลมเซลทจะรวมกนไดตองอยตดกนและมรปทรงโดยรวมเปนรปสเหลยมเทานน และหลงรวมแลวเนอหาจากทกๆเซลจะถกน ามาวางตอกนไวในเซลผลลพธดวยเชนกน ขยาย และลดความครอบคลมของเซล (Row/Column Span) การรวมและการแยกเซลสามารถท าไดอกวธหนง โดยใชค าสงเพอขยายหรอลดความครอบคลมของเซลใดเซลหนงไปยงแถวหรอคอลมนทอยตดกน ขยายแถว
เปนการขยายเซลดานบนใหครอบคลมลงไปยงเซลทอยดานลาง 1.คลกเลอกเซล 2.คลกขวาบนเซลนนแลวเลอก Table >Increase Row Span
รปท 2.118 ขนตอนการขยายแถว
ขยายคอลมน เปนการขยายเซลดานซายใหครอบคลมไปยงเซลทอยดานขวา
1.คลกเลอกเซล 2.คลกขวาบนเซลนนเลอกTable > Decrease Column Span ลดความครอบคลมของแถว
เปนการแบงแยกเซลในแถวทถกรวมกนไวเพอใหกลบเปน2แถว 1.คลกเลอกเซล 2.คลกขวาบนเซลนนเลอกTable > Decrease Row Span
รปท 2.119 ขนตอนการขยายคอลมน
รปท 2.120 ขนตอนการลดความครอบคลมของแถว
ลดความครอบคลมของคอลมน เปนการแบงแยกเซลในคอลมนทถกรวมกนไวเพอใหกลบเปน 2 คอลมน
1.คลกเลอกเซล 2.คลกขวาบนเซลนนเลอกTable > Decrease Column Span กอปปตารางขอมลจาก Word และ Excel สามารถกอปปตารางจากไฟลเอกสารของโปรแกรม Word และ Excel มาวางบนเวบเพจโดยใหมรปแบบทตกแตงไวแลวตดมาดวยดงน ในโปรแกรม Word และ Excel 1.เลอกตารางหรอกลมเซล 2.คลกขวา แลวเลอก ค าสง Copy
รปท 2.121 ขนตอนการลดความครอบคลมของคอลมน
รปท 2.122 ขนตอนกอปปตารางขอมลจาก Word และ Excel
น าเขาขอมลจากฐานขอมลมาสรางเปนตาราง คณสามารถน าเขาขอมลจากฐานขอมลใดๆมาสรางเปนตารางบนเวบเพจกได ถาหากระบบ
ดงกลาวสามารถบนทกขอมลไวในรปไฟลขอความทมการแบงแตละรายการออกเปนบรรทดๆและแยกขอมลแตละคอลมนออกจากกนดวยแบงอยางเชน tab, comma (,) colon (:) หรออนๆ ออปชนการน าเขาขอมล
Data file เลอกไฟลขอมลทตองการน ามาใช Delimiter เลอกเครองหมายทใชแบงคอลมนในไฟลดงกลาว ไดแก Tab (เครองหมาย tab) Other แบงคอลมนดวยเครองหมายอน โดยคณตองพมพเครองหมายนนในชอง
ดานหลง Table width ก าหนดความกวางของตาราง Fit to data ใหตารางมขนาดพอดกบขอมล Set to ก าหนดความกวางของตารางเอง โดยระบคาและเลอกหนวย
Call padding ระยะหางระหวางขอบเซลกบขอมลภายในเซล Call spacing ระยะหางระหวางเซลแตละเซล Format top row รปแบบของขอมลแถวแรก [no formatting] ไมก าหนดรปแบบ Bold/italic/bold italic ใหขอความเปนตวหนา, ตวเอยงหรอทงหนาและเอยง
Border ความหนาของเสนขอบตาราง เรยงล าดบขอมลในตาราง ออปชนการเรยงล าดบขอมล
Sort by เลอกวาตองการเรยงล าดบตามล าดบขอมลในคอลมนใด โดยนบจากซายสดเปน column 1
Order เลอกประเภทขอมลและวธเรยง Alphabetically/Numerically เลอกเรยงล าดบแบบตวอกษรหรอแบบตวเลข Ascending/Descending เลอกเรยงจากนอยไปหามาก หรอมากไปหานอย
Then by เลอกคอลมนทตองการเรยงเปนอนดบทสอง (ถาขอมลของคอลมนแรกเหมอนกน) Options ก าหนดออปชนการเรยงเพมเตม Sort includes the first row ใหเรยงล าดบโดยรวมขอมลแถวแรกเขามาดวย Sort header rows ใหเรยงล าดบโดยรวมแถวทเปนหวตาราง
Sort footer rows ใหเรยงล าดบโดยรวมแถวทเปนทายตาราง Keep all row colors…ใหสพนของแตละแถวตดตามขอมลไปดวยภายหลงการเรยง
กอปป/ยายเซลในตาราง เปนการกอปปหรอยายขอมลพรอมทงรปแบบเซลไปยงต าแหนงปลายทาง ซงอาจจะอยในตารางเดยวกนหรอคนละตารางกได นอกจากนถาจะกอปป/ยายทละหลายๆเซล กลมเซลดงกลาวจะตองอยตดกนและมรปทรงโดยรวมเปนสเหลยมดวย ยายเซล ส าหรบการยายเซลไปแทรกหรอแทนทกท าไดในท านองเดยวกบการกอปป โดยใชค าสง Edit>Cut (คยลด Ctrl+X)
ถากลมทถกยายนนเปนเซลของทงแถวหรอคอลมน แถวหรอคอลมนตนฉบบจะหายไป ถากลมทถกยายนนไมใชเซลท งแถวหรอคอลมน ขอมลจะถกลบแตเซลจะยงคงอย
เหมอนเดม สรางตารางซอนตาราง (Nested Table) คณสามารถสรางตารางซอนกนไดหลายๆชน โดยใสตารางยอยไวในเซลของตารางหลก และท าเชนนไปเรอยๆจนกวาจะไดโครงสรางของชองเซลตามทตองการใชงาน ซงคณสมบตนจะชวยใหการจดเลยเอาทของเวบเพจทซบซอนท าไดงายและแกไขไดสะดวก ใชตารางชวยจดเลยเอาทของเวบเพจ ในการน าตารางมาชวยจดเลยเอาทของเวบเพจ คณตองแบงโครงสรางของเนอหาบนเวบเพจออกเปนสวนๆ แลวสรางตารางทมจ านวนแถวและคอลมนทเหมาะสมขนมารองรบตรงจดนน โดยใชค าสงในการรวมและแยกเซล หรอใชวธสรางตารางยอยซอนในตารางหลก จนไดโครงสรางของเซลตามตองการ ตารางทใชจดเลยเอาทจะตองถกก าหนด Border=0 เพอไมใหมเสนขอบ แตในขณะทก าลงจดนนถาคณสนบสนนกบโครงสรางของตาราง กสามารถเปดดเวบเพจในมมมอง Expanded ซงจะแสดงแนวขอบของตารางและเซลออกมา ท าใหแกไขไดสะดวก ผลการใชหนวยความกวางของตารางแบบตางๆ ในการใชตารางชวยจดเลยเอาทของเวบเพจ เมอคณก าหนดหนวยความกวางของตารางหลกชนนอกสดเปน % หรอ pixels จะใหผลทแตกตางกนดงน
หนวยเปน % เวบเพจจะมความกวางไมแนนอน โดยขนกบขนาดวนโดวบราวเซอรทแสดง ดงนนผชมแตละรายจงอาจจะมองเหนองคประกอบตางๆบนเวบเพจอยในต าแหนงทแตกตางกน คณจงตองจดเลยเอาทอยางระมดระวงมฉะนนเวบเพจอาจดนาเกลยดได สวนขอดของวธนคอผชมจะมองเหนเนอหาของเวบเพจอยางเตมทเสมอ ไมวาจะใชหนาจอกวางมากเทาใด หนวยเปน Pixels เวบเพจจะมความกวางคงท และองคประกอบตางๆจะอยทต าแหนงเดมเสมอ ไมวาผชมจะใชหนาจอกวางเทาใด ขอควรระวงคอถาก าหนดความกวางของเวบเพจมากเกนไป ผชมสวนใหญอาจเหนเนอหาบางสวนตกไปทางขวาซงเลอนดไดล าบาก ปจจบนเวบเพจสวนใหญนยมออกแบบส าหรบจอขนาด 1024×768 สรางตารางรวมภาพกราฟก ในการน าภาพกราฟกขนาดใหญมาแสดงบนเวบเพจ นยมตดแบงภาพดงกลาวออกเปนชนยอยๆทเรยกวา สไลช โดยใชโปรแกรมกราฟก เชน Photoshopหรอ firework จากนนจงน าภาพยอยมาประกอบเขาดวยกน (เพอใหมองเหนเปนภาพเดม) โดยใชตารางทไมมเสนขอบและไมมชองวางระหวางเซล ประโยชนของวธนคอท าใหบราวเซอรแสดงภาพไดเรวขน เนองจากภาพขนาดเลกจะโหลดไดเรวกวาภาพใหญๆและภาพยอยทโหลดเสรจกอนกจะถกแสดงออกมากอน ท าใหผชมไมรสกกวารอนานเกนไป
