1. ใบความรู้ ที 15
เรือง การสร้ างตารางและการเชือมโยง
การสร้างเวบเพจใน ปั จจุบนมีการนําตารางเข้ามาเกียวข้องกับหลาย ๆ ส่วน ตังแต่การสร้างตารางเพือแสดง
ั
ความสัมพันธ์ในลักษณะแถว (Row) และคอลัมน์
ั ่
(Column) รวมถึงการแบ่งขอบเขตให้กบข้อความเพือการจํากัดและควบคุมข้อความให้อยูในส่วนทีเราต้องการ
คําสังสําหรับสร้างตารางประกอบด้วยคําสังดังนี
Tag คําอธิบาย
<TABLE> ... </TABLE> คําสังในการสร้างตาราง
<CAPTION> ... </CAPTION> คําสังในการกําหนดข้อความกํากับตาราง
<TR> ... </TR> คําสังในการกําหนดแถวของตาราง 1 แถว
<TH> ... </TH> คําสังในการกําหนดส่วนหัวของตารางแถว
แรก
<TD> ... </TD> คําสังในการกําหนดคอลัมน์ของข้อมูลในแถว
ตัวอย่ าง การสร้างตาราง 5 แถว 3 คอลัมน์
ภาพแสดงการใช้คาสังสร้างตาราง
ํ ภาพแสดงผลของการใช้คาสังสร้างตาราง
ํ

2. จากภาพมีการใช้คาสัง <tr> จํานวน 5 ชุด แสดงว่าเป็ นการสร้างตาราง 5 แถว และในแต่ละแถว มีการใช้
ํ
คําสัง <td> จํานวน 3 ชุด แสดงว่าในแต่ละแถว แบ่งออกเป็ น 3 คอลัมน์
ในการสร้างตาราง จําเป็ นต้องมาการตกแต่งตาราง เช่น ขนาดของตาราง สี เส้นขอบ หรื อสี พนในตาราง เป็ นต้น ซึง
ื
คําสังทีใช้ในการตกแต่งตาราง มีดงนี
ั
1. เส้ นขอบ
เป็ นการกําหนดเส้นขอบให้ กับตารางคือเส้นขอบภายนอกและเส้นภายในหากไม่มีการกําหนดเส้นขอบจะ
ไม่แสดงที เบราเซอร์ จะกําหนดไว้ในคําสัง
TABLE คือคําสัง BORDER
รู ปแบบ
<TABLE BORDER = ความหนาของเส้นขอบ >
ความหนาของเส้นขอบทังภายในและภายนอกโดยกําหนดเป็ นตัวเลขและมีหน่วยเป็ นพิก เซล เช่น 1, 2, 3 เป็ น
ต้น หากไม่กาหนดจะมีค่าเป็ น 0 เสมอ คือไม้มีเส้นขอบของตาราง ถ้าต้องการมีเส้นขอบตอรางหนา ให้กาหนดเป็ นค่าตัวเลข
ํ ํ
มาก ๆ
ตัวอย่ าง การกําหนดเส้นขอบมีขนาดเท่ากับ 1
ภาพแสดงการใช้คาสัง BORDER
ํ
2. สีของเส้ นขอบ
ั ํ
เป็ นการเปลียนสี ให้กบเส้นขอบภายในและภายนอกของตาราง หากไม่กาหนดจะเป็ นสี ดาในการกําหนดสี
ํ
ต้องกําหนดเส้นขอบของตารางก่อน โด
ยใช้คาสัง BORDERCOLOR
ํ

3. รู ปแบบ
<TABLE BORDERCOLOR = สี ของเส้นขอบ>
ตัวอย่ าง การกําหนดสี เส้นเป็ นสี นาเงิน
ํ ภาพแสดงการใช้คาสัง BORDERCOLOR
ํ
3. ขนาดของตาราง
เป็ นการกําหนดความกว้าง (WIDTH) และความสูง (HEIGHT) ของตารางต้องทําการกําหนดเส้นขอบก่อน ใน
การกําหนดขนาดมีหน่วย เป็ น
เปอร์เซ็นต์หรื อพิกเซลได้
รู ปแบบ
<TABLE WIDTH = " ขนาดความกว้าง " HEIGHT = " ขนาดความสูง "> เช่น
<table border=1 width = "300" height = "180"> เป็ นการสร้างตารางทีมีเส้นขอบหนาเท่ากับ 1
กว้าง 300 พิกเซล สูง 180 พิกเซล
<table border=3 width = "90%" height="200" > เป็ นการสร้างตารางทีมีเส้นขอบหนาเท่ากับ 3 กว้าง
90% สูง 200 พิกเซล

