หน่วยที่ 4 ควบคมใหุ้เว็บเพจสวยด ้วยตารางkrumontree.com/html/documents/lesson_04.pdf · หน่วยที่

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

หนวยท 4 ควบคมใหเวบเพจสวยดวยตาราง

ผลการเรยนรทคาดหวง 1. อธบายโครงสรางและคาสงของตารางได 2. สามารถเขยนคาสง (Tag) สรางตารางทซบซอนไดถกตอง

สาระสาคญ เวบเพจทเราพบเหนจานวนมากในปจจบนมความสวยงาม จดเนอหาทงตวอกษรและ

รปภาพอยอยาง เปนหมวดหม ในตาแหนงทเหมาะสม เกดจากการใชตารางควบคมการแสดงผล ตารางทใชในการจดหนาตาเวบเพจนน มการใชคาสงสวนขยายใหแสดงผลตามท

ผออกแบบตองการ กาหนดความกวาง /สงใหเหมาะสมกบขนาดของรปภาพ หรอขอความ กาหนด การแสดงเสนขอบใหมความหนา และสสนสวยงาม

คดแลวตอบ ถานกเรยนมขอมลจานวนมากทแสดงจานวน ปรมาณ ปรมาตร ของวตถ สงของ พช

สตว การสรางเวบไซตเพอแสดงผลใหผชมเขาใจไดงาย นกเรยนควรจดการเวบไซตหนาน อยางไร ....

ควบคมเวบเพจใหสวยดวยตาราง


60

ในบทท 3 เราไดศกษารายละเอยดเกยวกบการจดข อความในเอกสารรวมกบรปภาพใน รปแบบตางๆ ไปแลว จะเหนไดวา เวบเพจของเรามเรองราวทดนาสนใจมากขนแลว แมจะยงไม ตรงกบความตองการของเรามากนก เชน การกาหนดตาแหนงของรปภาพและขอความใหอยใน ตาแหนงทตองการตายตว จดหมวดหมไดงายขน ขอมลบางอย างจาเปนตองมการเปรยบเทยบหรอแสดงใหเปนหมวดหม การแสดงผลในรปแบบตารางดจะเหมาะสมกบการนาเสนอแบบน

โครงสรางของตาราง ขอความแสดงคาอธบายของตาราง

หวตารางคอลมน 1 หวตารางคอลมน 2 หวตารางคอลมน 3 ขอมล 1 แถวท 1 ขอมล 2 แถวท 1 ขอมล 3 แถวท 1 ขอมล 4 แถวท 2 ขอมล 5 แถวท 2 ขอมล 6 แถวท 2

ตารางในเวบเพจมความสาคญและความจาเปนในการจดการการแสดงผลของตวอกษรและรปภาพใหเหมาะสม จากตารางตวอยางขางบน สามารถเขยน คาสงทใช และเขาใจไดงาย ซงมโครงสรางของคาสงตารางดงน

รปแบบ คาสง

<TABLE> <CAPTION> ขอความแสดงคาอธบายของตาราง </CAPTION> <TR><TH> หวตารางคอลมน 1 </TH><TH> หวตารางคอลมน 2 </TH> .... </TR> <TR><TD> ขอมล 1 แถวท 1 </TD><TD> ขอมล 2 แถวท 1 </TD> .... </TR> <TR><TD> ขอมล 3 แถวท 2 </TD><TD> ขอมล 4 แถวท 2 </TD> .... </TR> <TR><TD> ขอมล 5 แถวท 3 </TD><TD> ขอมล 6 แถวท 3 </TD> .... </TR> ....... </TABLE>

สาหรบโครงสรางของตารางจะประกอบไปดวยคาสงเปด คอ <TABLE> และคาสงปด คอ </TABLE> และมคาสงยอยภายในอก 4 คาสงคอ

1. คาสง <CAPTION> ... </CAPTION> เปนคาสงทกาหนดคาหรอขอความอธบาย ตารางวา เกยวของกบเรองอะไร นนเอง

2. คาสง <TR> ... </TR> (Table Row) เปนคาสงทกาหนดแถวในตาราง จะมคาสงยอย ภายในอก 2 คาสงคอ <TH> ... </TH> และ <TD> ... </TD>



61

3. คาสง <TH> ... </TH> (Table Head) เปนคาสงทกาหนดหวเรองในแตละคอลมน ขอความภายในคาสงนจะเปนอกษรตวหนาและอยกงกลางของคอลมนในตาราง

4. คาสง <TD> ... </TD> (Table Data) เปนคาสงทแสดงขอมลในตารางแตละคอลมน ลกษณะของขอมลอาจเปนตวเลขหรอตวอกษร จะแสดงผลชดขอบซายของแตละคอลมน

