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

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

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

 1.การสร้างตาราง    การสร้างตารางในภาษา HTML  มีอยู่หลายแบบ  ผู้เขียนโปรแกรมจะพิจารณากำหนดแท็กที่ใช้เพื่อควบคุมการสร้างตาราง     แท็กที่ใช้ควบคุมมีหลายคำสั่งดังนี้

 <TABLE>………………………..</TABLE>  กำหนดจุดเริ่มต้นและสิ้นสุดของการสร้างตาราง

  <CAPTION>…………………….</CAPTION>                    กำหนดชื่อเรื่องของตาราง

 

   <TR>…………………………….</TR>     กำหนดการสร้างแถว (ROW) ให้กับตาราง

      <TD>…………………………….</TD>
           กำหนดการสร้างคอลัมน์ (COLUMN) ให้กับตาราง

การสร้างเส้นขอบตาราง

เส้นขอบของตาราง   คือ     เส้นที่เขียนขึ้นเพื่อแบ่งระหว่างรายละเอียดของข้อมูลในแต่ละชุด   เพื่อให้ง่ายต่อการทำความเข้าใจ    เราจึงจำเป็นที่จะสร้างเส้นขอบตาราง โดยมีรูปแบบการกำหนดดังนี้

<table  border = “ขนาดของขอบ”>………….</table>

การกำหนดสีเส้นขอบตาราง

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

<table  border = “ขนาดของเส้นขอบ”  bordercolor = “ชื่อสีหรือรหัสสี”>

<table  border = “3” bordercolor = “blue”>……….</table>

การกำหนดรูปแบบตาราง

โดยปกติเส้นขอบของตารางจะมีขอบสี่ด้านดังตัวอย่างที่ผ่านมา    แต่เราสามารถกำหนดรูปแบบเส้นขอบตารางเป็นแบบอื่น ๆ ได้  เช่น ขีดเส้นเฉพาะขอบด้านบน  ขีดเส้นเฉพาะขอบด้านล่าง   ด้านซ้าย    หรือด้านขวา  เป็นต้น  สามารถกำหนดรูปแบบไดดังนี้

รูปแบบการกำหนด

<table  border= “ขนาดขอบ”  frame= “รูปแบบเส้นของตาราง”>………….…</table>

เช่น
<table  border= “3”  frame=“hsides”>………….</table>

 รูปแบบเส้นขอบตารางมีดังนี้

  VOID    ไม่มีเส้นขอบ
  BORDER     มีเส้นขอบครบสี่ด้าน
  BOX    มีเส้นขอบครบสี่ด้าน
  ABOVE    ขีดเส้นเฉพาะขอบด้านบน

 

รูปแบบเส้นขอบตารางมีดังนี้

BELOW  ขีดเส้นเฉพาะขอบด้านล่าง
HSIDES  ขีดเส้นเฉพาะขอบแนวนอนด้านบนและด้านล่าง
VSIDES  ขีดเส้นเฉพาะขอบแนวตั้งด้านซ้ายและด้านขวา
LHS  ขีดเส้นเฉพาะขอบด้านซ้าย
RSH  ขีดเส้นเฉพาะขอบด้านขวา

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

เราสามารถปรับขนาดของตารางให้เล็กหรือใหญ่  ตามความเหมาะสมของข้อมูลในตารางได้       โดยการกำหนดความกว้างและความสูงของตารางเป็นตัวเลขหรือเปอร์เซ็นต์    ซึ่งมีรูปแบบการใช้งานดังนี้

รูปแบบการกำหนด

<table  border= “ขนาดเส้นขอบตาราง”  width= “ความกว้างของตาราง”  height= “ความสูงของตาราง”>

เช่น

<table  border= “3”  width= “30”  height= “50”>

 การกำหนดสีพื้นหลังของตาราง 

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

รูปแบบการกำหนดสีพื้นหลังของตาราง

กำหนดสีพื้นหลังเป็นสีเดียวกันทั้งหมด
   <table  bgcolor= “สีที่ต้องการ”>……………</table>

 

รูปแบบการกำหนดสีพื้นหลังของตาราง

กำหนดสีพื้นหลังเฉพาะแถวที่ต้องการ
                    <tr  bgcolor= “สีที่ต้องการ”>

 

รูปแบบการกำหนดสีพื้นหลังของตาราง

กำหนดสีพื้นหลังเฉพาะคอลัมน์ที่ต้องการ
            <td  bgcolor= “สีที่ต้องการ”>