4. ตัวอย่ าง การสร้างตารางกว้าง 300 พิกเซล สูง 200 พิกเซล
ภาพแสดงการกําหนดขนาดของ ตาราง ภาพแสดงผลลัพธ์การกําหนด
ขนาดของตาราง
4. สีพนตาราง
ื=
กําหนดสี พืนของตาราง สามารถกําหนดทังตาราง ทังแถว หรื อเฉพาะเซลล์ใดเซลล์หนึงโดยใช้คาสัง
ํ
BGCOLOR
4.1 การกําหนดสี ทงตาราง ใช้คาสัง <table bgcolor="ชือสี พืนตาราง"> เช่น <table bgcolor = "green">
ั ํ
4.2 การกําหนดสี ทงแถวเป็ นสี เดียวกัน ใช้คาสัง bgcolor กําหนดไว้ในส่วน <tr> เช่น <tr bgcolor =
ั ํ
"green">
4.3 การกําหนดสี เฉพาะเซลล์ทีต้องการ ใช้คาสัง bgcolor กําหนดไว้ในส่วน <td> เช่น <td bgcolor =
ํ
"green">
5. การจัดตําแหน่ งตาราง
เป็ นการกําหนดตําแหน่งของตารางๆบนเบราเซอร์ โดยใช้คาสัง ALIGN กําหนดไว้ในคําสัง <TABLE>
ํ
ํ ่ ้
หากไม่กาหนดตารางจะอยูดานซ้ายของจอเบราเซอร์
รู ปแบบ
<TABLE ALIGN = "ตําแหน่ง">
ตําแหน่งในการจัดวางตารางบนหน้าจอเบราเซอร์ มีชิดซ้าย (LEFT), ชิดขวา (RIGHT) และกึงกลาง
(CENTER)

5. 6. การกําหนดตําแหน่ งข้ อความในตาราง
6.1 จัดตําแหน่งข้อความตามแนวนอน จะมี 3 ตําแหน่ง คือ ซ้าย (left) , กึงกลาง (center) และ ขวา (right)
ตัวอย่างเช่น
- จัดกึงกลางทังแถว ใช้คาสัง <tr align="center">
ํ
- จัดชิดขวาเฉพาะช่องใดช่องหนึง ใช้คาสัง <td align="right">
ํ
6.2 จัดตําแหน่งข้อความตามแนวตัง ประกอบด้วย ชิดขอบบน (TOP) , ชิดขอบล่าง (BOTTOM) , กึงกลาง
(Middle)
- การจัดตําแหน่งข้อความชิดขอบบน
่ ํ
ในการจัดข้อความอยูชิดขอบบนทังแถว ให้กาหนดไว้ในคําสัง <TR> เช่น <TR VALIGN =
"TOP">
่ ํ
ในการจัดข้อความอยูชิดขอบบน เฉพาะเซลล์ ให้กาหนดไว้ในคําสัง <TD> เช่น <TD VALIGN
= "TOP">
ความหมาย
การลิงค์ เป็ นการเชือมโยงข้อมูลเอกสารบนเว็บเพจ จากจุดหนึงไปยังจุดทีต้องการ หรื อจากเว็บไซต์หนึงไปยัง
ํ
อีกเว็บไซต์หนึง ลักษณะตัวอักษรแตกต่างไปจากเดิม หากไม่กาหนดการเชือมโยงข้อความทีเป็ นตัวเชือมโยงตัวอักษรจะ
เป็ นสี นาเงิน และมีขีดเส้นใต้ หรื อเชือมโยงด้วยรู ปภาพก็ได้ เมือเลือนเมาส์มาชีบริ เวณข้อความหรื อรู ปภาพ ทีมีการ
ํ
เชือมโยงจะเป็ นรู ปนิวมือ หากเชือมโยงเสร็ จแล้วกลับมาทีเดิม สี ของข้อความจะเปลียนไปจากสี นาเงิน แสดงว่าข้อความ
ํ
นันผ่านการเชือมโยงมาแล้ว
ประเภทของการลิงค์
การกําหนดลิงค์ในภาษา HTML มี 2 ประเภท ดังนี
1. ลิงค์ภายใน (Internal Link)
เป็ นการเชือมโยงเอกสาร ภายในเว็บไซต์เดียวกัน ไม่ได้เชือมโยงข้ามเว็บไซต์อืน โดยการใช้คาสัง <A
ํ
HREF= "ชือเว็บเพจ">
เช่น <A HREF="student.html">ข้อมูลนักเรี ยน </A>