สรางไฟลตวอยางสาหรบการแสดงผลรปแบบตารางดงภาพบนแลวจดเกบไฟลในชอ table_01.html ทดลองแสดงผลในบราวเซอร

การแสดงผลของคาสงตารางผานบราวเซอร



62

จากภาพจะเหนไดวาตารางท แสดงผลผานบราวเซอร ไมนาสนใจนก เราสามาร ถปรบแตงได โดยเพมสวนขยายเขาไปเชนเดยวกบแทกอนๆ เชน กาหนดการแสดงเสนตารางดวย คาสงแสดงเสนขอบ BORDER เขาไปใน <TABLE> และยงสามารถเพมคาความหนาของเสนตารางไดดวย คาสง BORDER=“n” เมอ n คอ คาความหนาของเสนขอบนอก มหนวยเปนพกเซล

กาหนดความ กวางของตารางดวยคาสง WIDTH การกาหนดสสนและขนาดของตวอกษรในสวน <CAPTION> และในตารางสามารถกาหนดไดตาม ปกตเหมอนตวอกษรทวไป เราสามารถกาหนดใหตารางอยกงกลางของหนาไดดวยการใชคาสง <DIV ALIGN=“CENTER”> ... </DIV> เปนตน ดงตวอยาง

คาสงสวนขยายเพมเตมในตาราง 1. จากไฟลตวอยางจะพบวา มคาสง WIDTH=“75%” ซงมผลตอตารางคอจะแสดงขนาด

ของตารางดวยความกวางเทากบจานวนเปอรเซนตทระบเมอเทยบกบขนาดของ หนาตางบราวเซอร เราสามารถระบขนาดตารางดวยคาคงทเปนตวเลขจานวนพกเซลไ ด เชน width= “600”



63

2. การปรบขนาดความสงของตาราง โดยกาหนดแอตทรบวต HEIGHT=“X%” ซงในการแสดงผลของเวบบราวเซอรจะเปรยบเทยบกบเปอรเซนตความสงของจอ

3. การวางหวตารางไวตามแนวนอนหรอแนวตง ทาไดโดยการวางคาสง <TH> ... </TH> ไวในสวน แถวหรอคอลมน

Table Heading Cellpadding Cellspacing

4. การกาหนดขนาดพนทของการแสดงผลขอมลใน ชอง ตาราง โดยใชแอตทรบวต

CELLPADDING เพอกาหนดพนทวางภายในเซลขอมลแตละเซล เปนการกาหนดระยะหาง ระหวางเสนและตวอกษร หรอเสนกบ ขอบรปภาพมหนวยเปนพกเซล โดยใสคาตวเลขจานวน พกเซลทตองการเวนระยะ เชน CELLPADDING=“10”

5. การกาหนด ระยะหาง ของชองวางระหวางชองตาราง ทาไดโดยการใชแอตทรบวต CELLSPACING=“n” เมอ n คอจานวนพกเซลระบคาของระยะหางของเซล (คาปกตคอ 1)

6. การจดตาแหนงของคาอธบายตาราง คาปกตจะอยเห นอตาราง แตเราสามารถสงใหไป แสดงอยใตตารางได โดยเพมแอตทรบวต ALIGN=“BOTTOM” ในคาสง <CAPTION> ดงตวอยาง

<CAPTION ALIGN=“BOTTOM”> กาหนดใหคาอธบายตารางอยลาง </CAPTION>



64

7. การกาหนดตาแหนงขอความแนวนอนในตาราง โดยใชแอตทรบวต ALIGN ซงมลกษณะของคาสงอย 3 ลกษณะ คอ LEFT/CENTER/RIGHT ซงมขอยกเวนดงน

<TH> คาปกตคอ CENTER จงไมตองใช ALIGN=“CENTER” ใชเฉพาะ LEFT หรอ RIGHT

<TD> คาปกตคอ LEFT จงไมตองใช ALIGN=“LEFT” ใชเฉพาะ CENTER หรอ RIGHT

8. การกาหนดตาแหนงขอความในแนวตงของตาราง โดยใชแอตทรบวต VALIGN ซงมลกษณะของคาสงอย 3 ลกษณะ คอ TOP/MIDDLE/BOTTOM

คาสง VALIGN ถาใชกบคาสง <TR> หรอ Table Row การแสดงผลในโปรแกรมเวบบราวเซอรจะแสดงผลแบบกาหนดตาแหนงของขอมลทงแถวให เปนไปตามแอตทรบวตไมวาจะอยใน <TH> หรอ <TD>

