ดาวโหลดเอกสาร [DOC] [PDF]
การสร้างตาราง
การสร้างตารางนั้น สามารถนำมาช่วยในการกำหนดตำแหน่งการแสดงผลของข้อมูลภายในเว็บเพจได้ ว่าข้อมูลไหนต้องการแสดง ณ ตำแหน่งใดในเว็บเพจ โดยสามารถนำข้อมูลต่าง ๆ มาจัดแสดงในเซลล์ต่าง ๆ ของตารางได้ ทำให้สะดวกในการออกแบบการจัดางข้อมูล และทำให้การจัดวางข้อมูลมีระเบียบเรียบร้อยอีกด้วยในการสร้างตารางนั้นจะมี คำสั่ง ต่าง ๆ ที่ใช้สำหรับสร้างตารางในภาษา html ดังนี้
<table> …..</table>
<tr> …..</tr>
<td>……</td>
<caption>……..</caption >
<th>…..</th>
ตัวอย่างที่ 1 โครงlร้างตาราง
<html>
<head>
<title>
โครงสร้างตาราง
</title>
</head>
<body>
<table>
<caption>
ชื่อตาราง
</caption >
<tr>
<td>
...ข้อมูล...
</td>
</tr>
</table>
</body>
</html>
แสดงผลตัวอย่างที่ 1
หมายเหตุ การแสดงผลยังไม่เป็นเส้นขอบตารางเพราะยังไม่ได้กำหนดเส้นขอบให้กับตาราง
ตัวอย่างที่ 2 การสร้างตารางแบบ 2 x 3 (2 แถว 3 คอลัมน์)
<html>
<head><title>
....การสร้างตารางแบบ 2 x 3 (2 แถว 3 คอลัมน์)....
</title></head>
<body>
<table>
<caption>
ชื่อตาราง
</caption >
<tr>
<th>...หัวตาราง..</th>
<th>...หัวตาราง....</th>
<th>...หัวตาราง....</th>
</tr>
<tr>
<td>...ข้อมูล....</td>
<td>...ข้อมูล....</td>
<td>...ข้อมูล....</td>
</tr>
</table>
</body>
</html>
แสดงผลตัวอย่างที่ 2
การปรับแต่งตาราง
การปรับแต่งตารางนั้น สามารถทำได้โดยเพิ่มคุณสมบัติของตารางหรือ การกำหนด attribute ของตาราง เพิ่มเติมเข้าไปในคำสั่งต่าง ๆ ไม่ว่าจะเป็นการเพิ่มในส่วนของ คำสั่ง <table> คำสั่ง <tr> และ คำสั่ง <td> เป็นต้น ลองมาดูตัวอย่างต่าง ๆ ดังต่อไปนี้
border สำหรับกำหนดความหนาของกรอบตาราง โดยการกำหนดขนาดด้วยหน่วยของ Pixel โดยมีรูปแบบดังนี้ <table border = "0"> กรณีไม่ต้องการให้มีกรอบ หรือ <table border = "1"> ค่าตัวเลขมากกรอบจะมีความหนา
bordercolor สำหรับกำหนดสีของเส้นกรอบของตาราง โดยใช้รูปแบบการกำหนดชื่อสี หรือการกำหนดแบบรหัสสี โดยมีรูปแบบดังนี้ <table bordercolor = "red"> หรือ <table bordercolor = "#ff0000">
bgcolor คือกำหนดสีพื้นหลังของตาราง โดยใช้รูปแบบการกำหนดชื่อสี หรือการกำหนดแบบรหัสสี โดยมีรูปแบบดังนี้ <table bgcolor = "green"> หรือใช้การกำหนดค่าสีเป็นเลขฐาน 16 <table bgcolor = "#00ff00">
background คือการกำหนดใส่รูปให้กับพื้นหลังของตาราง โดยการกำหนดภาพพื้นหลังให้กับตารางมีรูปแบบ ดังนี้ <table background= “โฟลเดอร์ที่เก็บภาพ/ชื่อภาพ.นามสกุลรูปภาพ เช่น jpeg/jpg,gif,pin”> ... </table> ตัวอย่างเช่น <table background= “pic/bg.jpg”> ... </table>
Cellspacing คือกำหนดระยะห่างระหว่างเซลล์แต่ละเซลล์ โดยจะใช้ค่าเดียวกันทุกเซลล์ทั้งตาราง โดยมีรูปแบบดังนี้ <table cellspacing = "0"> หรือ <table cellspacing = "3">
cellpadding คือกำหนดระยะห่างระหว่างขอบของเซลล์กับเนื้อหา (อาจเป็นข้อความหรือรูปภาพ) ที่อยู่ภายในเซลล์นั้น ระยะห่างในที่นี้หมายถึงระยะห่างจากขอบของเซลล์ทั้ง 4 ด้าน โดยมีรูปแบบดังนี้ <table cellpadding = "0"> หรือ <table cellpadding = "3">
จากตัวอย่างเป็นการเพิ่ม attribute width และ height ซึ่งแต่ละ attribute มีคุณสมบัติดังนี้
width การกำหนดความกว้างของตาราง โดยสามารถกำหนดเป็นหน่วยของ Pixel หรือเป็นเปอร์เซ็นต์ได้ โดยมีรูปแบบดังนี้ <table width = "150"> หรือ <table width = "50%">
height การกำหนดความสูงของตาราง โดยสามารถกำหนดเป็นหน่วยของ Pixel หรือเป็นเปอร์เซ็นต์ได้ โดยมีรูปแบบดังนี้ <table height = "150"> หรือ <table height = "10%">
การกำหนดขนาดของความกว้างของคอลัมน์ สามารถกำหนดได้เป็น 2 รูปแบบ คือ
1. เป็น % (เปอร์เซ็นต์)
2. เป็นหน่วย Pixel (พิกเซล)
ตัวอย่างที่ 3 การใส่สีให้กรอบตาราง
<html>
<head><title>การใส่สีให้กรอบตาราง</title></head>
<body>
<table border="1" bordercolor="#FF0000" cellpadding="0" cellspacing="0" >
<tr>
<td>...ข้อมูล...</td>
<td>...ข้อมูล...</td>
</tr>
</table>
</body>
</html>
ตัวอย่างที่ 4 การใส่สีพื้นหลังให้กับตาราง
<html>
<head><title>การใส่สีพื้นหลังให้กับตาราง</title></head>
<body>
<table border="1" bgcolor="#0000ff" bordercolor="#FF0000" cellpadding="0" cellspacing="0" >
<tr>
<td>...ข้อมูล...</td>
<td>...ข้อมูล...</td>
</tr>
</table>
</body>
</html>
แสดงผลตัวอย่างที่ 4
ตัวอย่างที่ 5 การใส่ภาพเป็นพื้นหลังให้กับตาราง
<html>
<head><title>การใส่ภาพเป็นพื้นหลังให้กับตาราง</title></head>
<body>
<table border="1" background="bg1.jpg" bordercolor="#FF0000" cellpadding="0" cellspacing="0" >
<tr>
<td>...ข้อมูล...
<td>...ข้อมูล...
</tr>
</table>
</body>
</html>
แสดงผลตัวอย่างที่ 5
ตัวอย่างที่ 6 การปรับขนาดของตาราง
<html>
<head><title>การปรับขนาดของตาราง</title></head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="400" height="30">
<tr>
<td>...ข้อมูล...</td>
<td>...ข้อมูล...</td>
</tr>
</table>
</body>
</html>
แสดงผลตัวอย่างที่ 6
ตัวอย่างที่ 7 การปรับเปลี่ยนขนาดของคอลัมน์
<html>
<head><title>การปรับเปลี่ยนขนาดของคอลัมน์</title></head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="400" height="30">
<tr>
<td width="30%">...ข้อมูล...</td>
<td width="70%" >...ข้อมูล...</td>
</tr>
</table>
</body>
</html>
แสดงผลตัวอย่างที่ 7
การรวมเซลล์เข้าด้วยกัน
การรวมเซลล์เข้าด้วยกันสามารถรวมเซลล์ได้เป็น 2 ลักษณะ คือ
1. การรวมแถวเข้าด้วยกันโดยใช้ Attribute rowspan = "จำนวนแถวที่รวมเซลล์"
2. การรวมคอลัมน์เข้าด้วยกันโดยใช้ Attribute colspan = "จำนวนคอลัมน์ที่รวมเซลล์"
ตัวอย่างที่ 8 การรวมแถวเข้าด้วยกันโดยใช้ Attribute rowspan สามารถเขียนโค้ดได้ดังนั้น
<html>
<head><title>การรวมแถวเข้าด้วยกัน</title></head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="400" height="30">
<tr>
<td rowspan="2" >...ข้อมูล...</td>
<td >...ข้อมูล...</td>
</tr>
<tr>
<td >...ข้อมูล...</td>
</tr>
</table>
</body>
</html>
แสดงผลตัวอย่างที่ 8
ตัวอย่างที่ 9 การรวมคอลัมน์เข้าด้วยกันโดยใช้ Attibute colspan สามารถเขียนโค้ดได้ดังนั้น
<html>
<head><title>การรวมแถวเข้าด้วยกัน</title></head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="400" height="30">
<tr>
<td colspan="2" >...ข้อมูล...</td>
</tr>
<tr>
<td >...ข้อมูล...</td>
<td >...ข้อมูล...</td>
</tr>
</table>
</body>
</html>
แสดงผลตัวอย่างที่ 9
การจัดวางตำแหน่งของตาราง และคอลัมน์
ในการสร้างตารางนั้นสามารถกำหนดการจัดวางตำแหน่งของตารางบนหน้าจอ โดยสามารถกำหนดเป็น left (ชิดซ้าย) right (ชิดขวา) และ center (ตำแหน่งกึ่งกลาง) โดยมีรูปแบบดังนี้ <table align = "left"> หรือ <table align = "right"> หรือ <table align = "center"> รูปแบบการเขียนโค้ดมีดังนี้
ตัวอย่างที่ 10 การจัดวางตำแหน่งของตาราง สามารถเขียนโค้ดได้ดังนั้น
<html>
<head><title>การจัดวางตำแหน่งของตาราง </title></head>
<body>
<table align="center" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>...ข้อมูล...</td>
<td>...ข้อมูล...</td>
</tr>
</table>
</body>
</html>
แสดงผลตัวอย่างที่ 10
การใส่ข้อความในตาราง
โดยปกติเมื่อป้อนข้อความในตารางจะเห็นข้อความปรากฏทางด้านซ้ายของตาราง สามารถกำหนดให้ข้อความอยู่ในตารางตามแนวนอน โดยใช้ส่วนขยาย align=" left /center/right" (เลือกตำแหน่งตามที่ต้องการจากคำทั้ง 3) ถ้าไม่กำหนดตำแหน่ง ค่าปกติจะเป็นซ้าย (left)
<td align = "left"> หรือ <td align = "right"> หรือ <td align = "center">
นอกจากการกำหนดตำแหน่งข้อความในแนวนอนแล้ว ยังสามารถกำหนดตำแหน่งตามแนวตั้งได้เช่นกัน โดยใช้ส่วนขยาย valign="top/midder/bottom" (เลือกตำแหน่งตามที่ต้องการจากคำทั้ง 3) ถ้าไม่กำหนดตำแหน่ง ค่าปกติจะเป็นซ้าย (middle) <td valign ="top"> หรือ <td valign ="midder"> หรือ<td valign = “bottom">
ตัวอย่างที่ 11 การใส่ข้อความในตาราง
<html>
<head><title>การใส่ข้อความในตาราง </title></head>
<body>
<table border="1" width="95%" height="100">
<tr>
<td align="left" valign="top">ซ้ายบน</td>
<td align="right" valign="middle">ขวากลาง</td>
</tr>
<tr>
<td align="center" valign="bottom">กลางล่าง</td>
<td align="right" valign="top">ขวาบน</td>
</tr>
</table>
</body>
</html>
แสดงผลตัวอย่างที่ 11
การแทรกรูปภาพในตาราง
ตาราง สามารถที่จะควบคุมตำแหน่งของรูปภาพและข้อความให้อยู่ในที่ที่ต้องการได้ การแทรกรูปภาพจะแทรกเข้าไปในเซลล์ใดๆ ก็ได้ตามต้องการ โดยยังใช้คำสั่ง <img> แทรกระหว่าง <td> .</td>
รูปแบบคำสั่ง
ตัวอย่างที่ 12 การแทรกรูปภาพในตาราง
<html>
<head><title>การแทรกรูปภาพในตาราง</title></head>
<body>
<table border="1">
<tr>
<td><img src="pic/01.jpg"></td>
<td> รูปด้านข้างนี้คือ ทุ่งหญ้า </td>
</tr>
</table>
</body>
</html>
แสดงผลตัวอย่างที่ 12
