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

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

การปรับแต่งตารางนั้น เราสามารถทำได้โดยเิพิ่มคุณสมบัติของตารางหรือ การกำหนด attribute ของตาราง เพิ่มเติมเข้าไปในแท็กต่าง ๆ ไม่ว่าจะเป็นการเพิ่มในส่วนของ แท็ก <table> แท็ก <tr> และ แท็ก <td> เป็นต้น เราลองมาดูตัวอย่างต่าง ๆ ดังต่อไปนี้

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

<table border=”1″ bordercolor=”#FF0000″ cellpadding=”0″ cellspacing=”0″ >
<tr>
<td>…ข้อมูล…</td>
<td>…ข้อมูล…</td>
</tr>
</table>
ในการใส่สีให้กับกรอบตารางนั้นมีข้อควรระวัง โดยต้องตรวจสอบกรอบของตารางด้วยว่าไม่ได้กำหนดเป็น 0 border=”0″ เพราะหากกำหนดเป็น 0 จะทำให้ไม่เห็นเส้นขอบ ในตัวอย่างนี้ก็มี attribute ต่าง ๆ เกี่ยวกับแท็ก <table> อยู่หลาย ๆ attribute ซึ่งแต่ละ attribute มีคุณสมบัติดังนี้

border สำหรับกำำหนดความหนาของกรอบตาราง โดยการกำหนดขนาดด้วยหน่วยของ Pixel โดยมีรูปแบบดังนี้ <table border = “0”> กรณีไม่ต้องการให้มีกรอบ หรือ <table border = “1”> ค่าตัวเลขมากกรอบจะมีความหนา

bordercolor สำหรับกำหนดสีของเส้นกรอบของตาราง โดยใช้รูปแบบการกำหนดชื่อสี หรือการกำหนดแบบรหัสสี โดยมีรูปแบบดังนี้ <table bordercolor = “red”> หรือ <table bordercolor = “#ff0000”>

cellspacing สำหรับกำหนดระยะห่างระหว่างเซลล์แต่ละเซลล์ โดยจะใช้ค่าเดียวกันทุกเซลล์ทั้งตาราง โดยมีรูปแบบดังนี้ <table cellspacing = “0”> หรือ <table cellspacing = “3”>

cellpadding สำหรับกำหนดระยะห่างระหว่างขอบของเซลล์กับเนื้อหา (อาจเป็นข้อความหรือรูปภาพ) ที่อยู่ภายในเซลล์นั้น ระยะห่างในที่นี้หมายถึงระยะห่างจากขอบของเซลล์ทั้ง 4 ด้าน โดยมีรูปแบบดังนี้ <table cellpadding = “0”> หรือ <table cellpadding = “3”>
การใส่สีื้พื้นหลังให้กับตาราง

<table border=”1″ bgcolor=”#0000ff” bordercolor=”#FF0000″ cellpadding=”0″ cellspacing=”0″ >
<tr>
<td>…ข้อมูล…</td>
<td>…ข้อมูล…</td>
</tr>
</table>
จากตัวอย่างเป็นการเพิ่ม attribute bgcolor สำหรับกำหนดสีืพื้นหลังของตาราง โดยใช้รูปแบบการกำหนดชื่อสี หรือการกำหนดแบบรหัสสี โดยมีรูปแบบดังนี้ <table bgcolor = “green”> หรือ <table bgcolor = “#00ff00″>

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

<table border=”1″ background=”lilies.jpg” bordercolor=”#FF0000″ cellpadding=”0″ cellspacing=”0″ >
<tr>
<td>…ข้อมูล…</td>
<td>…ข้อมูล…</td>
</tr>
</table>
จากตัวอย่างเป็นการเพิ่ม attribute background สำหรับกำหนดใส่รูปให้กับพื้นหลังของตาราง โดยมีรูปแบบดังนี้ <table backgound = “ชื่อรูป”> สำหรับการนำรูปมาใช้สามารถใช้ได้กับสกุล .gif .jpg .png เป็นต้น

การปรับขนาดของตาราง

