book 7 การสร้างตาราง

1

2

ก

แบบฝกึ ทกั ษะคอมพิวเตอร์ เรอ่ื ง การสร้างเว็บเพจด้วยภาษา HTML รายวิชา
ง22205 คอมพิวเตอร์เพิ่มเติม 4 ช้ันมัธยมศกึ ษาปีที่ 2 กลุ่มสาระการเรียนรู้การงานอาชีพ
และเทคโนโลยี จดั ทาขึน้ เพื่อใช้เปน็ สื่อการเรียนรทู้ ี่มวี ิธีการปฏิบตั ิทีห่ ลากหลาย มุ่งเน้น
พัฒนาผเู้ รียนที่เรยี นอ่อนและส่งเสริมผเู้ รียนทีเ่ รยี นเก่งใหผ้ เู้ รียนเรียนรู้ดว้ ยตนเองทั้งที่
โรงเรียน ที่บ้าน หรอื ฝกึ ในเวลาว่าง โดยมีครูผสู้ อนคอยดแู ลและให้คาแนะนาให้นกั เรียน
ศกึ ษาไปทีละเล่มตามลาดบั จนสามารถสร้างเวบ็ เพจได้ แบบฝกึ ทักษะคอมพิวเตอร์ เร่อื ง
การสรา้ งเว็บเพจด้วยภาษา HTML มีทั้งหมด 8 เล่ม ดงั น้ี

เล่มที่ 1 ความรเู้ บือ้ งต้นเกี่ยวกบั เว็บเพจ
เล่มที่ 2 ทาความรู้จกั ภาษา HTML
เล่มที่ 3 การจัดรปู แบบเอกสาร
เล่มที่ 4 การตกแต่งข้อความ
เล่มที่ 5 การแสดงลาดบั รายการ
เล่มที่ 6 การจดั การกบั รูปภาพ
เล่มท่ี 7 การสรา้ งตาราง
เล่มที่ 8 การเช่ือมโยงเว็บเพจ
โดยในแตล่ ะเล่มมีความตอ่ เนอ่ื งของความรู้ ดงั นั้น ผเู้ รียนจงึ ควรศกึ ษาตาม
ขั้นตอนทีละชดุ ไม่ควรข้าม เพราะอาจทาใหเ้ กิดความไม่เขา้ ใจในเนือ้ หา ควรอ่านคาชีแ้ จง
ให้เข้าใจก่อนและปฏิบัติตามด้วยความซื่อสัตย์ เพือ่ ประสิทธิภาพและประสิทธิผลทีด่ ใี น
การสร้างองค์ความรู้แก่ตนเอง
ผจู้ ดั ทาหวังเปน็ อย่างยิง่ ว่าแบบฝกึ ทักษะเล่มน้ีจะเป็นส่วนหนง่ึ ของเครื่องมอื ทีจ่ ะ
ช่วยใหผ้ เู้ รียนเกิดการเรียนรู้อย่างสมบูรณ์มีประสิทธิภาพและเอ้ือประโยชน์แก่ผเู้ รียน
ครูผสู้ อนคอมพิวเตอร์และผู้ที่สนใจเปน็ อย่างดยี ิ่ง

ดวงใจ บุญมีประเสริฐ

ข

เร่อื ง หน้า

คานา ก
สารบญั ข
คาชีแ้ จงสาหรับครู ค
คาชีแ้ จงสาหรับนกั เรยี น ง
แบบฝึกทักษะคอมพิวเตอร์ เลม่ ท่ี 7 การสร้างตาราง 1
มาตรฐานการเรียนรู้ 1
ผลการเรียนรู้ 1
สาระสาคญั 2
สาระการเรียนรู้ 2
แบบทดสอบก่อนเรียน 3
ใบความรทู้ ี่ 7 การสร้างตาราง 6
แบบฝกึ ทักษะที่ 7.1 23
แบบฝกึ ทกั ษะที่ 7.2 25
แบบทดสอบหลงั เรยี น 26
บรรณานกุ รม 29
ภาคผนวก 30
กระดาษคาตอบแบบทดสอบกอ่ น – หลงั เรียน 31
เฉลยแบบทดสอบกอ่ น – หลงั เรียน 33
เฉลยแบบฝกึ ทักษะที่ 7.1 34
เฉลยแบบฝกึ ทักษะที่ 7.2 36
บันทึกคะแนนแบบฝึกทกั ษะ 38
ประวตั ิผจู้ ดั ทา 39

ค

คำชี้แจงสำหรับครู

แบบฝึกทักษะคอมพิวเตอร์ เรื่อง การสร้างเวบ็ เพจดว้ ยภาษา HTML รายวชิ า
ง22205 คอมพิวเตอร์เพิ่มเติม 4 ชั้นมัธยมศึกษาปีที่ 2 กลมุ่ สาระการเรียนรู้การงานอาชพี
และเทคโนโลยเี ลม่ น้ี ใช้ประกอบการจดั กจิ กรรมการเรียนการสอนสาหรบั นกั เรียนชนั้
มัธยมศึกษาปีที่ 2 มขี ั้นตอนในการจัดกจิ กรรมการเรียนการสอน ดังน้ี
ขนั้ เตรียมการสอน

 ศึกษาแผนการจัดการเรียนรู้อยา่ งละเอยี ดและแบบฝึกทักษะจนเข้าใจเปน็ อย่างดี
 ตรวจสอบแบบฝึกทกั ษะ ส่ือทีใ่ ช้ประกอบการสอนและคอมพิวเตอร์ให้อยู่ใน

สภาพใช้งานได้
 ครผู ู้สอนควรเตรียมความรู้ในเนอื้ หาและควรมพี ื้นฐานในการสร้างเวบ็ เพจดว้ ย

ภาษา HTML
ขัน้ ดาเนินกิจกรรมการเรียนการสอน

 ครูแจกแบบฝึกทกั ษะคอมพิวเตอร์ เรื่อง การสร้างเว็บเพจดว้ ยภาษา HTML
