การปรับแต่งตารางด้วยภาษา HTML

Un title page

ภาษา HTML

โครงสร้างภาษา HTML

การปรับแต่งเอกสาร HTML

การกำหนดลักษณะข้อความ

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

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

การปรับแต่งตารางนั้น เราสามารถทำได้โดยเิพิ่มคุณสมบัติของตารางหรือ การกำหนด 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 สามารถเขียนโค้ดได้ดังนั้น

ตัวอย่างที่ 2 การรวมคอลัมน์เข้าด้วยกันโดยใช้ Attibute colspan สามารถเขียนโค้ดได้ดังนั้น

การจัดวางตำแหน่งของตาราง

ในการสร้างตารางนั้นเราสามารถกำหนดการจัดวางตำแหน่งของตารางบนหน้าจอ โดยสามารถกำหนดเป็น 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 แต่ล่ะตัว

ที่มา : Webmaster วันที่ : 01-07-50...