คำสั่งในการสร้างตาราง (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>