รายวชิ า ง22205 คอมพวิ เตอร์เพิ่มเตมิ 4 ชั้นมัธยมศึกษาปีที่ 2 กลุ่มสาระการเรียนรู้
การงานอาชีพและเทคโนโลยี

 ครูชี้แจงการใช้แบบฝึกทกั ษะให้นกั เรียนทราบก่อนลงมอื ปฏิบตั ิ
 ครูให้นักเรียนทาแบบทดสอบก่อนเรียน เพื่อดูความรู้พืน้ ฐานของนักเรียน
 ครูให้นักเรียนศกึ ษาแบบฝึกทักษะคอมพิวเตอร์ เรอ่ื ง การสร้างเว็บเพจดว้ ยภาษา
HTML รายวิชา ง22205 คอมพวิ เตอร์เพิม่ เติม 4 ชั้นมธั ยมศึกษาปีที่ 2 กลมุ่ สาระการเรียนรู้
การงานอาชีพและเทคโนโลยี
 ครใู ห้นกั เรียนทาแบบทดสอบหลงั เรียน เพ่ือดูว่านักเรียนมีความรู้ความเข้าใจ
มากขนึ้ เพยี งใด
ขน้ั การประเมินผล
 ครูให้นักเรียนตรวจคาตอบทีถ่ ูกต้องด้วยตนเองจากเฉลยท้ายเลม่
 ครบู ันทกึ ผลการเรียนรขู้ องนักเรียนลงในแบบเกบ็ คะแนน และให้คาแนะนา

เพิ่มเติม พร้อมรบั ฟงั ข้อเสนอแนะจากนักเรียน

ง

คำช้แี จงสำหรับนกั เรียน

แบบฝึกทักษะคอมพิวเตอร์ เรื่อง การสร้างเว็บเพจดว้ ยภาษา HTML รายวชิ า
ง22205 คอมพิวเตอร์เพิ่มเติม 4 ชั้นมัธยมศึกษาปีที่ 2 กลุ่มสาระการเรียนรู้การงานอาชีพ
และเทคโนโลยี เล่มนีใ้ ช้ประกอบการจัดกิจกรรมการเรียนการสอนสาหรับนักเรียนชั้น
มธั ยมศกึ ษาปีที่ 2 ให้นักเรียนปฏิบตั ิดงั นี้

 นักเรียนฟังคาชีแ้ จงการใช้แบบฝกึ ทักษะจากครูผสู้ อนให้เข้าใจ
 นักเรียนรบั แบบฝึกทักษะคอมพิวเตอร์ เรือ่ ง การสร้างเวบ็ เพจดว้ ยภาษา HTML
รายวชิ า ง22205 คอมพวิ เตอร์เพิ่มเตมิ 4 ช้ันมัธยมศึกษาปีที่ 2 กลุ่มสาระการเรียนรู้
การงานอาชีพและเทคโนโลยี
 นกั เรียนทาแบบทดสอบก่อนเรียน เพื่อดคู วามรพู้ ืน้ ฐานของตนเอง โดยไม่เปิดดู
เฉลย
 นกั เรียนศกึ ษาแบบฝกึ ทักษะ และปฏิบัติตามแบบฝึกทกั ษะในแต่ละเล่ม ตงั้ แต่
หนา้ แรกจนถึงหน้าสดุ ท้าย หากมีข้อสงสยั หรอื มีปัญหาเกี่ยวกบั บทเรียนใหน้ ักเรียนขอ
คาแนะนาจากครูผสู้ อน
 เมื่อนักเรียนทาแบบฝกึ ทักษะครบทกุ กิจกรรมในแตล่ ะเล่มแล้ว ให้นกั เรียนทา
แบบทดสอบหลงั เรยี นเพือ่ ประเมนิ ผลการเรียนรู้
 ให้นกั เรียนตรวจคาตอบด้วยตนเอง โดยการเปิดดูคาตอบที่ถูกต้องจากเฉลย
ท้ายเล่ม

1

แบบฝึกทกั ษะคอมพิวเตอร์ เรื่อง การสรา้ งเว็บเพจด้วยภาษา HTML

เลม่ ที่ 7 การสร้างตาราง

กล่มุ สาระการเรียนร้กู ารงานอาชีพและเทคโนโลยี (คอมพิวเตอร์) ช้นั มธั ยมศกึ ษาปที ่ี 2

เวลา 2 ช่ัวโมง

มาตรฐาน ง 3.1
เข้าใจ เห็นคุณค่า และใช้กระบวนการเทคโนโลยีสารสนเทศในการสืบค้นขอ้ มูล

การเรียนรู้ การสือ่ สาร การแก้ปญั หา การทางาน และอาชพี อย่างมีประสิทธิภาพ
ประสิทธิผล และมีคณุ ธรรม

1. บอกรปู แบบการใช้คาสงั่ การสร้างตารางในภาษา HTML ได้
2. ใช้คาสง่ั ต่างๆ ในการสร้างตารางในภาษา HTML ได้
3. สามารถจัดรปู แบบของตารางให้ตรงตามทีต่ ้องการได้
4. สามารถใส่รูปภาพในตารางได้
5. มีวนิ ยั ใฝ่เรียนรู้ มุ่งมัน่ ในการทางาน และมีเจตคติที่ดีตอ่ การใชเ้ ทคโนโลยี

คอมพิวเตอร์

2

การสรา้ งตารางเหมาะสาหรบั ในกรณีทีม่ ีขอ้ มูลจานวนมากโดยที่ขอ้ มลู แตล่ ะส่วนจะมี
ความสมั พนั ธ์ซึง่ กนั และกนั ในลักษณะของแนวแถว (Row) และแนวคอลัมน์ (Column) การแสดง
ข้อมูลในรปู ของตารางจะช่วยใหเ้ ข้าใจได้ง่ายขึ้น อีกทั้งตารางยงั นามาใช้ในการจัดหน้าเวบ็ เพจ
เป็นระเบียบขึน้ ด้วย

1. โครงสร้างของตาราง
2. คาสัง่ ในการสร้างตาราง
3. การจัดรปู แบบของตาราง
4. การจดั รูปแบบให้กับเซลล์ในตาราง
5. การใส่รปู ภาพลงในตาราง