<table border=”1″ cellpadding=”0″ cellspacing=”0″ width=”200″ height=”30″>
<tr>
<td>…ข้อมูล…</td>
<td>…ข้อมูล…</td>
</tr>
</table>
จากตัวอย่างเป็นการเพิ่ม attribute width และ height ซึ่งแต่ละ attribute มีคุณสมบัติดังนี้

width สำหรับกำหนดความกว้างของตาราง โดยสามารถกำหนดเป็นหน่วยของ Pixel หรือเป็นเปอร์เซ็นต์ได้ โดยมีรูปแบบดังนี้ <table width = “150”> หรือ <table width = “50%”>

height สำหรับกำหนดความสูงของตาราง โดยสามารถกำหนดเป็นหน่วยของ Pixel หรือเป็นเปอร์เซ็นต์ได้ โดยมีรูปแบบดังนี้ <table hight = “150”> หรือ <table hight = “10%”>

การปรับเปลี่ยนขนาดของคอลัมน์

<table border=”1″ cellpadding=”0″ cellspacing=”0″ width=”200″ height=”30″>
<tr>
<td width=”30%”>…ข้อมูล…</td>
<td width=”70%” >…ข้อมูล…</td>
</tr>
</table>
จากตัวอย่าง เป็นการกำหนดขนาดของความกว้างของคอลัมน์ ซึ่งจากตัวอย่างจะเป็นการกำหนดโดยใช้รูปแบบกำหนดเป็น % ซึ่งนอกจากนี้แล้วเราสามารถกำหนดเเป็นหน่วย Pixel ก็ได้เช่นกัน จากตัวอย่างนี้ การกำหนดความกว้างของคอลัมน์เป็น % จะเป็นการคำนวนจากค่าความกว้างทั้งหมดของตาราง โดย คอลัมน์แรกมีความกว้าง 30% ของความกว้างของตารางทั้งหมดที่ 200 Pixel และส่วนคอลัมน์ที่ 2 มีความกว้าง 70 % ของพื้นที่ 200 Pixel
การรวมเซลล์เข้าด้วยกัน
การรวมเซลล์เข้าด้วยกันสามารถรวมเซลล์ได้เป็น 2 ลักษณะ คือ
1. การรวมแถวเข้าด้วยกันโดยใช้ Atrtibute rowspan = “จำนวนแถวที่รวมเซลล์”
2. การรวมคอลัมน์เข้าด้วยกันโดยใช้ Attribute colspan = “จำนวนคอลัมน์ที่รวมเซลล์”

การรวมแถว การรวมคอลัมน์

ตัวอย่างที่ 1 การรวมแถวเข้าด้วยกันโดยใช้ Attibute rowspan สามารถเขียนโค้ดได้ดังนั้น

<table border=”1″ cellpadding=”0″ cellspacing=”0″ width=”200″ height=”30″>
<tr>
<td rowspan=”2″ >…ข้อมูล…</td>
<td >…ข้อมูล…</td>
</tr>
<tr>
<td >…ข้อมูล…</td>
</tr>
</table>
ตัวอย่างที่ 2 การรวมคอลัมน์เข้าด้วยกันโดยใช้ Attibute colspan สามารถเขียนโค้ดได้ดังนั้น

<table border=”1″ cellpadding=”0″ cellspacing=”0″ width=”200″ height=”30″>
<tr>
<td colspan=”2″ >…ข้อมูล…</td>
</tr>
<tr>
<td >…ข้อมูล…</td>
<td >…ข้อมูล…</td>
</tr>
</table>
การจัดวางตำแหน่งของตาราง
ในการสร้างตารางนั้นเราสามารถกำหนดการจัดวางตำแหน่งของตารางบนหน้าจอ โดยสามารถกำหนดเป็น left (ชิดซ้าย) right (ชิดขวา) และ center (ตำแหน่งกึ่งกลาง) โดยมีรูปแบบดังนี้ <table align = “left”> หรือ <table align = “right”> หรือ <table align = “center”> รูปแบบการเขียนโค้ดมีดังนี้

<table align=”center” border=”1″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td>…ข้อมูล…</td>
<td>…ข้อมูล…</td>
</tr>
</table>