หน่วยการเรียนรู้ที่ 6
TRANSCRIPT
หน่�วยการเรยน่ร��ที่� 6การสร�างตารางและการประย�กต�
ใช้�งาน่
การแสดงข้�อมู�ลที่�มูความูส มูพั น่ธ์�ใน่ล กษณะข้องแถวและคอล มูน่� ต�องแสดงข้�อมู�ลใน่ล กษณะข้องตารางเพั'�อที่�จะที่)าความูเข้�าใจก บข้�อมู�ลที่�ที่)าการแสดงผล
การแสดงผลข้�อมู�ลแบบตารางบน่เว,บเพัจสามูารถประย�กต�ใช้�งาน่ได�หลายด�าน่ ต .งแต�การแสดงผลเป/น่เป/น่ตารางธ์รรมูดา เพั'�อแสดงค�าต วเลข้ที่างสถ0ต0หร'อต วเลข้ที่�มูความูส มูพั น่ธ์�ก น่ สามูารถที่)าให�เห,น่การเปรยบเที่ยบอย�างช้ ดเจน่ ย งมูการประย�กต�ใช้�ตารางก บข้�อมู�ลประเภที่อ'�น่ๆ เช้�น่ข้�อความูหร'อร�ปภาพัเพั'�อช้�วยออกแบบเว,บเพัจ ซึ่4�งบางคร .งด�ไมู�ออกเลยว�าเป/น่การใช้�ตารางช้�วยใน่การสร�างเว,บเพัจ
โครงสร�างข้องตารางจะประกอบไปด�วยแถวและคอล มูน่� โดยใช้�ค)าส �งต�างๆเป/น่ต วก)าหน่ดต)าแหน่�งข้องแถวและคอล มูน่� โดยร�ปแบบค)าส �งที่�เก�ยวก บตารางมูด งน่.• <TABLE> ก)าหดการสร�างตาราง และค)าส �ง
ป6ดค'อ </TABLE>• <CAPTION> เป/น่การก)าหน่ดค)าหร'อ
ข้�อความูอธ์0บายตาราง และมู ค)าส �งป6ดค'อ<CAPTION>
• <TR> เป/น่การก)าหน่ดแถวข้องตาราง และค)าส �งป6ดค'อ </TR>
• <TH> เป/น่การก)าหน่ดห วเร'�องใน่คอล มูน่� และค)าส �งป6ดค'อ </TH>
• <TD> เป/น่การก)าหน่ดข้�อมู�ลใน่แต�และสดมูภ�ใน่ตาราง และค)าส �งป6ดค'อ </TD>
ค)าส �งที่�ใช้�ใน่การสร�างตาราง
<HTML> <HEAD> <TITLE> โปรแกรมูแรกข้องด0ฉั น่ </TITLE> </HEAD> <BODY> <table border = "1"> <caption> ข้�อความูส�วน่บน่ข้องตาราง </caption> <tr><th>คอล มูน่� ที่� 1 </th><th> คอล มูน่� ที่� 2 </th></tr> <tr><td>ข้�อมู�ลแถว ที่� 1/1 </td><td>ข้�อมู�ลแถวที่� 1/2 </td></tr> <tr><td>ข้�อมู�ลแถว ที่� 2/1 </td><td>ข้�อมู�ลแถวที่� 2/2 </td></tr> </table> </BODY> </HTML>
ต วอย�างการสร�างตาราง
ข้�อมู�ลใน่ตารางจะแบ�งเป/น่ส�วน่อย�างช้ ดเจน่ โดยมูเส�น่กรอบล�อมูรอบแต�ละช้�องข้องข้�อมู�ลหร'อเส�น่ข้อบข้องตารางเพั'�อความูสวยงามูข้องเว,บเพัจ ผ��ที่�ที่)าการออกแบบเว,บเพัจจะไมู�แสดงส�น่กรอบน่ .น่เพั'�อความูสวยงามู การก)าหน่ดเส�น่ข้อบข้องตารางสามูารถก)าหน่ดโดยใช้�การก)าหน่ดค�ณล กษณะพั0เศษข้องค)าส �ง ค)าส �งที่�ใช้�ใน่การก)าหน่ดล กษณะพั0เศษเพั0�มูเต0มูน่ .น่ ค'อ Border ใช้�ใน่การก)าหน่ดข้น่าดข้องเส�น่ข้อบและ Border color ใน่การก)าหน่ดสข้องเส�น่ข้อบ โดยมูร�ปแบบการใช้�งาน่ค)าส �งด งน่.ค'อ<TABLE Border = “ค�าต วเลข้ที่�เป/น่ข้น่าดข้องเส�น่ข้อบ ” Bordercolor = “#RGB หร'อช้'�อส”>
การก)าหน่ดเส�น่ข้อบข้องตาราง
<HTML> <HEAD> <TITLE><B>ช้'�อเร'�องข้องตาราง</B></TITLE> </HEAD> <BODY> <TABLE> <CAPTION>ช้'�อเร'�องข้องตาราง</CAPTION> <TR> <TD>รห ส</TD> <TD>ช้'�อ-สก�ล</TD> </TR> <TR> <TD>0001</TD> <TD>มูอส มูอดไหมู�</TD> </TR> <TR> <TD>0003</TD> <TD>ไฝ เป/น่ดวง</TD> </TR> </TABLE> </BODY> </HTML>
ต วอย�างการสร�างตาราง
<HTML> <HEAD> <TITLE>ช้'�อเร'�องข้องตาราง</TITLE> </HEAD> <BODY> <TABLE BORDER="2" BORDERCOLOR="BLUE"> <CAPTION><B>ช้'�อเร'�องข้องตาราง</B></CAPTION
</BODY> </HTML>
ต วอย�างการก)าหน่ดสเส�น่ข้อบข้องตาราง
<HTML> <HEAD> <TITLE>ช้'�อเร'�องข้องตาราง</TITLE> </HEAD> <BODY> <TABLE BORDER="2" BORDERCOLOR="BLUE"FRAME="HSIDES">
ต วอย�างการก)าหน่ดร�ปแบบเส�น่ข้อบตาราง
<HTML><HEAD><TITLE>ช้'�อเร'�องข้องตาราง</TITLE> </HEAD> <BODY> <TABLE BGCOLOR="YELLOW"BORDER="1" BORDERCOLOR="BLUE"> <TR> <TD>รห ส</TD> <TD>ช้'�อ-สก�ล</TD> </TR> </BODY></HTML>
ต วอย�างการก)าหน่ดสพั'.น่หล งข้องตาราง
<HTML><HEAD> <TITLE>ช้'�อเร'�องข้องตาราง</TITLE></HEAD> <BODY> <TABLE BORDER="1"BORDERCOLOR="BLUE"> <CAPTION><B>ช้'�อเร'�องข้องตาราง</B></CAPTION> <TR BGCOLOR="CYAN"> <TD>รห ส</TD> <TD>ช้'�อ-สก�ล</TD> </BODY></HTML>
ต วอย�างก)าหน่ดสพั'.น่หล งเฉัพัาะแถวแรก
การก)าหน่ดความูกว�างและความูส�งข้องตาราง สามูารถที่)าได�โดยใช้�ค)าส �งส)าหร บก)าหน่ดค�ณล กษณะพั0เศษเพั0�มูเต0มูที่�อย��ภายใต�ค)าส �ง <TABLE> โดยค)าส �งที่�ใช้�ส)าหร บก)าหน่ดค�ณสมูบ ต0พั0เศษเพั0�มูเต0มูน่ .น่ ค'อ WIDTH เพั'�อใช้�ส)าหร บก)าหน่ดความูกว�างข้องตารางและHEIGHT ส)าหร บก)าหน่ดความูส�งข้องตาราง สามูารถก)าหน่ดได� 2 ล กษณะค'อ ก)าหน่ดเป/น่เปอร�เซึ่,น่ต�ข้องจอภาพั และก)าหน่ดเป/น่จ)าน่วน่พั0กเซึ่ล มูร�ปแบบการใช้�ค)าส �งด งน่.<TABLE WIDTH = “ ความูกว�างข้องตาราง ” HEIGHT = “ ความูส�งข้องตาราง ”
การก)าหน่ดความูกว�างและความูส�งข้องตาราง
<html> <head> <title>การสร�างตาราง</title> </head> <body> <br>การก)าหน่ดความูกว�างและความูส�งข้องตาราง </br> <hr> <table border="1" cellspacing="5" width="500" height="400"> <caption align="bottom">ตารางที่� 1 การที่ดลองสร�างตาราง </caption> <tr><td> แถว 1 คอล มูน่� 1 </td><td> แถว 1 คอล มูน่� 2 </td></tr> <tr><td> แถว 2 คอล มูน่� 1 </td><td> แถว 2 คอล มูน่� 2 </td></tr>
</table> </body> </html>
ต วอย�างการก)าหน่ดความูกว�างและความูส�งข้องตาราง