3

คาชี้แจง: ให้นักเรียนเลอื กคำตอบที่ถูกที่สุดเพียงคำตอบเดียว แล้วทำเคร่อื งหมำยกำกบำท (X)
ทับตัวอักษร ก ข ค ง ลงในช่องกระดำษคำตอบ (เวลำ 10 นำที)

1. แทก็ คาสัง่ ใดใชใ้ นการสรา้ งตวั ตาราง
ก. <td>
ข. <table>
ค. <th>
ง. <tr>

2. แท็กคาส่ังใดใช้ในการสรา้ งแถวให้กบั ตาราง
ก. <td>
ข. <row>
ค. <th>
ง. <tr>

3. แท็กคาส่ังใดใชใ้ นการสรา้ งเซลล์ข้อมูลลงในตาราง
ก. <td>
ข. <row>
ค. <th>
ง. <tr>

4. แท็กคาสั่งใดใชก้ าหนดชือ่ ใหก้ บั ตาราง
ก. <td>
ข. <tr>
ค. <th>
ง. <caption>

4

5. คาส่ังเสริมใดใช้ควบคุมระยะหา่ งระหว่างเนอ้ื ความภายในเซลลก์ ับเส้นขอบ
ก. cellspacing
ข. border
ค. cellpadding
ง. width

6. หากต้องการผสาน 3 เซลล์ภายในแถวนนั้ ๆ เข้าดว้ ยกนั เปน็ หนึง่ ต้องใช้คาส่งั ใด
ก. rowspan=“3”
ข. colspan=“3”
ค. rowspan=“2”
ง. colspan=“2”

7. คาสงั่ เสรมิ ใดสรา้ งกรอบให้กับเซลลข์ อ้ มูลในตาราง
ก. frame
ข. rules
ค. border
ง. width

8. หากตอ้ งการแทรกรปู ภาพลงในเซลล์ จะต้องแทรกไว้ภายใตแ้ ทก็ ใด
ก. <td>
ข. <th>
ค. <tr>
ง. <table>

9. ข้อใดเขียนคาส่งั ได้ถกู ตอ้ ง
ก. <td><img src=“photo.jpg”>
ข. <td img src=“photo.jpg”>
ค. <td img src=“photo.jpg”></td>
ง. <td><img src=“photo.jpg”></td>

5

10. หากต้องการใส่รปู ภาพเป็นพื้นหลงั ของตาราง คาสัง่ ในขอ้ ใดเขียนถกู ตอ้ ง
ก. <td><img src=“photo.jpg”>
ข. <tr><img src=“photo.jpg”>
ค. <table><img src=“photo.jpg”>
ง. <table background=“photo.jpg”>

*********************************

6

ใบความรทู้ ี่ 7

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

โครงสรำ้ งของตำรำง

การสรา้ งตารางน้จี ะเหมาะสาหรับในกรณที ่ีมขี ้อมลู จานวนมากโดยทข่ี ้อมลู แตล่ ะสว่ นจะมี
ความสัมพนั ธ์ซึ่งกนั และ กนั ในลักษณะของแนวแถว (Row) และแนวคอลัมน์ (column) โดยสว่ นของตวั
ตารางจะมลี ักษณะเปน็ กรอบสี่เหลีย่ ม โดยแบง่ ออกเปน็ 2 ส่วน คอื ส่วนเกบ็ ข้อมูลในแนวนอน
เรยี กว่า แถว (Row) และส่วนเกบ็ ข้อมลู ในแนวต้งั เรยี กวา่ คอลมั น์ (column) โดยแต่ละช่องของตาราง
จะเรียกวา่ เซลล์ (Cell)

คอลัมน์ (column)

แถว (Row)

เซลล์ (Cell)

คำสง่ั ในกำรสรำ้ งตำรำง
สาหรับการสรา้ งตารางน้ี จะมสี ว่ นประกอบของแท็กคาส่ัง ดงั น้ี

<table>.................</table> เปน็ คาสง่ั ในการสรา้ งตาราง

<caption>…………..</caption> เปน็ การกาหนดข้อความกากับตาราง

<tr>……………………</tr> เปน็ การกาหนดแถวของตาราง 1 แถว

<th>…………………..</th> เปน็ การกาหนดส่วนหัวหรือช่ือหวั เร่ืองให้กบั แถว

แรกของตาราง

<td>…………………..</td> เปน็ การกาหนดส่วนของข้อมูลในแต่ละแถว

7

โครงสรา้ งของการใชค้ าสง่ั สรา้ งตาราง

<table>

<caption> ข้อความกากับตาราง … </caption>

<tr>

<th> ข้อความสว่ นหวั … </th>

………………………………………….........................

………………………………………….........................

</tr>

<tr>

<td> ข้อความสว่ นของข้อมลู …</td>

………………………………………….........................

………………………………………….........................

</tr>

<tr>

<td> ขอ้ ความสว่ นของขอ้ มูล …</td>

………………………………………….........................

………………………………………….........................

</tr>

………………………………………….........................

</table>

table

row สว่ นหัว 1 (header cell) สว่ นหัว 2 (header cell) สว่ นหวั 3 (header cell)

row ข้อมลู 1 (data cell) ข้อมลู 2 (data cell) ขอ้ มลู 3 (data cell)

row ขอ้ มูล 1 (data cell) ข้อมลู 2 (data cell) ขอ้ มลู 3 (data cell)

เมอ่ื ใชแ้ ท็กคาส่ังในการกาหนดโครงสรา้ งของตาราง

<table> </tr>
<tr> <th>สว่ นหัว 1</th> <th>ส่วนหัว 1</th> <th>ส่วนหัว 1</th> </tr>
<tr> <td>ส่วนหัว 1</td> <td>ส่วนหวั 1</td> <td>สว่ นหัว 1</td> </tr>
<tr> <td>สว่ นหัว 1</td> <td>ส่วนหัว 1</td> <td>สว่ นหัว 1</td>

</table>

8

