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

:: การสร้างตาราง
ในบทที่แล้วเราก็ได้สร้างตารางไปแล้วนะค่ะ แต่สำหรับการสร้างตารางนั้นเรายังมีลูกเล่นอีกมากมาย ที่จะสามารถปรับแต่งให้ตารางมีความน่าสนใจ ไม่ว่าจะเป็นการใส่สีสันให้ตาราง การจัดตำแหน่งตาราง หรือข้อมูลภายในเซลล์ การนำรูปมาเพิ่มสีสันให้กับตาราง ตลอดจนการกำหนดขนาดของตาราง การแยกเซลล์ การรวมเซลเป็นต้น การปรับแต่งตารางนั้น เราสามารถทำได้โดยเิพิ่มคุณสมบัติของตารางหรือ การกำหนด attribute ของตาราง เพิ่มเติมเข้าไปในแท็กต่าง ๆ ไม่ว่าจะเป็นการเพิ่มในส่วนของ แท็ก <table> แท็ก <tr> และ แท็ก <td> เป็นต้น เราลองมาดูตัวอย่างต่าง ๆ ดังต่อไปนี้  การใส่สีให้กรอบตาราง   <table border="1" bordercolor="#FF0000" cellpadding="0" cellspacing="0" >        <tr>               <td>...ข้อมูล...</td>               <td>...ข้อมูล...</td>        </tr>   </table>   ในการใส่สีให้กับกรอบตารางนั้นมีข้อควรระวัง โดยต้องตรวจสอบกรอบของตารางด้วยว่าไม่ได้กำหนดเป็น 0border="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 ด้าน โดยมีรูปแบบดังนี้ <tablecellpadding = "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>
Tip HTML การเพิ่ม Attribute ในแท็กต่าง ๆ ของภาษา HTMLการเพิ่ม Attribute ในแท็กต่าง ๆ เราสามารถเิ่ิ่พิ่มเข้ามาได้เรื่อย ๆ โดยไม่จำเป็นจะต้องเรียงลำดับว่า Attribute ใดจะต้องเขียนก่อนหรือหลัง โดยการเิ่พิ่ม Attribute เข้าไปสามารถทำได้ง่าย ๆ เิ่ีพียงใช้ Space หรือช่องว่างเป็นตัวแบ่งระหว่าง Attribute แต่ล่ะตัว