ถากาหนดตาแหนงขอมลดวยคาสง VALIGN ในคาสง <TH> หรอ <TD> จะมผลเฉพาะในเซลทกาหนดเทานน

ไมจาเปนตองใช VALIGN=“MIDDLE” เพราะเปนคาปกตทงใน <TR>, <TH> และ <TD>

9. การกาหนดสใหกบตาราง สามารถทาไดโดยใชแอตทรบวต BGCOLOR ลงในคาสงตาราง

<TABLE BGCOLOR=“ส”> จะทาใหพนสมผลกบทกชองในตาราง <TR BGCOLOR=“ส”> จะมผลเฉพาะแถวนนแถวเดยว <TD BGCOLOR=“ส”> หรอ <TH BGCOLOR=“ส”> จะมผลเฉพาะเซลนน สามารถใชรปภาพแทนสไดโดยใชสวนขยายเปน Background=“ชอภาพ” ใน

คาสง <table> <th> และ <td> 10. การกาหนดความกวางของคอลมนแตละคอลมนในตาราง โดยใชแอตทรบวต

WIDTH=“n” คา n จะมหนวยเปนพกเซล การกาหนดความกวางของคอลมนในแถวใดกตามจะม ผลกบคอลมนนนๆ ในทกๆ แถวโดยอตโนมต สวนแถวทไมกาหนดความกวางจะมความกวาง เทากบจานวนตวอกษรทมมากท สดในคอลมนนน คาสงนใชกบ <TH> และ <TD>

11. การกาหนดชองวางในตาราง ในกรณทชองตารางนนเปนชองวางไมมขอมล เรา สามารถใชอกษรเคาะวาง (Invisible Character) หรอ (Non breaking space) แทนได โดยการปอนขอมลรหสแอสกดงน ลงไป อกษรเคาะวา งนจะใชแทนชองวาง 1 ตวอกษรในประโยคใดๆ กได (ถาเราไมใสอกษรเคาะวางลงไป ตารางในชองทไมมขอมลจะไมแสดงผลเสนตาราง )



65

เราจะทดลองในการแกไขปรบปรงตารางโดยการใชไฟล table_02.html เปนตนแบบและจดเกบเปนไฟลชอ table_03.html ดงตวอยาง

แกไขเพมเตมสวนขยายคาสงในชองตารางและการแสดงผลในบราวเซอร

สงทไดแกไขเพมเตมจากไฟลเดมคอ กาหนดระยะหางของเซล เพมการวางตาแหนงของคาอธบายตารางจากขางบนมายงสวนลางของตาราง กาหนดสของแถวในหวตาราง กาหนดสของชองขอมลใหคอมลมนชอ ผเขาสอบมสตางจากชองคะแนนทได กาหนดการวางตาแหนงของคะแนนทได เสรจแลวใหจดเกบไฟลและแสดงผลในบราวเซอรวามผลอยางไร ทดลองแกไขในสวน

อนๆ ดวาเกดผลอะไรขนบาง อยาลมวาในการแกไขทกครงจะตองมการจดเกบขอมลลงไฟล กอนเสมอจงจะมการเปลยนแปลงการแสดงผลในบราวเซอรเมอมการคลกทปมรเฟรช



66

12. การกาหนดขนาดความสงของแถวในตาราง โดยใชแอตทรบวต ROWSPAN จะเปนการรวมเอาชองในแถวหลายแถวเขาเปนชองเดยว คลายกบการรวมเซลตารางในโปรแกรม ไมโครซอฟทเวรด คาสงนใชกบ <TH> และ <TD> ดงตวอยาง

<TD ROWSPAN=“2”> ขยายชองตารางออกไปในแถว </TD> <TH ROWSPAN=“2”> ขยายชองตารางออกไปในแถว </TH>

13. การกาหนดความกวางของตาราง (รวมชองตารางคอลมนหลายชองเขาดวยกน ) โดยกาหนดแอตทรบวต COLSPAN=“จานวนคอลมน” คาสงนใชกบ <TH> และ <TD> ดงตวอยาง

<TH COLSPAN=“2”> ... </TH> และ <TD COLSPAN=“2”> ... </TD> 14. ในบางกรณอาจจาเปนตองใชการแสดงผลแบบตารางซอนตาราง เพอใหสามารถ

กาหนดรปแบบพเศษได และมผลทสวยงาม เชนเดยวกบการสง LIST ซอน LIST นนเอง ขอสาคญ คอ อยาลมปดทายคาสงทกคาสง ไมเชนนนการแสดงผลจะไม ถกตอง

