การสร้างตาราง
Table หรือ ตาราง เป็นอีกวิธีหนึ่งในการนำเสนอข้อมูลบน Web ที่เหมาะกับข้อมูลที่เป็นรายงานสถิติ
หรือข้อมูลที่เป็นตัวเลขจำนวนมาก ๆ รวมทั้งเป็นการจัดหมวดหมู่ของข้อมูลให้เป็นระเบียบ ง่ายต่อการเข้าใจ จะสังเกตเห็นว่า
Home Page ส่วนใหญ่่จะมีการนำตารางมาช่วยในการจัดเมนูหรือหัวข้อที่เป็น ไปยัง Web Page หรือ Web Site อื่น
ตัวอย่าง เช่น เว็บไซต์ของ Sanook.com ที่มีการจัดหน้าเว็บเพจด้วยการนำเอาตารางมาประยุกต์ใช้
หรือข้อมูลที่เป็นตัวเลขจำนวนมาก ๆ รวมทั้งเป็นการจัดหมวดหมู่ของข้อมูลให้เป็นระเบียบ ง่ายต่อการเข้าใจ จะสังเกตเห็นว่า
Home Page ส่วนใหญ่่จะมีการนำตารางมาช่วยในการจัดเมนูหรือหัวข้อที่เป็น ไปยัง Web Page หรือ Web Site อื่น
ตัวอย่าง เช่น เว็บไซต์ของ Sanook.com ที่มีการจัดหน้าเว็บเพจด้วยการนำเอาตารางมาประยุกต์ใช้
คำสั่งที่นำมาใช้ในการสร้างตาราง
<Table>…… </Table>
- เป็น Tag สำหรับกำหนดจุดเริ่มต้นและสิ้นสุดการสร้างตาราง
<TR>……….</TR>
- เป็น Tag สำหรับสร้างแถว (row) ให้กับตาราง
<TD>………</TD>
- เป็น Tag สำหรับสร้างคอลัมน์ (column) ให้กับตารางHTML
รูปแบบของคำสั่ง ที่ใช้ในการสร้างตาราง
<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>
<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 ที่ใช้ในการสร้างกรอบตาราง
<TABLE BORDER = "ขนาดของกรอบ">...</TABLE> |
การกำหนดสีเส้นของตาราง
<TABLE BORDER = "ขนาดของกรอบตาราง" BORDERCOLOR="ชื่อสีหรือรหัสสี">... </TABLE> |
ตัวอย่างโปรแกรม
<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 การใส่รูปภาพในตาราง
<TD><IMG SRC="ชื่อไฟล์รูปภาพที่ต้องการ.นามสกุล"> </TD>
|
<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>
|
แหล่งที่มา