ลองทำดู การสรา้ งตารางแบบงา่ ยๆ

<!TDCTYP html> Table-1.html
<html>

<head>

<title>Table Tag</title>

</head>

<body>

<table>

<tr>

<th> ช่อื หนังสือ</th>

<th> ผูเ้ ขยี น</th>

<th> ราคาปก</th>

</tr>

<tr>

<td> คณิตศาสตร์คอมพิวเตอร์</td>

<td> ดวงใจ บญุ มีประเสริฐ</td>

<td>95</td>

</tr>

<tr>

<td> โปรแกรมตารางคานวณ</td>

<td> ดวงใจ บญุ มีประเสรฐิ </td>

<td>95</td>

</tr>

<tr>

<td> โปรแกรมกราฟิก</td>

<td>ดวงใจ บญุ มีประเสรฐิ </td>

<td>140</td>

</tr>

</table>

</body>

</html>

9

ผลทไ่ี ดบ้ นเวบ็ เบรำวเ์ ซอร์

ให้สังเกตว่าข้อมูลตารางท่ไี ด้จะยังไม่มีเส้นตาราง

กำรจดั รปู แบบของตำรำง

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

Border ใช้กาหนดใหแ้ สดงเส้นของกรอบตารางและกาหนดความหนาของกรอบตาราง
Height ใช้กาหนดความสูงของตาราง
Width ใชก้ าหนดความกว้างของตาราง
Cellspacing เปน็ การกาหนดช่องวา่ งระหว่างตารางแตล่ ะชอ่ ง
Cellpadding เปน็ การกาหนดระยะห่างระหวา่ งเสน้ ของเซลล์กับข้อมูลในเซลล์
align ใช้กาหนดการจัดวางตาแหน่งตาราง

รปู แบบดงั น้ี การใสเ่ สน้ ตาราง

เราสามารถแสดงเสน้ ตารางได้ด้วยการระบคุ าสั่ง border ลงในแท็ก <table> โดยมี

รปู แบบ <table border ="ขนาดเส้น">
เมือ่ ขนาดเส้น กาหนดเปน็ ตัวเลขความหนาของเส้นมีหนว่ ยเป็นพิกเซล

10

 ตัวอยา่ งเช่น
<table border ="1">

ผลทไ่ี ดบ้ นเวบ็ เบรำวเ์ ซอร์

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

เราสามารถกาหนดขนาดของตารางไดด้ ้วยการระบุคาสง่ั height และwidth ลงในแท็ก
<table> โดยมรี ปู แบบดงั นี้

รูปแบบ <table height = "ความสูง" width = "ความกว้าง">

เม่ือ
Height ใชก้ าหนดความสงู ของตารางทั้งตาราง โดยกาหนดเป็นตวั เลขพิกเซล

หรอื ตวั เลขเปอร์เซ็นของความสูงของหน้าต่างเบราว์เซอร์ ขณะน้ัน
Width ใช้กาหนดความกวา้ งของตารางท้งั ตารางโดยกาหนดเปน็ ตัวเลขพกิ เซล

หรอื ตวั เลขเปอร์เซ็นของความกว้างของหนา้ ตา่ งเบราวเ์ ซอร์ขณะนัน้
 ตวั อยา่ งเชน่

<table height = "150" width = "400">

11

ผลทไี่ ดบ้ นเวบ็ เบรำวเ์ ซอร์

ความกว้าง 400 พกิ เซล

ความสูง
150 พกิ เซล

การกาหนดความกวา้ งของคอลมั น์

กาหนดขนาดความกว้างของแตล่ ะคอลัมน์ให้แนน่ อนตายตวั ซง่ึ ก็สามารถกระทาไดโ้ ดย
การระบคุ าสั่ง width ลงในแทก็ <td> เชน่ เดียวกบั ท่กี าหนดลงในแทก็ <table> ในหวั ข้อท่ีแลว้ เชน่

รูปแบบ <td width="200">

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

การใสส่ ใี หก้ บั ตาราง

เราสามารถใส่สใี หก้ ับตารางไดท้ ั้งในสว่ นของพน้ื ตารางและเส้นกรอบของตารางโดยระบุคาสง่ั
<bgcolor> และ/หรือ <bordercolor> ลงในแท็ก <table> ดงั น้ี

รปู แบบ <table bgcolor = "ส"ี bordercolor = "ส"ี >

โดยที่
bgcolor ใชใ้ นการกาหนดสีใหก้ บั พนื้ ตาราง

bordercolor ใชใ้ นการกาหนดสีใหก้ บั เสน้ ตาราง
สี อาจระบุเปน็ สีมาตรฐานหรอื ตัวเลขรหัสสกี ไ็ ด้

12

ตัวอย่างเช่น
<table border = "3" width = "500" height = "150" cellspacing = "5"
cellpadding = "10" bgcolor = "yellow" bordercolor = "pink">

ผลทไี่ ดบ้ นเวบ็ เบรำวเ์ ซอร์
เสน้ ตารางสีน้าเงิน

พน้ื ตารางสชี มพู

การกาหนดตาแหนง่ การจดั วางตาราง

เราสามารถกาหนดตาแหน่งการจัดวางตารางในหน้าเว็บเพจไดด้ ้วยการะบคุ าสั่ง align
ลงในแท็ก <table> โดยมรี ูปแบบดังน้ี

รปู แบบ <table align = "ตาแหนง่ ">

เมอ่ื ใชก้ าหนดการจดั วางตาแหน่งตาราง โดยสามารถจัดวางได้ 3 ตาแหน่ง คือ
ตาแหน่ง

Left กาหนดจดั วางตารางชดิ ซา้ ยหนา้ จอ เปน็ สภาพปกติ
Right กาหนดจัดวางตารางชดิ ขวาหน้าจอ
Center กาหนดจัดวางตารางก่ึงกลางหน้าจอ

ตวั อย่างเชน่

<table border ="1" width ="600" height ="150" Cellspacing = "5"
cellpadding ="10" bgcolor ="yellow" bordercolor ="red" Align ="center">

13

ผลทไ่ี ดบ้ นเวบ็ เบรำวเ์ ซอร์

