สอนภาษาHTML

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

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

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

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

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

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

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

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

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

<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