15. การกาหนดรปภาพในตาราง เราสามารถบรรจภาพใด ๆ ลงในตารางกไดโดยใชคาสง <IMG SRC=“รปภาพ”> แทนขอความในตาราง ถารปมขนาดใหญจะทาใหชองตารางขยายตาม ไปดวย ถาตองการใหขนาดของรปภาพพอดกบตารางจะตองกาหนดแอตทรบวต WIDTH และ HEIGHT ใหกบรปภาพน นดวย

16. การใชภาพหรอขอความในตารางเปนจดเชอมโยงสามารถทาไดเหมอนปกต โดยการใชคาสง <A HREF> จะกลาวถงในบทตอไป

ตอไปเราจะทดลองการผสมผสานเซลใหมรปแบบตางๆ ตามทตองการ โจทยขางลางนคอ ลกษณะการแสดงผลในบราวเซอรทตองการ

การจดการภาพและขอความในตาราง

การจดวางขอมลลงในตาราง แบบจดกงกลาง

จดขอความชดขวาลาง เดกเอยเดกนอย แสดงการรวมแถว 1,2 ในตาราง แสดงการรวมคอลมนแถวบน

การวเคราะหกอนการสรางตาราง 1. ตารางในชองคอลมนท 1 แถวท 1 และ 2 ตองรวมกนดวยแทก ROWSPAN จดกงกลาง

ทงแนวต งและแนวนอนในตารางน 2. ตารางในแถวท 1 ชองท 2 และ 3 ตองรวมกนดวยแทก COLSPAN จดกงกลางใน

แนวนอนเพอบรรจขอความ



67

3. รปภาพการตนตองใชแทก <IMG SRC=”ชอรป”> ในชองตาราง 1 กาหนดระยะหาง จากเสนขอบถงรปทงสดาน

4. ชองตารางทเหลอไมมการรวมชอง ใหบรร จขอความและสงจดการตาแหนงของ ขอความในแตละชองตามตองการ

เราสามารถสรางตารางและกาหนดสวนขยายของตารางตามทไดวเคราะหไว และเมอใช บราวเซอรเปดไฟลแสดงผลลพธจะไดดงภาพขางลาง

การแสดงผลของตารางเปนไปตามทโจทยตองการ



68

จะเหนไดวา ตารางมความสาคญอยางยงตอการแสดงผลของหนาเว บเพจ จากภาพตวอยางขางลางน http://www.cnn.com จะเหนถงแนวทางการใชตารางในการควบคมการแสดงผลใหไดตามทผออกแบบไดกาหนดไว

ภาพลางเปนการแสดงแนวเสนตารางทสรางตารางซอนตารางในการแสดงผล



69

เวบไซตของสานกงานคณะกรรมการการศกษาขนพนฐานกใชตารางควบคมการแสดงผล เราจะเหนไดวา เวบไซตทสวยงามนนขาดการจดการดวยตารางไมได จงควรฝกฝน จดจา

คาสงในการจดการกบตาราง และนาไปประยกตใชตอไป เราไดทดลองสรางเวบเพจมาไดจานวนหลายหนาแลว ในแตละหนาตางกแยกกนอยอยาง

อสระไมมความสมพนธกน ในบทตอไปเราจะไดศกษาการเชอมโยงเนอหาเขาหากนอยางเปน ระบบ รวมทงเชอมโยงไปยงเวบไซตอนๆ



70

กจกรรมเสนอแนะ หลงจากการศกษาบทเรยนหนวยท 4 เสรจสนแลว ใหนกเรยนแตละ คน ทากจกรรมดงน 1. ศกษาหาความรเพมเตมในการสราง ตารางควบคมการแสดงผลจากเวบไซตตางๆ 2. ใหนกเรยนทดลองใชคาสง จดตารางรปแบบตางๆ แทรกตวอกษรและรปภาพ ใน

ตาแหนง ตางๆ ของชองตาราง และกาหนดสวนขยายเพมเตมนอกเหนอจากในตวอยาง แลวทดสอบการแสดงผลผานบราวเซอร

คาถามทายบท 1. อธบายถงผลเมอใชคาสง BGCOLOR ในสวนตางๆ ของตาราง

<TABLE> ………………………………………………………………………………….. <TR> ……………………………………………………………………………………….. <TD> ……………………………………………………………………………………….

2. จงใหความหมายของคาสงตอไปน CAPTION ………………………………………………………………………………….. ROWSPAN …………………………………………………………………………………. COLSPAN ………………………………………………………………………………….. CELLPADDING …………………………………………………………………………… CELLSPACING ……………………………………………………………………………. ALIGN ……………………………………………………………………………………….

Documents

หน่วยที่ 4 ควบคมใหุ้เว็บเพจสวยด ้วยตารางkrumontree.com/html/documents/lesson_04.pdf · หน่วยที่