บทนำ
การนำเสนอข้อมูลที่เป็นรายการหรือสถิติต่าง ๆ โดยทั่วไปจะป้อนข้อมูลเข้าสู่ตาราง เพื่อความเป็นระเบียบเรียบร้อยและง่ายต่อการทำความ เข้าใจ แท็กที่ใช้ในการสร้างตารางในภาษา HTML คือ แท็ก<TABLE> ......... </TABLE> พร้อมด้วยแท็กส่วนประกอบต่าง ๆ ในการสร้างตาราง เช่น กำหนดสีเส้นของตาราง กำหนดขนาดตาราง การใส่สีและรูปภาพเพื่อทำพื้นหลังของตาราง การใส่รูปภาพลงในตาราง การจัดตารางให้ชิดซ้าย ชิดขวา หรือวางตำแหน่งตรงกลาง เป็นต้น Table คือคำสั่งที่ใช้ในการจัดตำแหน่งของข้อความหรือรูปภาพ โดยกำหนดเป็นโดยการแบ่ง cell และมี เส้นขอบ(Border) กำหนดขอบเขตของเว็บเพ็จนั้นๆ คำสั่ง Table คือคำสั่งที่ใช้ในการควบคุมตารางที่ใช้ในการจัดข้อความแบบเป็นจุดๆ โดยต้องระบุขนาดความกว้างของตารางนั้นๆซึ่งเมื่อเราสังเกตเห็นเว็บเพ็จอื่นๆ มีข้อความหรือรูปภาพเรียงเป็นระเบียบและอยู่ในลักษณะแนวเดียวกันโดยอยู่ตามจำนวนแถว (Rows) และตามจำนวนคอลัมน์ (Cols) นี่คือการทำงานของคำสั่ง Table
การใช้ตารางในการสร้างเว็บเพจ
ในการนำเสนอข้อมูลต่าง ๆ นั้น จะเห็นว่าการนำเสนอข้อมูลด้วยตาราง จะทำให้เกิดความเข้าใจได้ง่ายขึ้น สามารถเปรียบเทียบความแตกต่าง ๆ ของข้อมูลได้อย่างชัดเจน นอกจากประโยชน์ดังกล่าวในการสร้างเว็บเพจนั้น ตารางยังสามารถนำมาช่วยในการจัดรูปแบบของจอภาพบนเว็บเพจได้อีกด้วย เพื่อแบ่งแยกหน้าเว็บเพจออกเป็น ส่วน ๆ เกิดความเป็นระเบียบและความสวยงามมากขึ้น ก่อนอื่นให้นักเรียนศึกษา รูปแบบตารางโดยทั่วไปก่อนดังนี้ ตารางประกอบไปด้วย 6 ช่อง หรืออาจเรียกว่า 6 เซลล์ (cell) มี 3 แถว (row) 2 คอลัมน์ (column)
แถว 1 คอลัมน์ 1 | แถว 1 คอลัมน์ 2 |
แถว 2 คอลัมน์ 1 | แถว 2 คอลัมน์ 2 |
แถว 3 คอลัมน์ 1 | แถว 3 คอลัมน์ 2 |
คำสั่งหรือแท็กที่ใช้ในการสร้างตารางคือ <table>...</table>
ในการสร้างตารางนั้น ในเบื้องต้นต้องใช้คำสั่งหรือแท็กดังต่อไปนี้
<table>...</table> เป็นการบอกจุดเริ่มต้นและจุดสิ้นสุดในการสร้างตาราง
<tr>....</tr> เป็นการบอกจำนวนแถว (row)
<td>...</td> เป็นการบอกจำนวนคอลัมน์ (colunm)
<tr>....</tr> เป็นการบอกจำนวนแถว (row)
<td>...</td> เป็นการบอกจำนวนคอลัมน์ (colunm)
ตัวอย่างการสร้างตาราง
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
การสร้างตารางในภาษา HTML <br>
<hr>
<table> <tr><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table></body>
</html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
การสร้างตารางในภาษา HTML <br>
<hr>
<table> <tr><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table></body>
</html>
ผลลัพธ์
แถว 1 คอลัมน์ 1 | แถว 1 คอลัมน์ 2 |
แถว 2 คอลัมน์ 1 | แถว 2 คอลัมน์ 2 |
แถว 3 คอลัมน์ 1 | แถว 3 คอลัมน์ 2 |
การตีเส้น และสีเส้นตาราง การกำหนดระยะห่างระหว่างช่องเซลล์ และการเว้นระยะข้อมูลในเซลล์
จากตัวอย่างจะเห็นว่าไม่ปรากฎเส้นตารางขึ้นมาบนหน้าเว็บเพจ หากต้องการให้มีเส้นตาราง ต้องมีการใช้คุณสมบัติหรือแอททริบิวต์ border ช่วย ซึ่งจะต้องเขียนไว้ในแท็ก <table> ดังนี้ <table border="1"> นอกจากความหนาของเส้นตารางแล้ว ยังมีแอททริบิวต์ที่กำหนดสีของเส้นตาราง bordercolor ความห่างของช่องเซล์ cellspacing และการเว้นระยะ ระหว่างข้อมูลในเซลล์ กับกรอบเซลล์ cellpadding โดยใช้แอททริบิวต์ดังต่อไปนี้ bordercolor,cellspacing และ cellpadding เขียนต่อท้ายในแท็ก <table> ดังนี้ <table border="1" bordercolor="blue" cellspacing="5" cellpadding="10">border="1" หมายความว่าให้ตีเส้นด้วยความหนาของเส้น 1 จุด (pixel) หากไม่ต้องการเส้นให้กำหนดค่าเป็น "0" หรือไม่ต้องใช้แอททริบิวต์นี
Bordercolor ="ค่าสี" หมายถึงกำหนดสีเส้นตาราง สามารถระบุค่าสี เช่น "blue" คือสีน้ำเงิน หรือใส่เป็น
ค่าตัวเลขฐานสิบหกก็ได้ cellspacing ="5" หมายถึงระยะห่างระหว่างช่องเซลล์มีค่าเป็น 5 จุด (pixel) cellpadding ="10" หมายถึงระยะห่างระหว่างข้อมูลในเซลล์กับกรอบเซลล์มีค่าเป็น 10 จุด (pixel)
ค่าตัวเลขฐานสิบหกก็ได้ cellspacing ="5" หมายถึงระยะห่างระหว่างช่องเซลล์มีค่าเป็น 5 จุด (pixel) cellpadding ="10" หมายถึงระยะห่างระหว่างข้อมูลในเซลล์กับกรอบเซลล์มีค่าเป็น 10 จุด (pixel)
ตัวอย่างการสร้างตารางโดยใช้แอททริบิวต์การตีเส้น สีเส้นตารางและการเว้นระยะต่าง ๆ
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
การสร้างตารางในภาษา HTML <br>
<hr>
<table border="1" bordercolor="blue" cellspacing="5" cellpadding="10"> <tr><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table></body>
</html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
การสร้างตารางในภาษา HTML <br>
<hr>
<table border="1" bordercolor="blue" cellspacing="5" cellpadding="10"> <tr><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table></body>
</html>
ผลลัพธ์
แถว 1 คอลัมน์ 1 | แถว 1 คอลัมน์ 2 |
แถว 2 คอลัมน์ 1 | แถว 2 คอลัมน์ 2 |
แถว 3 คอลัมน์ 1 | แถว 3 คอลัมน์ 2 |
การกำหนดข้อความกำกับให้กับตาราง <caption>
สามารถใส่ข้อความกำกับตาราง เพื่อให้ทราบว่าตารางนั้นนำเสนอข้อมูลเกี่ยวกับเรื่องใด โดยมีรูปแบบดังนี้ <caption align="ตำแหน่ง">ข้อความกำกับตาราง</caption>
โดยค่า "ตำแหน่ง" มีดังนี้ "top" หมายถึง อยู่กลางตารางด้านบน
"bottom" หมายถึง อยู่กลางตารางด้านล่าง "left" หมายถึง อยู่ด้านบนซ้าย
"right" หมายถึง อยู่ด้านบนขวา
"bottom" หมายถึง อยู่กลางตารางด้านล่าง "left" หมายถึง อยู่ด้านบนซ้าย
"right" หมายถึง อยู่ด้านบนขวา
ตัวอย่างการสร้างตารางโดยมีข้อความกำกับตาราง
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
การสร้างข้อความกำกับตาราง<br>
<hr>
<table border="1" cellspacing="5"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table></body>
</html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
การสร้างข้อความกำกับตาราง<br>
<hr>
<table border="1" cellspacing="5"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table></body>
</html>
ผลลัพธ์
แถว 1 คอลัมน์ 1 | แถว 1 คอลัมน์ 2 |
แถว 2 คอลัมน์ 1 | แถว 2 คอลัมน์ 2 |
แถว 3 คอลัมน์ 1 | แถว 3 คอลัมน์ 2 |
ตารางที่ 1 การทดลองสร้างตาราง | |
การปรับความกว้างและความสูงให้กับตาราง
การกำหนดความกว้างและความสูงให้กับตารางโดยใช้แอททริบิวต์ width และ height ในแท็ก <table> ซึ่งสามารถกำหนดได้ 2 รูปแบบดังนี้
1.กำหนดเป็นเปอร์เซ็น ซึ่งจะปรับขนาดตารางตามขนาดหน้าจอของเบราว์เซอร์ในขณะนั้น
1.กำหนดเป็นเปอร์เซ็น ซึ่งจะปรับขนาดตารางตามขนาดหน้าจอของเบราว์เซอร์ในขณะนั้น
<table width="50%" height="60%">
2.กำหนดความกว้าง และความยาวเป็นจุด (pixel) ซึ่งขนาดตารางจะไม่ปรับตามขนาดหน้าจอของเบราว์เซอร์ในขณะแสดงผล วิธีนี้จะไม่ทำให้ตารางและข้อมูลในตารางขยับเปลี่ยนตำแหน่ง <table width="400" height="200">
2.กำหนดความกว้าง และความยาวเป็นจุด (pixel) ซึ่งขนาดตารางจะไม่ปรับตามขนาดหน้าจอของเบราว์เซอร์ในขณะแสดงผล วิธีนี้จะไม่ทำให้ตารางและข้อมูลในตารางขยับเปลี่ยนตำแหน่ง <table width="400" height="200">
ตัวอย่างการกำหนดความกว้างและความสูงของตาราง
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
การกำหนดความกว้างและความสูงของตาราง <br>
<hr>
<table border="1" cellspacing="5" width="500" height="400"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table></body>
</html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
การกำหนดความกว้างและความสูงของตาราง <br>
<hr>
<table border="1" cellspacing="5" width="500" height="400"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table></body>
</html>
ผลลัพธ์
แถว 1 คอลัมน์ 1 | แถว 1 คอลัมน์ 2 |
แถว 2 คอลัมน์ 1 | แถว 2 คอลัมน์ 2 |
แถว 3 คอลัมน์ 1 | แถว 3 คอลัมน์ 2 |
การกำหนดสีพื้นในช่องตาราง
สามารถกำหนดสีพื้นให้กับช่องตาราง โดยใช้แอททริบิวต์ bgcolorได้หลายรูปแบบดังนี้
รูปแบบการใช้งาน bgcolor="ค่าสี"
1.กำหนดสีทั้งตาราง ให้นำแอททริบิวต์ bgcolor ใส่ลงในแท็ก <table> ดังตัวอย่าง
<table border="1" cellspacing="5" width="300" height="100" bgcolor="blue"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
รูปแบบการใช้งาน bgcolor="ค่าสี"
1.กำหนดสีทั้งตาราง ให้นำแอททริบิวต์ bgcolor ใส่ลงในแท็ก <table> ดังตัวอย่าง
<table border="1" cellspacing="5" width="300" height="100" bgcolor="blue"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table>
2.กำหนดสีทั้งแถว แถวใดแถวหนึ่งในตาราง ให้นำแอททริบิวต์ bgcolor ใส่ลงในแท็ก <tr> ดังตัวอย่าง
<table border="1" cellspacing="5" width="300" height="100"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr bgcolor="blue"><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table> 3.กำหนดสีในช่องเซลล์ใดเซลล์หนึ่งในตาราง ให้นำแอททริบิวต์ bgcolor ใส่ลงในแท็ก <td> เซลล์นั้น ดังตัวอย่าง
<table border="1" cellspacing="5" width="300" height="100"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td bgcolor="blue"> แถว 3 คอลัมน์ 2 </td></tr>
</table>
2.กำหนดสีทั้งแถว แถวใดแถวหนึ่งในตาราง ให้นำแอททริบิวต์ bgcolor ใส่ลงในแท็ก <tr> ดังตัวอย่าง
<table border="1" cellspacing="5" width="300" height="100"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr bgcolor="blue"><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table> 3.กำหนดสีในช่องเซลล์ใดเซลล์หนึ่งในตาราง ให้นำแอททริบิวต์ bgcolor ใส่ลงในแท็ก <td> เซลล์นั้น ดังตัวอย่าง
<table border="1" cellspacing="5" width="300" height="100"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td bgcolor="blue"> แถว 3 คอลัมน์ 2 </td></tr>
</table>
4.กำหนดสีให้กับทั้งตาราง แถว และเซลล์ ผสมกันได้โดยให้นำ แอททริบิวต์ bgcolor ใส่ลงในแท็ก <table> , <tr> และ <td> เซลล์นั้น ดังตัวอย่าง
<table border="1" cellspacing="5" width="300" height="100" bgcolor="pink"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr bgcolor="blue"><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td bgcolor="#00ffcc"> แถว 3 คอลัมน์ 2 </td></tr>
</table>
<table border="1" cellspacing="5" width="300" height="100" bgcolor="pink"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr bgcolor="blue"><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td bgcolor="#00ffcc"> แถว 3 คอลัมน์ 2 </td></tr>
</table>
ตัวอย่างการกำหนดสีพื้นในตาราง
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
การกำหนดความกว้างและความสูงของตาราง <br>
<hr>
<table border="1" cellspacing="5" width="300" height="100" bgcolor="pink"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr bgcolor="blue"><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td bgcolor="#00ffcc"> แถว 3 คอลัมน์ 2 </td></tr>
</table></body>
</html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
การกำหนดความกว้างและความสูงของตาราง <br>
<hr>
<table border="1" cellspacing="5" width="300" height="100" bgcolor="pink"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr bgcolor="blue"><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td bgcolor="#00ffcc"> แถว 3 คอลัมน์ 2 </td></tr>
</table></body>
</html>
ผลลัพธ์
แถว 1 คอลัมน์ 1 | แถว 1 คอลัมน์ 2 |
แถว 2 คอลัมน์ 1 | แถว 2 คอลัมน์ 2 |
แถว 3 คอลัมน์ 1 | แถว 3 คอลัมน์ 2 |
การกำหนดรูปภาพเป็นพื้นหลังในช่องตารางและการใส่รูปภาพในช่องตาราง
สามารถกำหนดรูปภาพเป็นพื้นหลังให้กับช่องตาราง ได้เหมือนกับการกำหนดสีทุกประการ เพียงแต่เปลี่ยนมาใช้แอททริบิวต์ background="ชื่อภาพ.สกุล" ดังตัวอย่างต่อไปนี้
<table border="1" cellspacing="5" width="300" height="100" background="sea.jpg"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table> การนำภาพไปใส่ในช่องตารางให้นำแท็ก <imgsrc="ชื่อภาพ.สกุล"> ไปใส่ในช่องเซลล์นั้น ๆ หรือ แท็ก <td>...</td> ได้เลย ดังตัวอย่างต่อไปนี้
<table border="1" cellspacing="5" width="300" height="100" background="sea.jpg"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr><td><img src="swiming.gif"></td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table>
<table border="1" cellspacing="5" width="300" height="100" background="sea.jpg"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table> การนำภาพไปใส่ในช่องตารางให้นำแท็ก <imgsrc="ชื่อภาพ.สกุล"> ไปใส่ในช่องเซลล์นั้น ๆ หรือ แท็ก <td>...</td> ได้เลย ดังตัวอย่างต่อไปนี้
<table border="1" cellspacing="5" width="300" height="100" background="sea.jpg"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr><td><img src="swiming.gif"></td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table>
ตัวอย่างการกำหนดภาพเป็นพื้นหลังในตาราง และการใส่รูปภาพในช่องตาราง
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
การกำหนดความกว้างและความสูงของตาราง <br>
<hr>
<table border="1" cellspacing="5" width="300" height="100" background="sea.jpg"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr><td><img src="swiming.gif"></td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table></body>
</html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
การกำหนดความกว้างและความสูงของตาราง <br>
<hr>
<table border="1" cellspacing="5" width="300" height="100" background="sea.jpg"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr><td><img src="swiming.gif"></td><td> แถว 1 คอลัมน์ 2 </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr>
</table></body>
</html>
ผลลัพธ์
แถว 1 คอลัมน์ 2 | |
แถว 2 คอลัมน์ 1 | แถว 2 คอลัมน์ 2 |
แถว 3 คอลัมน์ 1 | แถว 3 คอลัมน์ 2 |
การจัดตำแหน่งข้อมูลในตาราง
ข้อมูลในตารางแต่ละช่องสามารถจัดตำแหน่งให้อยู่ ชิดซ้าย ชิดขวา หรือตรงการเซลล์ได้ โดยการใช้
แอททริบิวต์ align="ตำแหน่งของข้อมูล" ลงในแท็ก <tr> หรือ <td> เช่น <tr align="center"><td> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
หมายถึง จัดตำแหน่งข้อมูลแถวที่ 1 ทั้งแถวให้อยู่ตรงกลางเซลล์ <tr><td align="center"> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
หมายถึง จัดตำแหน่งข้อมูลในแถวที่ 1 คอลัมน์ที่ 1 ให้อยู่ตรงกลางเซลล์ เพียงเซลล์เดียว
หมายถึง จัดตำแหน่งข้อมูลแถวที่ 1 ทั้งแถวให้อยู่ตรงกลางเซลล์ <tr><td align="center"> แถว 1 คอลัมน์ 1 </td><td> แถว 1 คอลัมน์ 2 </td></tr>
หมายถึง จัดตำแหน่งข้อมูลในแถวที่ 1 คอลัมน์ที่ 1 ให้อยู่ตรงกลางเซลล์ เพียงเซลล์เดียว
"ตำแหน่งของข้อมูล" มีดังนี้
"center" หมายถึง อยู่ตรงกลางเซลล์ "justify" หมายถึง เต็มช่องเซลล์
"left" หมายถึง อยู่ชิดด้านซ้ายเซลล์
"right" หมายถึง อยู่ชิดด้านขวาเซลล์
"center" หมายถึง อยู่ตรงกลางเซลล์ "justify" หมายถึง เต็มช่องเซลล์
"left" หมายถึง อยู่ชิดด้านซ้ายเซลล์
"right" หมายถึง อยู่ชิดด้านขวาเซลล์
ตัวอย่างการกำหนดตำแหน่งข้อมูลในตาราง
<html><head>
<title>การสร้างตาราง</title>
</head>
<body>
การกำหนดตำแหน่งข้อมูลในเซลล์ <br>
<hr>
<table border="1" cellspacing="5" width="700" height="100"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption>
<tr align="center"><td> แถว 1 คอลัมน์ 1[กลาง] </td><td> แถว 1 คอลัมน์ 2 [กลาง] </td></tr>
<tr><td> แถว 2 คอลัมน์ 1 </td><td> แถว 2 คอลัมน์ 2 </td></tr>
<tr><td> แถว 3 คอลัมน์ 1 </td><td align="right"> แถว 3 คอลัมน์ 2 [ขวา] </td></tr>
</table></body>
</html>
ผลลัพธ์
แถว 1 คอลัมน์ 1[กลาง] | แถว 1 คอลัมน์ 2 [กลาง] |
แถว 2 คอลัมน์ 1 | แถว 2 คอลัมน์ 2 |
แถว 3 คอลัมน์ 1 | แถว 3 คอลัมน์ 2 [ขวา] |
