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

 

 

                    1.  คำสั่งหลักที่ใช้ในการสร้างตารางของภาษา HTML  มีดังนี้

 

 

<TABLE>………..</TABLE>

เป็นคำสั่งที่กำหนดให้โปรแกรมเบราว์เซอร์สร้างตาราง

<CAPTION>………..</CAPTION>

เป็นคำสั่งที่ใช้ตั้งชื่อหรือหัวข้อเรื่องให้กับตาราง

<TR>………..</TR>

เป็นคำสั่งที่ใช้กำหนดแถว (ROW)

<TH>………..</TH>

เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลส่วนหัวของตาราง

<TD>………..</TD>

เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลในแต่ละแถว

                    โครงสร้างของตาราง

 

<TABLE>
<CAPTION> ชื่อตาราง </CAPTION>
<TR>
<TH> ข้อมูลส่วนหัว </TH>
</TR>
<TR>
<TD> ข้อมูล </TD>
</TR>
<TR>
<TD> ข้อมูล </TD>
</TR>
</TABLE>

 

                              ตัวอย่างการสร้างตาราง

                                                    ผลลัพธ์

—————————————————————

                        2.  คำสั่งต่างๆ ที่ใช้ในการตกแต่งตารางของภาษา HTML

 

2.1 คำสั่ง BORDER   ใช้กำหนดความหนาให้กับเส้นขอบของตาราง มีหน่วยเป็น Pixel ถ้าไม่ใส่คำสั่งนี้ไว้ด้วย  BORDER  ก็จะมีค่าเท่ากับ 1 ซึ่งเป็นค่าปกตอ คือจะไม่เห็นเส้นขอบของตาราง

 

                                   ตัวอย่างการใช้คำสั่ง BORDER

                                                                     ผลลัพธ์

2.2  คำสั่ง ALIGN ใช้กำหนดตำแหน่งการจัดวางตาราง มี 3 รูปแบบ คือ

– LEFT    คือ จัดตารางชิดซ้าย (ค่าปกติ) ของจอภาพ

– RIGHT  คือ จัดตารางชิดขวาของจอภาพ

– CENTER  คือ จัดตารางไว้กึ่งกลางของจอภาพ

                                           ตัวอย่างการสร้างตารางอยู่กึ่งกลางจอภาพ

                                                                     ผลลัพธ์

                                    2.3 คำสั่ง WIDTH ใช้กำหนดความกว้างของตารางทั้งหมด  มีหน่วยเป็น Pixel หรือ เปอร์เซ็นต์ก็ได้

                                    2.4 คำสั่ง HEIGHT  ใช้กำหนดความสูงของตารางทั้งหมด มีหน่วยเป็น Pixel หรือ เปอร์เซ็นต์ก็ได้

                                    2.5 คำสั่ง BGCOLOR    เป็นคำสั่งที่ใช้ในการกำหนดสีพื้นหลังของตารางใช้ได้กับเว็บเบราว์เซอร์ Internet Explorer เท่านั้น

                                        ตัวอย่างการใช้คำสั่ง WIDTH , HEIGHT , BGCOLOR

                                                  ผลลัพธ์

 

 

                                2.5 คำสั่ง  CELLSPACING  ใช้กำหนดระยะห่างระหว่างช่องแต่ละช่องในตาราง โดยการเพิ่มขนาดหรือลดขนาดตามความหนาของเส้นขอบตาราง

                                                   ผลลัพธ์

                                2.6 คำสั่ง CELLPADDING  ใช้กำหนดระยะห่างระหว่างบรรทัดของตาราง โดยการเพิ่มขนาดหรือลดขนาดตามความสูงของเส้นขอบตาราง

                                                    ผลลัพธ์

 

 

                                2.7 คำสั่ง Colspan และ Rowspan 

                                            คำสั่ง <TD  COLSPAN> เป็นคำสั่งในการรวมคอลัมน์เข้าด้วยกัน ตามค่าของจำนวนคอลัมน์ที่กำหนดไว้
                                    รูปแบบคำสั่ง      <TD  COLSPAN = “Number”>
                                            ดยที่           – COLSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมคอลัมน์
                                                                  – Numberคือ ค่าตัวเลขที่ใช้ในการรวมคอลัมน์เข้าเป็นคอลัมน์เดี่ยวกั

                                            คำสั่ง <TD  ROWSPAN> เป็นคำสั่งในการรวมแถวเข้าด้วยกัน ตามค่าของจำนวนแถวที่กำหนดไว้
                                      รูปแบบคำสั่ง     <TD  ROWSPAN = “Number”>
        โดยที่         – ROWSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมแถว
– Number 
คือ ค่าตัวเลขที่ใช้ในการรวมแถวเข้าเป็นแถวเดียวกัน

 

ผลลัพธ์

—————————————————————

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s