6. 2. ลิงค์ภายนอก (External Link)
เป็ นการเชือมโยงเอกสาร ข้ามเว็บไซต์ต่าง ๆ ในระบบเครื อข่ายอินเทอร์เน็ต (URL) โดยการใช้คาสัง <A
ํ
HREF= "ชือเว็บไซต์">
เช่น <A HREF="http://www.hotmail.com">รับ-ส่งจดหมาย</A>
ํ
คําสัง <A> เป็ นคําสังทีใช้กาหนดการเชือมโยง สามารถใช้เชือมโยงข้อมูลภายในเว็บเพจเดียวกัน ประกอบด้วย
แอตทริ บิวต์ NAME และ HREF
่
NAME เป็ น แอตทริ บิวต์ในการกําหนดชือส่วนต่าง ๆ ทีอยูใน หน้าเอกสารทีต้องการเชือมโยง เพือสะดวกในการใช้
คําสังเชือมโยงข้อมูลภายในเอกสาร
รู ปแบบคําสัง
<A NAME = Label>.....ข้อความ.....</A>
โดยที
Label คือ ชือของข้อมูลในตําแหน่งของเอกสารทีต้องการกําหนด เพือให้ทราบว่า ต้องการเชือมโยงไปยัง
ตําแหน่งใด
็ ํ
◌HREF เป็ นแอตทริ บิวต์ทีใช้กาหนดเป้ าหมายทีต้องการเชือมโยงไป โดยการใส่ Label ของข้อมูลทีต้องการเชือมโยง
และใส่ขอความทีแสดงให้ทราบว่าได้เชือมโยง ไปยังส่วนใดของหน้าเอกสาร
้
รู ปแบบ
คําสัง
<A HREF =#Label>.....ข้ อความ.....</A>
โดยที
Label คือชือตําแหน่งข้อมูลในเอกสารทีกําหนดไว้ เพือใช้ในการเชือมโยงข้อมูลทีต้องการ โดยการกําหนดชือ
ตําแหน่งทีต้องการจะเชือมโยงจะต้องใส่เครื องหมาย # นําหน้าเพือให้ทราบว่าเป็ นการเชือมโยงในเอกสารหน้า
เดียวกัน

7. ตัวอย่าง
<html>
<head>
<title> การเชือมโยงภายในเว็บเพจเดียวกัน </title>
</head>
<body>
<b> ผลงานดีเด่น 3 ปี การศึกษา</b><br><br>
<a name="top">
<a href="#2550">ผลงานดีเด่นปี การศึกษา 2550</a><br>
<a href="#2551">ผลงานดีเด่นปี การศึกษา 2551</a><br>
<a href="#2552">ผลงานดีเด่นปี การศึกษา 2552</a><br>
<a name="2550">
<b>ผลงานดีเด่นปี การศึกษา 2550</b><br>
1. ................................... <br><br><br>
2. ................................... <br><br><br>
3. ................................... <br><br><br>
4. ................................... <br><br><br>
5. ................................... <br><br><br>
<a href="#top">กลับบนสุด</a><br>
<a name="2551">
<b>ผลงานดีเด่นปี การศึกษา 2551</b><br>
1. ................................... <br><br><br>
2. ................................... <br><br><br>
3. ................................... <br><br><br>
4. ................................... <br><br><br>
5. ................................... <br><br><br>
<a href="#top">กลับบนสุด</a><br>
<a name="2552">
<b>ผลงานดีเด่นปี การศึกษา 2552</b><br>
1. ................................... <br><br><br>
2. ................................... <br><br><br>
3. ................................... <br><br><br>