จะสงั เกตว่าตารางจะจดั วางตาแหน่งอยู่ก่งึ กลางหน้าจอ

กำรจดั รปู แบบให้กบั เซลลใ์ นตำรำง

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

align ใช้กาหนดการจัดวางตาแหนง่ ข้อมลู ในเซลล์ตามแนวนอน
valign ใช้กาหนดการจัดวางตาแหนง่ ข้อมลู ในเซลลใ์ นแนวต้ัง
rowspan เปน็ การกาหนดให้ยดื ขยายเซลลน์ ้ันใหม้ ีความสงู เท่ากับกแี่ ถว
colspan เป็นการกาหนดให้ยืดขยายเซลล์น้ันมคี วามกวา้ งเทา่ กับกคี่ อลัมน์
bgcolor เป็นการกาหนดพน้ื สภี ายในช่องเซลลข์ องตาราง

การจดั วางขอ้ ความในเซลลข์ องตาราง

เราสามารถกาหนดการจดั วางตาหน่งของข้อความในเซลลข์ องตาราง โดยสามารถกาหนดได้ทัง้
การจดั วางในแนนอนและแนวต้ัง

 การจัดวางข้อความในแนวนอนของเซลล์

เปน็ การกาหนดการวางตาแหน่งข้อความในแนวของเซลล์ โดยระบุคาสงั่ align ลงใน
แท็ก <tr> หรือ <td> หรอื <th>

รปู แบบ <tr align = "ตาแหน่ง">
<td align = "ตาแหนง่ ">

14

โดยท่ี

ถ้าระบุไว้ในแท็ก <tr> จะเป็นกาหนดการจดั วางตาแหนง่ ขอ้ มลู ทุกช่องเซลลข์ องตาราง
ท่อี ยใู่ นแถวนนั้

ถ้าระบุไว้ในแท็ก <td> หรือ <th> จะเปน็ กาหนดการจัดวางตาแหน่งข้อมลู เฉพาะเซลล์น้นั

ตาแหน่ง กาหนดได้ 3 ตาแหนง่ คือ
Left จัดวางข้อมูลใหช้ ดิ ซ้ายชอ่ งเซลล์
Center จดั วางขอ้ มลู ให้อยกู่ ึ่งกลางช่องเซลล์
Right จัดวางข้อมูลให้ชิดขวาช่องเซลล์

 การจดั วางข้อความในแนวตงั้ ของเซลล์

เป็นการกาหนดการวางตาแหน่งขอ้ ความในแนวตง้ั ของเซลล์ โดยระบคุ าสง่ั valign ลงในแท็ก
<td> หรือ <th>

รปู แบบ <td valign = "ตาแหนง่ ">

ตาแหน่ง กาหนดได้ 3 ตาแหนง่ คือ
Top จัดวางข้อมลู ใหช้ ดิ ขอบบนของช่องเซลล์
Middle จดั วางข้อมูลใหอ้ ยกู่ ่ึงกลางแนวตงั้ ของชอ่ งเซลล์
Bottom จดั วางขอ้ มูลให้ชดิ ขอบล่างของช่องเซลล์

เมือ่ เราใช้คาสัง่ align และ valign ร่วมกนั จะสามารถกาหนดการจดั วางตาแหน่งข้อความ
ในเซลล์ไดห้ ลากหลายดงั รูป

<td valign=“top” align=“center”….>

Top Left Top Center Top Right

Middle Left Middle Left Middle Left

Bottom Left Bottom Center Bottom Right

15

ลองทำดู การจัดวางข้อความในเซลล์

<!DOCTYPE html>

<html> Table-2.html

<head><title>Table Tag</title></head>

<body>

<table border="1" width="450" height="150" cellspacing="5"cellpadding="10">

<tr>

<th> ชอื่ หนังสือ </th>

<th> ผ้เู ขียน </th>

<th align=“right”>ราคาปก</th>

</tr>

<tr align="left">

<td> คณิตศาสตรค์ อมพิวเตอร์</td>

<td>ดวงใจ บุญมปี ระเสริฐ</td>

<td align="right">75</td>

</tr>

<tr align ="left">

<td> โปรแกรมตารางคานวณ</td>

<td>ดวงใจ บญุ มีประเสริฐ</td>

<td align="right">95</td>

</tr>

<tr align ="left">

<td> โปรแกรมกราฟิก</td>

<td>ดวงใจ บญุ มปี ระเสรฐิ </td>

<td align="right">140</td>

</tr>

</table>

</body>

</html>

16

ผลทไ่ี ดบ้ นเวบ็ เบรำวเ์ ซอร์

การผสานเซลลใ์ นตาราง

การผสานเซลล์ (Merging) เปน็ การทาให้เซลลห์ ลายๆ เซลลใ์ นตารางถกู รวมเปน็ เซลลเ์ ดยี ว
ซึ่งสามารถกระทาได้ท้งั เซลลใ์ นแนวนอนและแนวตงั้

 การผสานเซลล์ในแนวนอน

สามารถทาไดโ้ ดยการระบุคาสงั่ colspan ลงในแท็ก <td>

รปู แบบ <td colspan= "จานวนคอลมั น"์ > ข้อความ</td>

เปน็ การกาหนดใหท้ าการยืดขยายชอ่ งเซลลน์ ้ันให้มคี วามกว้าง
colspan เท่ากับจานวนคอลมั น์ ทร่ี ะบุ เช่น colpan=3 หมายถงึ ให้ช่อง

เซลล์นนั้ จะมคี วามกวา้ งเท่ากับ 3 คอลมั น์

 การผสานเซลล์ในแนวตั้ง

สามารถทาได้โดยการระบุคาสงั่ rowspan ลงในแท็ก <td>
รูปแบบ <td rowspan = "จานวนแถว"> ข้อความ</td>

เป็นการกาหนดใหท้ าการยดื ขยายชอ่ งเซลลน์ ้ันให้มีความสูง
rowspan เทา่ กบั จานวนแถว ทรี่ ะบุ เช่น rowspan=5 หมายถึง ใหช้ อ่ ง

