Course Content
วิชาคอมพิวเตอร์เพื่ออาชีพ 1 (ง30241) ชั้นมัธยมศึกษาปีที่ 4 แผนการเรียนศิลป์คำนวณ/สหศิลป์ ภาคเรียนที่ 1 ปีการศึกษา 2564
About Lesson

คำสั่งในการสร้างตาราง (Table)
        การสร้างเวบเพจในปัจจุบันมีการนำตารางเข้ามาเกี่ยวข้องกับหลาย ๆ ส่วน ตั้งแต่การสร้างตารางเพื่อแสดงความสัมพันธ์ในลักษณะแถว (Row) และคอลัมน์ (Column) รวมถึงการแบ่งขอบเขตให้กับข้อความเพื่อการจำกัดและควบคุมข้อความให้อยู่ในส่วนที่เราต้องการ

คำสั่งสำหรับสร้างตารางประกอบด้วยคำสั่ง ดังนี้
<TABLE> … </TABLE> คำสั่งในการสร้างตาราง
<CAPTION> … </CAPTION> คำสั่งในการกำหนดข้อความกำกับตาราง
<TR> … </TR> คำสั่งในการกำหนดแถวของตาราง 1 แถว
<TH> … </TH> คำสั่งในการกำหนดส่วนหัวของตารางแถวแรก
<TD> … </TD> คำสั่งในการกำหนดส่วนของข้อมูลในแถว หรือทำคอลัมน์

สำหรับโครงสร้างของคำสั่งในการสร้างตารางมีดังนี้
<TABLE>
<CAPTION> ข้อความกำกับตาราง </CAPTION>
     <TR>
          <TH> ข้อความส่วนหัว </TH>
          ………………..
          ………………..
     </TR>
     <TR>
          <TD> ข้อความส่วนของข้อมูล </TD>
          ……………………
          ……………………
     </TR>
     <TR>
          <TD> ข้อความส่วนของข้อมูล </TD>
          ……………………
          ……………………
     </TR>
          ……………………
          ……………………
          ……………………
</TABLE>

ตัวอย่าง table1.html
<HTML>
<HEAD><TITLE> Table Tag </TITLE></HEAD>
<BODY>
<CENTER>
Example Data
<H2>Report Sale 2001</H2>

<TABLE>
     <TR>
          <TH>Month</TH>
          <TH>Sale A</TH>
          <TH>Sale B</TH>
          <TH>Sale C</TH>
     </TR>
     <TR>
          <TD>January</TD>
          <TD>500</TD>
          <TD>800</TD>
          <TD>700</TD>
     </TR>
     <TR>
          <TD>February</TD>
          <TD>1200</TD>
          <TD>1000</TD>
          <TD>300</TD>
     </TR>
     <TR>
          <TD>Mar</TD>
          <TD>900</TD>
          <TD>400</TD>
          <TD>600</TD>
     </TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

        เรายังสามารถใช้ Attributes เพื่อให้เวบบราวเซอร์แสดงตารางให้ชัดเจนยิ่งขึ้น Attributes ต่าง ๆ มีดังนี้
        Align กำหนดการวางตำแหน่งตางราง มี 3 ลักษณะ
             – Left กำหนดจัดวางชิดซ้าย (เป็นค่า default)
             – Right กำหนดจัดวางชิดขวา
             – Center กำหนดจัดวางกึ่งกลาง
        Border กำหนดแสดงความหนาของเสน้ ตาราง มีหน่วยเป็น Pixel
        Height กำหนดความสูงของตาราง มีหน่วยเป็น Pixel และ Percent
        Width กำหนดความกว้างของตาราง มีหน่วยเป็น Pixel และ Percent
        CellSpacing กำหนดช่องว่างระหว่างตาราง
        CellPadding กำหนดช่องว่างระหว่างบรรทัดของตาราง

        การกำหนดค่าต่าง ๆ ของ Attributes ที่กล่าวมาแล้ว ความแตกต่างของการกำหนดค่าเป็น pixel และเป็น percent นั้นมีความแตกต่างกันดังนี้
        • พิกเซล (Pixel) การกำหนดค่าเป็นแบบพิกเซล เมื่อการลดขนาดของเวบบราวเซอร์ตารางจะไม่ลดขนาดตามความกว้าง หรือยาวของเวบบราวเซอร์
        • เปอร์เซ็นต์ (Percent หรือ %) ถ้ากำหนดค่าในลักษณะของ Percent เมื่อบราวเซอร์มีการลดขนาดลง ขนาดของตารางจะลดสัดส่วนตามขนาดของตัวเวบบราวเซอร์ด้วย

ตัวอย่าง table2.html
<HTML>
<HEAD><TITLE> Table Tag </TITLE></HEAD>
<BODY>
<CENTER>
Example Data
<H2>Report Sale 2001</H2>

<TABLE Border=”3″ CellSpacting=”5″ CellPadding=”3″>
     <TR>
          <TH>Month</TH>
          <TH>Sale A</TH>
          <TH>Sale B</TH>
          <TH>Sale C</TH>
     </TR>
     <TR>
          <TD>January</TD>
          <TD>500</TD>
          <TD>800</TD>
          <TD>700</TD>
     </TR>
     <TR>
          <TD>February</TD>
          <TD>1200</TD>
          <TD>1000</TD>
          <TD>300</TD>
     </TR>
     <TR>
          <TD>Mar</TD>
          <TD>900</TD>
          <TD>400</TD>
          <TD>600</TD>
     </TR>
</TABLE>
</CENTER>
</BODY>
</HTML>