Logo
Thainextstep.com สอนทำเว็บไซต์ด้วย Dreamweaver Photoshop  PHP & MySql และ การทำ SEO  
top menu
Thainextstep.com สอน HTML บทความ Dreamweaver สอน Photoshop บทความ PHP & MySql Web Tips SEO Guide
การเขียนภาษา HTML
เริ่มต้นกับ HTML
   ภาษา 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 สามารถเขียนโค้ดได้ดังนั้น

  <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 แต่ล่ะตัว

 
ที่มา : Webmaster วันที่ : 01-07-50...
สอนทำเว็บไซต์   |   สอนภาษา HTML   |   สอน Dreamweaver   |   สอน Photoshop   |   สอนภาษา PHP & MySql   |   รวมทิป เทคนิคการทำเว็บไซต์   |   สอนการทำ SEO
:: Copyright © 2005 by Chatta design. All rights reserved. Do not duplicate or redistribute in any form.::