8. 4. ................................... <br><br><br>
5. ................................... <br><br><br>
<a href="#top">กลับบนสุด</a><br>
</body>
</html>
จากตัวอย่างมีการใช้ <br> หลายครัง เพือให้เห็นผลลัพธ์ชดเจน ซึงการเชือมโยงลักษณะนี จะเหมาะสําหรับเอกสารทีมีความยาวมาก
ั
เพือให้ดูขอมูลได้สะดวกไม่ตองเลือน Scrollbar มาก
้ ้

9. คําสัง <A HREF> เป็ นคําสังทีใช้ในการเชือมโยงเอกสาร โดยมีแอตทริ บิวต์ HREF ในการเชือมโยงไปยังไฟล์อืน
จะต้องระบุชือหน้าเว็บเพจทีต้องการด้วย .HTMLหรื อ .HTM (เอกสารนันเป็ น HTML)
รู ปแบบคําสัง
<A HREF = /Path/Filename.html >.....ข้อความ.....</A>
โดยที
HREF คือ แอตทริ บิวต์ทีใช้ในการเชือมโยงข้อมูล
Path คือ การระบุตาแหน่งของไฟล์ทีต้องการเชือมโยงถึง
ํ
Filename.html คือ ชือของไฟล์ทีต้องการเชือมโยงไปถึง
ตัวอย่างการลิงค์ต่างเว็บเพจ (กรณี แต่ละเว็บเพจอยูในโฟล์เดอร์เดียวกัน จึงไม่ตองใส่ Path)
่ ้
<html>
<head>
<title> การเชือมโยงต่างเว็บเพจ</title>
</head>
<body>
<b> อาหารชาวอีสาน </b><br><br>
<a href="food1.html">ส้มตํา</a><br>
่
<a href="food2.html">ไก่ยาง</a><br>
<a href="food3.html">ปลาเผา</a><br>
</body>
</html>
บันทึกชือ menu.html
ตัวอย่างข้างบนเป็ นการเชือมโยงไปยังเว็บเพจอืนหรื อไฟล์อืน จากตัวอย่างเป็ นการเชือมโยงไปยัง
่
เว็บเพจส้มตํา (food1.html) ไก่ยาง (food2.html) และปลาเผา (food3.html)

10. <html>
<head>
<title>ส้มตํา</title>
</head>
<body>
<b> ส้มตํา </b><br><br>
ส้มตําเป็ น
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx <br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
<br>
<a href="menu.html">กลับเมนู</a><br>
</body>
</html>
บันทึกชือ food1.html
ตัวอย่างข้างบนเป็ นเว็บเพจส้มตํา โดยให้รายละเอียดเกียวกับส้มตํา ตอนท้ายของเว็บเพจมีการ
เชือมโยงกลับไปยังหน้าเมนู (menu.html)
<html>
<head>
่
<title>ไก่ยาง</title>
</head>
<body>
่
<b> ไก่ยาง </b><br><br>
่
ไก่ยาง เป็ น
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx <br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>

11. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
<br>
<a href="menu.html">กลับเมนู</a><br>
</body>
</html>
บันทึกชือ food2.html
่ ่
ตัวอย่างข้างบนเป็ นเว็บเพจไก่ยาง โดยให้รายละเอียดเกียวกับไก่ยาง ตอนท้ายของเว็บเพจมีการ
เชือมโยงกลับไปยังหน้าเมนู (menu.html)
<html>
<head>
<title>ปลาเผา</title>
</head>
<body>
<b> ปลาเผา </b><br><br>
ปลาเผาเป็ น
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx <br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
<br>
<a href="menu.html">กลับเมนู</a><br>
</body>
</html>
บันทึกชือ food3.html