เซลล์นัน้ จะมีความสูงเทา่ กบั 5 แถว

17

ลองทำดู การผสานเซลล์

<!DOCTYPE html>
<html> Table-3.html

<head><title>table tag</title></head>
<body>
<table border=“1” width="500" height="5" cellspacing="2" cellpadding="5">
<tr>
<th colspan="4"><h3>หนงั สอื ดีมคี ุณภาพ</h3></th>
</tr>
<tr>
<td rowspan="5"><b>หลักสตู รใหม่</b></td>
</tr>
<tr>
<th>ชื่อหนังสอื </th>
<th>ผเู้ ขยี น</th>
<th align="right">ราคาปก</th>
</tr>
<tr align="left">
<td>คณติ ศาสตร์คอมพิวเตอร์</td>
<td>ดวงใจ บุญมปี ระเสรฐิ </td>
<td align="right">75</td>
</tr>
<tr align="left">
<td>โปรแกรมตารางการคานวณ</td>
<td>ดวงใจ บญุ มปี ระเสริฐ</td>
<td align="right">95</td>
</tr>
<tr align="left">
<td>โปรแกรมกราฟิก</td>
<td>ดวงใจ บุญมีประเสรฐิ </td>
<td align="right">140</td>
</tr>
</table>
</body>
</html>

18

ผลทไ่ี ดบ้ นเวบ็ เบรำวเ์ ซอร์

การใสส่ ใี หก้ บั เซลล์

เราสามารถใส่สใี หก้ ับเซลล์ในตารางไดโ้ ดยระบคุ าสั่ง bgcolor ลงในแท็กต่างๆ ดงั น้ี
<td> เพอื่ ใสส่ ใี ห้กับเซลล์
<th> เพื่อใสส่ ใี หก้ บั เซลล์หัวเรอื่ ง
<tr> เพือ่ ใส่สใี หก้ ับเซลล์ในแถวนั้นท้งั แถว

ซึ่งหากไม่มีการระบุคาสงั่ bgcolor จะได้พ้ืนเซลลเ์ ป็นสขี าว
รปู แบบ <td bgcolor ="ส"ี >

โดยท่ี สี อาจระบเุ ปน็ ช่อื สมี าตรฐานหรอื ตวั เลขรหสั สกี ไ็ ด้

19

ลองทำดู การใส่สีใหก้ บั เซลล์

<!DOCTYPE html> Table-4.html
<html>
<head><title>table tag</title></head>
<body>
<table border=“1” width="500" height="5" cellspacing="2" cellpadding="5">
<tr>
<th colspan="4" bgcolor="red"><font color="white"><h3>หนังสือดมี ี
คณุ ภาพ</h3></th>
</tr>
<tr bgcolor="yellow">
<td rowspan="5" bgcolor="cyan"><b>หลกั สูตรใหม่</b></td>
</tr>
<tr bgcolor="yellow">
<th>ชอ่ื หนังสอื </th>
<th>ผเู้ ขยี น</th>
<th align="right">ราคาปก</th>
</tr>
<tr align="left">
<td>คณิตศาสตรค์ อมพิวเตอร์</td>
<td>ดวงใจ บุญมีประเสริฐ</td>
<td align="right">75</td>
</tr>
<tr align="left">
<td>โปรแกรมตารางการคานวณ</td>
<td>ดวงใจ บุญมปี ระเสริฐ</td>
<td align="right">95</td>
</tr>
<tr align="left">
<td>โปรแกรมกราฟิก</td>
<td>ดวงใจ บุญมปี ระเสรฐิ </td>
<td align="right">140</td>
</tr>
</table>
</body>
</html>

20

ผลทไี่ ดบ้ นเวบ็ เบรำวเ์ ซอร์

กำรใสร่ ปู ภำพลงในตำรำง

เราสามารถนารูปภาพมาใสล่ งในตารางได้ โดยอาจเปน็
1) ใสร่ ูปภาพลงในเซลลข์ องตาราง
2) ใส่รปู ภาพเปน็ พ้นื หลงั ของตาราง

การใสร่ ปู ภาพลงในเซลลข์ องตาราง

การใส่รูปภาพลงในเซลล์ของตารางจะถือเป็นส่วนหน่งึ ของขอ้ มลู เราสามารถใชแ้ ท็ก <img> ได้
เชน่ เดยี วกบั การใส่รูปภาพท่ีได้กลา่ วมาแล้ว แค่เพยี งใสล่ งในแท็ก <td> หรอื <th> ดังนี้

รูปแบบ <td>
<img src="ช่ือไฟลร์ ูปภาพ"
Width="ความกวา้ งของรปู "
Height="ความสูงของรูป">

</td>

21

 จากไฟล์ Table-4.html นามาทาการใส่รูปภาพช่ือ book.png (หาได้จากอนิ เทอรเ์ นต็ )

<table border="1" width="500" height="500" Table-5.html
Cellspacing="2" cellpadding="5">

<tr>

<th colspan="4" bgcolor="red">

<img src="book.png" width="50" align="middle">

<font color="white><font size="5">หนังสอื ดีมีคุณภาพ</th>

</tr>

ผลทไ่ี ดบ้ นเวบ็ เบรำวเ์ ซอร์
รูปภาพท่ใี สล่ งในเซลล์

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

เป็นการใส่รูปภาพเพือ่ แสดงเปน็ พ้นื หลงั ของตารางเพื่อความสวยงาม โดยการกาหนด
คาสั่ง background ลงในแทก็ <table> ดงั น้ี

รูปแบบ <table background= “ชื่อไฟล์รูปภาพ">

22

 จากไฟล์ Table-5.html มาเพิ่มเติมการใสร่ ปู ภาพเป็นพ้ืนหลงั ชอื่ bg.jpg (หาได้จาก
อนิ เทอรเ์ น็ต)

Table-5.html

<table border="1" width="500" background="bg.jpg"
cellspacing="2" cellpadding="5">

ผลทไี่ ดบ้ นเวบ็ เบรำวเ์ ซอร์

