html: การสร้างตาราง

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

Table หรือ ตาราง เป็นอีกวิธีหนึ่งในการนำเสนอข้อมูลบน Web ที่เหมาะกับข้อมูลที่เป็นรายงานสถิติ
หรือข้อมูลที่เป็นตัวเลขจำนวนมาก ๆ รวมทั้งเป็นการจัดหมวดหมู่ของข้อมูลให้เป็นระเบียบ ง่ายต่อการเข้าใจ จะสังเกตเห็นว่า
Home Page ส่วนใหญ่่จะมีการนำตารางมาช่วยในการจัดเมนูหรือหัวข้อที่เป็น ไปยัง Web Page หรือ Web Site อื่น
ตัวอย่าง เช่น เว็บไซต์ของ Sanook.com ที่มีการจัดหน้าเว็บเพจด้วยการนำเอาตารางมาประยุกต์ใช้

คำสั่งที่นำมาใช้ในการสร้างตาราง
<Table>…… </Table>
- เป็น Tag สำหรับกำหนดจุดเริ่มต้นและสิ้นสุดการสร้างตาราง
<TR>……….</TR>
- เป็น Tag สำหรับสร้างแถว (row) ให้กับตาราง
<TD>………</TD>
- เป็น Tag สำหรับสร้างคอลัมน์ (column) ให้กับตารางHTML

รูปแบบของคำสั่ง ที่ใช้ในการสร้างตาราง

<TABLE>
      <CAPTION>หัวข้อตาราง</CAPTION>
             <TR>
                    <TD>คอลัมน์ที่ 1</TD>
                    <TD>คอลัมน์ที่ 2</TD>
            </TR>
            ...
</TABLE>

ตัวอย่างโปรแกรม
<HTML>
<HEAD>
<TITLE>การสร้างตารางด้วยภาษา HTML</TITLE>
</HEAD>
<BODY>
         <TABLE BORDER = 2>
                 <CAPTION>การสร้างตารางอย่างง่าย</CAPTION>
                      <TR>
                              <TD>แถว 1 คอลัมน์ 1</TD>
                              <TD>แถว 1 คอลัมน์ 2</TD>
                      </TR>
                      <TR>
                              <TD>แถว 2 คอลัมน์ 1</TD>
                              <TD>แถว 2 คอลัมน์ 2</TD>
                      </TR>
                      <TR>
                              <TD>แถว 3 คอลัมน์ 1</TD>
                              <TD>แถว 3 คอลัมน์ 2</TD>
                      </TR>
</TABLE>
</BODY>
</HTML>

ผลลัทธ์ที่ได้

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

การสร้างกรอบตาราง

รูปแบบคำสั่ง HTML ที่ใช้ในการสร้างกรอบตาราง

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

ตัวอย่างโปรแกรม
<HTML>
<HEAD>
<TITLE>การตกแต่งตารางโดยใช้ภาษา HTML</TITLE>
</HEAD>
<BODY>
      <TABLE BORDER = 2 BORDERCOLOR=BLUE>
      <CAPTION><font color=blue>การตกแต่งตาราง</font></CAPTION>
      <TR>
           <TD>แถว 1 คอลัมน์ 1</TD>
           <TD>แถว 1 คอลัมน์ 2</TD>
     </TR>
     <TR>
          <TD>แถว 2 คอลัมน์ 1</TD>
          <TD>แถว 2 คอลัมน์ 2</TD>
     </TR>
     <TR>
     <TD>แถว 3 คอลัมน์ 1</TD>
     <TD>แถว 3 คอลัมน์ 2</TD>
     </TR>
     </TABLE>
</BODY>
</HTML>

ผลลัทธ์ที่ได้

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

รูปแบบของคำสั่ง HTML การใส่รูปภาพในตาราง

ตัวอย่างโปรแกรม

<html>

<head><title>การใส่รูปภาพในตาราง</title><body> <table align="center" width="360" hight="70" border=2 bordercolor="blue"> <caption>การใส่รูปภาพในตาราง</caption> <tr> <td align="center"><img src="t014.jpg"</td> <td align="center"><img src="t006.jpg"</td> <td align="center"><img src="t020.jpg"</td> </tr> <tr> <td align="center">รูปที่ 1</td> <td align="center">รูปที่ 2</td> <td align="center">รูปที่ 3</td> </tr> </table></body></html>

ผลลัทธ์ที่ได้