12. จุดเชือมโยงนอกจากจะใช้ขอความแล้วยังสามารถใช้รูปภาพหรื อสัญลักษณ์เป็ นจุด เชือมโยงได้ เพือให้เว็บเพจมี
้
่
ความน่าสนใจและสื อความหมายได้ดียงขึน จุดสังเกตคือเมือเลือนเมาส์ผานไปยังตําแหน่งจุดเชือมโยง Mouse Pointer จะ
ิ
เปลียนเป็ นรู ปมือ
รู ปแบบคําสัง
<A HREF = URL> <IMG SRC = Filename> </A>
โดยที
HREF คือ แอตทริ บิวต์ทีใช้ในการเชือมโยงข้อมูล
URL คือ ชือของเว็บไซต์ หรือ IP Address ของเว็บไซต์ทีต้องการเชือมโยงถึง หรื อ
ตําแหน่งทีเชือมโยง
IMG SRC คือ คําสังทีใช้ในการแทรกรู ปภาพ
Filename ่
คือ ชือของไฟล์รูปภาพ จะต้องระบุตาแหน่งของภาพว่าอยูในโฟลเดอร์ใด เป็ นไฟล์นามสกุลอะไร
ํ
ตัวอย่าง
<html>
<head>
<title> การเชือมโยงด้วยรู ปภาพ</title>
</head>
<body>
<center>
<b>เว็บไซต์สาหรับสื บค้นข้อมูล</b><br><br>
ํ
คลิกทีรู ปภาพ search engine ทีท่านต้องการ <br>
<a href="http://www.google.com"><img src="google.jpg"></a><br>
<a href="http://www.yahoo.com"><img src="yahoo.jpg"></a><br>
<a href="http://www.bing.com"><img src="bing.png"></a><br>
</center>
</body>
</html>

13. จากตัวอย่าง จะได้เว็บเพจทีมีรูปของ Search Engine ทีสําคัญ คือ รู ป google , yahoo และ bing เมือเรานําเมาไปคลิก
ก็จะเชือมโยงไปยังเว็บไซต์นนได้
ั
ดังภาพ
การเชือมโยง แบบอีเมล์ เป็ นการเชือมโยงโดยมีจุดหมาย ในการส่งจดหมายอิเล็กทรอนิกส์ โดยจะเปิ ดโปรแกรม Outlook Express และโป
่
กําหนดทีอยูของผูรับให้อตโนมัติ
้ ั
รู ปแบบคําสัง
<A HREF="mailto:E-mai Address"> ข้อความ </A>
โดยที
mailto คือการกําหนดการเชือมโยงโดยการใช้อีเมล
:E-mai Address คือ อีเมลทีต้องการเชือมโยง
ตัวอย่าง

14. <html>
<head>
<title> การเชือมโยงไปอีเมล์</title>
</head>
<body>
<center>
<b>การเชือมโยงไปอีเมล์</b><br><br>
<a href="mailto:krusomrin@hotmail.com">ติดต่อผูดูแลระบบ</a>
้
</center>
</body>
</html>
คําสัง <BODY Link> เป็ นคําสังทีใช้ในการกําหนดสี ของตัวอักษรก่อนทีจะมีการคลิก เพือเชือมโยงไปยังข้อมูลทีต้องการ
การกําหนดสี ของตัวอักษรทีใช้ในการเชือมโยงข้อมูล และการจะให้มีการขีดเส้นใต้ตวอักษร
ั
รู ปแบบคําสัง
<BODY LINK = "#Color" ALINK = "#Color" VLINK = "#Color">
โดยที
LINK ํ
คือ แอตทริ บิวต์ทีใช้กาหนดสี ของตัวอักษร ก่อนการคลิก

15. ALINK คือ แอตทริ บิวต์ทีใช้ในการกําหนดสี ของตัวอักษรใน ขณะทีมีการคลิก
VLINK คือ แอตทริ บิวต์ทีใช้ในการกําหนดสี ของตัวอักษรทีใช้ในการเชือมโยงข้อมูล หลังจากการ
คลิก
#Color คือ สี ของตัวอักษรก่อนทีจะคลิกเพือเชือมโยงข้อมูล โดยกําหนดเป็ นชือสี หรื อกําหนดเป็ น
เลขฐานสิ บหกซึงจะต้องมีเครื องหมาย # นําหน้า
ตัวอย่าง
<HTML>
<HEAD>
<TITLE> การกําหนดสี ตวอักษรทีใช้เชือมโยง</TITLE>
ั
</HEAD>
<BODY LINK=#33FF00 VLINK=#3300FF ALINK=#FF0000>
<CENTER>
<B>การกําหนดสี ตวอักษรทีใช้เชือมโยง</B> <BR><BR>
ั
<B> ภาพอาหารไทยอีสาน</B> <BR><BR>
<A HREF="somtam.html">ส้มตํา</A><BR>
่
<A HREF="kaiyang.html">ไก่ยาง</A><BR>
<A HREF="fish.html">ปลาเผา</A><BR>
</CENTER>
</BODY>
</HTML>