สว่ นทีไ่ ม่ได้มีการกาหนดสีไวจ้ ะถกู แสดงดว้ ยรูปภาพน้นั เปน็ พ้ืนหลังแทน

23

7.1

ช่อื -สกุล.............................................................ชั้น...................เลขที่..................
คำชแี้ จง :

1. จงเขียนโครงสรา้ งของตารางในภาษา HTML (5 คะแนน)

24

2. จงเขียนคาสัง่ ต่อไปนี้ใหถ้ ูกต้องตามหลักภาษา HTML (5 คะแนน)
<caption> Primetime Television </caption>
<table>
<tr> </tr>
<th> 19:30 </th>
<th> 20:00 </th>
<th> 20:30 </th>
<tr>
<td> Batman </td>
<td> Spiderman </td>
<td> Ultraman </td>
<tr>
</tr>
</table>

…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………

25

7.2

ช่อื -สกุล.............................................................ชั้น...................เลขท่ี..................

คำชแี้ จง (10 คะแนน)

ขั้นตอนกำรปฏบิ ัติ

 ใหน้ ักเรยี นเปดิ โปรแกรม notepad ขึ้นมา
 พิมพ์คาส่ังภาษา HTML เพ่อื แสดงผลลพั ธบ์ นเวบ็ เบราว์เซอร์ ดงั รูป

 บนั ทกึ แฟม้ ขอ้ มลู ช่ือ EX7-1.html บันทึกไว้ในไดร์ D:\HTML\

 ตรวจดผู ลลพั ธ์ โดยเปิดผา่ นโปรแกรมเวบ็ เบราวเ์ ซอร์ Internet Explorer

*********************************

26

คาชี้แจง: ให้นักเรียนเลือกคำตอบท่ีถูกท่ีสุดเพียงคำตอบเดียว แล้วทำเคร่อื งหมำยกำกบำท (X)
ทับตัวอักษร ก ข ค ง ลงในช่องกระดำษคำตอบ (เวลำ 10 นำที)

1. แทก็ คาส่ังใดใช้ในการสรา้ งแถวให้กบั ตาราง
ก. <td>
ข. <row>
ค. <th>
ง. <tr>

2. แท็กคาส่ังใดใชใ้ นการสรา้ งตัวตาราง
ก. <td>
ข. <table>
ค. <th>
ง. <tr>

3. แทก็ คาสั่งใดใช้กาหนดชือ่ ใหก้ บั ตาราง
ก. <td>
ข. <tr>
ค. <th>
ง. <caption>

4. แท็กคาสั่งใดใช้ในการสรา้ งเซลล์ข้อมลู ลงในตาราง
ก. <td>
ข. <row>
ค. <th>
ง. <tr>

27

5. คาสั่งเสริมใดใช้ควบคุมระยะห่างระหวา่ งเน้อื ความภายในเซลล์กับเสน้ ขอบ
ก. cellspacing
ข. border
ค. cellpadding
ง. width

6. หากตอ้ งการผสาน 3 เซลล์ภายในแถวนน้ั ๆ เข้าด้วยกนั เป็นหนึ่ง ต้องใช้คาสั่งใด
ก. rowspan=“3”
ข. colspan=“3”
ค. rowspan=“2”
ง. colspan=“2”

7. หากตอ้ งการแทรกรปู ภาพลงในเซลล์ จะตอ้ งแทรกไวภ้ ายใต้แทก็ ใด
ก. <td>
ข. <th>
ค. <tr>
ง. <table>

8. คาส่ังเสรมิ ใดสรา้ งกรอบให้กับเซลล์ขอ้ มลู ในตาราง
ก. frame
ข. rules
ค. border
ง. width

9. หากตอ้ งการใสร่ ูปภาพเปน็ พืน้ หลังของตาราง คาสัง่ ในข้อใดเขียนถกู ตอ้ ง
ก. <td><img src=“photo.jpg”>
ข. <tr><img src=“photo.jpg”>
ค. <table><img src=“photo.jpg”>
ง. <table background=“photo.jpg”>

28

10. ข้อใดเขียนคาส่ังได้ถูกต้อง
ก. <td><img src=“photo.jpg”>
ข. <td img src=“photo.jpg”>
ค. <td img src=“photo.jpg”></td>
ง. <td><img src=“photo.jpg”></td>

*******************************************

29

บรรณำนกุ รม

ณชั ติพงศ์ อทู อง. การสร้างเว็บเพจ (ภาษา HTML). กรงุ เทพฯ : สานกั พิมพเ์ อมพนั ธ์
จากดั , 2555.

ประชา พฤกษ์ประเสรฐิ . สร้างเว็บและเพิม่ ลูกเล่นด้วย HTML&XHTML. พิมพ์ครั้งที่ 3
กรุงเทพฯ : รีไวว่า, 2555.

ฝา่ ยตาราวิชาการคอมพิวเตอร์. การสร้างเวบ็ เพจ (HTML). กรงุ เทพฯ : ซีเอ็ดยเู คชั่น,
2555.

ภชุ งค์ จันทร์เปล่ง. การพัฒนาเวบ็ เพจด้วยภาษา HTML. ปทมุ ธานี : มีเดียอินเทล
ลิเจนซ์ เทคโนโลยี, 2556.

สิทธิชัย ประสานวงศ์. การสรา้ งเว็บไซต์. กรุงเทพฯ : ซอฟท์เพรส, 2559.

30

ภำคผนวก

31

กระดำษคำตอบแบบทดสอบก่อนเรยี น
เลม่ ที่ 7 กำรสรำ้ งตำรำง

ช่อื -สกุล............................................................................ชั้น.........................เลขท่ี…..................…

ข้อ ก ข ค ง

1
2
3
4
5
6
7
8
9
10

สรุปคะแนน

คะแนนเต็ม คะแนนท่ีได้

32

กระดำษคำตอบแบบทดสอบหลังเรียน
เล่มที่ 7 กำรสรำ้ งตำรำง

ช่อื -สกุล............................................................................ชั้น.........................เลขท่ี…..................…

ข้อ ก ข ค ง

1
2
3
4
5
6
7
8
9
10

สรุปคะแนน

คะแนนเต็ม คะแนนท่ีได้

33

เฉลยแบบทดสอบ

เล่มท่ี 7 กำรสรำ้ งตำรำง

แบบทดสอบก่อนเรยี น แบบทดสอบหลงั เรียน

ข้อ ก ข ค ง ขอ้ ก ข ค ง

1X 1X
2X 2X
3X 3X
4X 4X
5X 5X
6X 6X
7X 7X
8X 8X
9X 9X
10 X 10 X

34

เฉลย

7.1

คำชแี้ จง :

1. จงเขียนโครงสร้างของตารางในภาษา HTML (5 คะแนน)

<table>
<caption> ข้อความกากบั ตาราง … </caption>
<tr>
<th> ข้อความสว่ นหัว … </th>
………………………………………….........................
………………………………………….........................
</tr>
<tr>
<td> ข้อความสว่ นของข้อมลู …</td>
………………………………………….........................
………………………………………….........................
</tr>
<tr>
<td> ข้อความส่วนของข้อมลู …</td>
………………………………………….........................
………………………………………….........................
</tr>

</table>

35

2. จงเขียนคาสง่ั ต่อไปนใ้ี หถ้ ูกตอ้ งตามหลกั ภาษา HTML (5 คะแนน)
<caption> Primetime Television </caption>
<table>
<tr> </tr>
<th> 19:30 </th>
<th> 20:00 </th>
<th> 20:30 </th>
<tr>
<td> Batman </td>
<td> Spiderman </td>
<td> Ultraman </td>
<tr>
</tr>
</table>

……………<…ta…b…le…>…………………………………………………………………………………………………………
…………………………<…ca…p…ti…o…n>……Pr…im…e…t…im…e……Te…l…ev…is…io…n…<…/…ca…p…ti…o…n>…………………………………
…………………………<…tr…>………<t…h…>…1…9…:3…0…<…/t…h…>………………………………………………………………
………………………………………<t…h…>…2…0…:0…0…<…/t…h…>………………………………………………………………
………………………………………<t…h…>…2…0…:3…0…<…/t…h…>………………………………………………………………
…………………………<…/t…r>…………………………………………………………………………………………………
…………………………<…tr…>………<t…d…>…B…a…tm…a…n…<…/…td…>……………………………………………………………
………………………………………<t…d…>…S…p…id…er…m…a…n…<…/…td…>………………………………………………………
………………………………………<t…d…>…U…lt…ra…m…a…n…<…/…td…>…………………………………………………………
…………………………<…/t…r>…………………………………………………………………………………………………
……………<…/…ta…b…le…>………………………………………………………………………………………………………

36

เฉลย

7.2

คำชแ้ี จง (10 คะแนน)

ข้ันตอนกำรปฏบิ ตั ิ

 ให้นักเรียนเปิดโปรแกรม notepad ข้ึนมา
 พมิ พ์คาสั่งภาษา HTML เพื่อแสดงผลลพั ธ์บนเว็บเบราว์เซอร์ ดังรูป

 บนั ทกึ แฟม้ ขอ้ มูลชื่อ EX7-1.html บนั ทึกไว้ในไดร์ D:\HTML\

 ตรวจดูผลลัพธ์ โดยเปดิ ผ่านโปรแกรมเว็บเบราวเ์ ซอร์ Internet Explorer

*********************************

37

เฉลยคำส่งั ภำษำ HTML

38

บันทึกคะแนนแบบฝึกทักษะ

เลม่ ที่ 7 กำรสร้ำงตำรำง

ชื่อ...................................นามสกลุ ................................ชั้น................เลขท่ี…...…

แบบทดสอบ คะแนนเต็ม คะแนนท่ไี ด้

กอ่ นเรยี น 10
หลังเรียน 10

คะแนนความกา้ วหน้า

แบบฝึกทกั ษะ คะแนนเต็ม คะแนนท่ไี ด้

แบบฝึกทกั ษะท่ี 7.1 10
แบบฝึกทกั ษะท่ี 7.2 10
20
รวมคะแนน

ร้อยละของคะแนนรวมกจิ กรรมฝกึ ทกั ษะ = (คะแนนรวมท่ีได้ X 100) / คะแนนเต็ม

เกณฑ์กำรให้คะแนนจำกกำรทำแบบฝึกทักษะ

4 ระดับดีมาก หมายถึง ได้คะแนนคดิ เปน็ ร้อยละ 90 ข้นึ ไป

3 ระดบั ดี หมายถึง ได้คะแนนคดิ เป็นร้อยละ 70-89

2 ระดับพอใช้ หมายถึง ได้คะแนนคดิ เปน็ ร้อยละ 50-69

1 ระดบั ต้องปรบั ปรุง หมายถึง ได้คะแนนคดิ เป็นร้อยละต่ากว่า 50

เกณฑก์ ารผ่าน นกั เรียนได้ผลคะแนนอยา่ งน้อยระดบั คณุ ภาพ 3 (ระดับดี)

ลงชื่อ...................................................................ผบู้ ันทกึ วนั ท.ี่ ........../.............../................

39

ประวตั ผิ จู้ ดั ทำ

นำงสำวดวงใจ บญุ มปี ระเสรฐิ

 ปรญิ ญำตรี
บรหิ ำรธรุ กิจบัณฑิต (บธ.บ. คอมพิวเตอร์ธรุ กิจ)

มหำวิทยำลัยรำชภฏั อดุ รธำนี

 ปรญิ ญำโท
กำรศกึ ษำมหำบัณฑติ (กศ.ม. เทคโนโลยีกำรศึกษำ)

มหำวิทยำลยั มหำสำรคำม

 ครู วทิ ยฐำนะครชู ำนำญกำร
โรงเรียนบ้ำนโคกทุ่งน้อย

อำเภอสวุ รรณคูหำ จังหวัดหนองบวั ลำภู
สำนกั งำนเขตพนื้ ท่กี ำรศึกษำประถมศกึ ษำหนองบัวลำภู เขต 2

40