Embed Size (px)
DESCRIPTION
CHAPTER 4. การสร้างตารางบนเว็บไซด์. สาระการเรียนรู้. เพื่อศึกษาถึงเทคนิคในการสร้างตารางแบบต่าง ๆ โดยใช้ภาษา Html ในการ จัดการโดยให้สามารถออกแบบเว็บเพจได้ง่ายมากยิ่งขึ้น. การสร้างตาราง ( TABLE ). - PowerPoint PPT Presentation
Citation preview
การสร�างตารางบนเว็�บไซด์�CHAPTER 4
สาระการเร�ยนร��สาระการเร�ยนร��
เพื่��อศึ�กษาถึ�งเทคนิ�คในิการสร�างตารางแบบต�าง ๆ โดยใช้�ภาษา Html ในิการจั!ดการโดยให้�สามารถึออกแบบเว็%บเพื่จัได�ง�ายมากย��งขึ้�(นิ
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
การสร�างตาราง ถึ�อเป็*นิ ค+าส!�งท,�ม,คว็าม ส+าค!ญ อย�างมาก ต�อการจั!ดห้นิ�าเอกสาร ขึ้องเว็%ป็เพื่จั เพื่ราะ เราสามารถึ จั!ดว็าง ร/ป็ภาพื่ ขึ้�อคว็าม ห้ร�อแม�แต� ตาราง ฯลฯ ไว็�ได�ท,�ต+าแห้นิ�ง ต�างๆ โดยใช้�ค+าส!�ง การสร�าง TABLE
โครงสร�างของการสร�างตาราง (TABLE)
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
Attribute ที่��ส�าค�ญ ของ TABLE border ใช้�ก+าห้นิดคว็ามห้นิา ขึ้องขึ้อบ ตาราง ถึ�าไม�ต�องการให้�ม, ขึ้อบ ก+าห้นิดเป็*นิ 0 cellPadding ใช้�ก+าห้นิดพื่�(นิท,�ว็�างๆภายในิขึ้อบเซลขึ้องตาราง cellSpacing ใช้�ก+าห้นิดช้�องว็�างระห้ว็�างเซล width ใช้�ก+าห้นิดคว็ามกว็�างขึ้อง Table และ คว็ามกว็�างขึ้องช้�องเซลล3 สามารถึ ก+าห้นิดเป็*นิต!ว็เลขึ้ห้นิ�อย pixel ห้ร�อ ก+าห้นิดเป็*นิ % ก%ได� height ใช้�ก+าห้นิดคว็ามส/งขึ้อง Table และ คว็ามส/งขึ้องช้�องเซลล3 สามารถึ ก+าห้นิด เป็*นิต!ว็เลขึ้ห้นิ�อย pixel ห้ร�อ ก+าห้นิดเป็*นิ %ก%ได� bgcolor ใช้�ก+าห้นิดส,พื่�(นิขึ้อง Table และ ส,พื่�(นิขึ้องช้�องเซลล3
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
Attribute ที่��ส�าค�ญ ของ TD align ใช้�ก+าห้นิด ต+าแห้นิ�งขึ้อง ส��งท,�จัะแสดงภาย ในิเซล3 ในิแนิว็นิอนิ ม, left ,center,right valign ใช้�ก+าห้นิด ต+าแห้นิ�งขึ้อง ส��งท,�จัะแสดงภาย ในิเซล3 ในิแนิว็ต!(ง ม, top ,middle,bottom Attribute ที่��น�าสนใจอ"�นๆ Colspan (รว็ม cell แนิว็นิอนิ ) (ต!ว็อย�างการใช้�อย/�ด�านิล�าง ) , Rowspan ( รว็ม cell แนิว็ต!(ง )
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
Row1,col1
Row1,col2
Row1,col3
Row1,col4
Row1,col5
Row2,col1
Row2,col2
Row2,col3
Row2,col4
Row2,col4
Row3,col1
Row3,col2
Row3,col3
Row3,col4
Row3,col4
Row4,col1
Row4,col2
Row4,col3
Row4,col4
Row4,col4
คอลั�มน� (COLUMN)
แถว็ (ROW)
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
จ�านว็นแถว็ในตาราง<table>
<tr> แถว็ 1 </tr>
<tr> แถว็ 2 </tr>
<tr> แถว็ 3 </tr></table>
แถว็ที่�� 1
แถว็ที่�� 2
แถว็ที่�� 3
จ�านว็นคอลั�มน�ในแต�ลัะแถว็<tr>
<td> แถว็ 1 </td>
<td> แถว็ 2 </td>
<td> แถว็ 3 </td></tr>
แถว็ที่�� 1 แถว็ที่�� 2 แถว็ที่�� 3
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
<HTML><HEAD> <TITLE> ที่ด์สอบการสร�างเว็�บเพจ</TITLE></HEAD><BODY> <table> <tr>
<td>แถว็ที่�� 1 คอลั�มน�ที่�� 1</td> <td>แถว็ที่�� 1 คอลั�มน�ที่�� 2</td>
</tr> <tr> <td>แถว็ที่�� 2 คอลั�มน�ที่�� 1</td>
<td>แถว็ที่�� 2 คอลั�มน�ที่�� 2</td> </tr> </table> </BODY> </HTML>
TEST4.htm ที่�าการสร�างที่ด์สอบการสร�างตาราง
ก�าหนด์ให�เส�นขอบตารางให�ปรากฎการสร�างตาราง การสร�างตาราง ((TABLETABLE))
ร�ปแบบค�าส��ง
<table border=“1"></table>
ช้��อแอตทร�บ�ว็ต3 border
ต+าแห้นิ�งท,�ใช้� ภายในิแท%กเป็4ดขึ้อง <table>…..</ table >ค�าท,�ก+าห้นิดให้� ขึ้นิาดในิห้นิ�ว็ยพื่�กเซล
การสร�างตาราง การสร�างตาราง ((TABLETABLE))TEST4_1.htm ที่ด์สอบการสร�างตารางม�เส�นขอบตารางม�ร�ปแบบค�าส��ง<HTML>
<HEAD> <TITLE> ที่ด์สอบการสร�างเว็�บเพจ</TITLE></HEAD><BODY> <table border='1'> <tr>
<td>แถว็ที่�� 1 คอลั�มน�ที่�� 1</td> <td>แถว็ที่�� 1 คอลั�มน�ที่�� 2</td>
</tr> <tr>
<td>แถว็ที่�� 2 คอลั�มน�ที่�� 1</td><td>แถว็ที่�� 2 คอลั�มน�ที่�� 2</td>
</tr> </table> </BODY> </HTML>
เปลั��ยนส�เส�นขอบตารางร�ปแบบค�าส��ง <table border=“1
bordercolor="#FF0000"></table>
ช้��อแอตทร�บ�ว็ต3 bordercolor
ต+าแห้นิ�งท,�ใช้� ภายในิแท%กเป็4ดขึ้อง <table>…..</ table >ค�าท,�ก+าห้นิดให้� ช้��อส,ห้ร�อค�าส, เช้�นิ green, pink, #FF0000
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
การสร�างตาราง การสร�างตาราง ((TABLETABLE))TEST4_2.htm การสร�างตารางม�เส�นขอบตารางแลัะใส�ส�ม�ร�ปแบบค�าส��ง
<HTML><HEAD> <TITLE> ที่ด์สอบการสร�างเว็�บเพจ</TITLE></HEAD><BODY> <table border='1' bordercolor="#FF0000"> <tr> <td>แถว็ที่�� 1 คอลั�มน�ที่�� 1</td> <td>แถว็ที่�� 1 คอลั�มน�ที่�� 2</td> </tr> <tr> <td>แถว็ที่�� 2 คอลั�มน�ที่�� 1</td> <td>แถว็ที่�� 2 คอลั�มน�ที่�� 2</td> </tr> </table> </BODY></HTML>
ก�าหนด์ขนาด์ของตารางร�ปแบบค�าส��ง <table border=“1“
width=“45%“height=“150“></table>ช้��อแอตทร�บ�ว็ต3 width, height
ต+าแห้นิ�งท,�ใช้� ภายในิแท%กเป็4ดขึ้อง <table>…..</ table >ค�าท,�ก+าห้นิดให้� คว็ามกว็�างห้ร�อคว็ามส/งท,�เป็*นิเป็อร3เซ%นิต3 ห้ร�อจัะก+าห้นิดเป็*นิพื่�กเซลโดยตรง
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
TEST4_3.htm การสร�างตารางก�าหนด์ขนาด์ของตารางม�ร�ปแบบค�าส��ง
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
<HTML><HEAD> <TITLE> ที่ด์สอบการสร�างเว็�บเพจ</TITLE></HEAD><BODY> <table border='1' width="45% " height="150"> <tr> <td>แถว็ที่�� 1 คอลั�มน�ที่�� 1</td> <td>แถว็ที่�� 1 คอลั�มน�ที่�� 2</td> </tr> <tr> <td>แถว็ที่�� 2 คอลั�มน�ที่�� 1</td> <td>แถว็ที่�� 2 คอลั�มน�ที่�� 2</td> </tr> </table> </BODY> </HTML>
การจ�ด์ต�าแหน�งของตารางในหน�าเว็�บเพจร�ปแบบค�าส��ง <table border=“1“
align=“center“></table>
ช้��อแอตทร�บ�ว็ต3 align
ต+าแห้นิ�งท,�ใช้� ภายในิแท%กเป็4ดขึ้อง <table>…..</ table >ค�าท,�ก+าห้นิดให้� left, right และ center โดยค�าป็กต�ค�อ left
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
<HTML><HEAD> <TITLE> ที่ด์สอบการสร�างเว็�บเพจ</TITLE></HEAD><BODY> <table border='1' align="center"> <tr>
<td>แถว็ที่�� 1 คอลั�มน�ที่�� 1</td>
<td>แถว็ที่�� 1 คอลั�มน�ที่�� 2</td> </tr> <tr>
<td>แถว็ที่�� 2 คอลั�มน�ที่�� 1</td>
<td>แถว็ที่�� 2 คอลั�มน�ที่�� 2</td> </tr> </table> </BODY> </HTML>
TEST4_4.htm การจ�ด์ต�าแหน�งของตารางม�ร�ปแบบค�าส��ง
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
การก�าหนด์ส�ในตารางในหน�าเว็�บเพจร�ปแบบค�าส��ง <table border=“1“
bgcolor=“center“></table>
ช้��อแอตทร�บ�ว็ต3 bgcolor
ต+าแห้นิ�งท,�ใช้� ภายในิแท%กเป็4ดขึ้อง <table>…..</ table >ค�าท,�ก+าห้นิดให้� ช้��อส,ห้ร�อค�าส,
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
TEST4_5.htm การใส�ส�ภายในตารางม�ร�ปแบบค�าส��ง
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
<HTML><HEAD> <TITLE> ที่ด์สอบการสร�างเว็�บเพจ</TITLE></HEAD><BODY> <table border='1' bgcolor="#CC00FF"> <tr> <td>แถว็ที่�� 1 คอลั�มน�ที่�� 1</td> <td>แถว็ที่�� 1 คอลั�มน�ที่�� 2</td> </tr> <tr> <td>แถว็ที่�� 2 คอลั�มน�ที่�� 1</td> <td>แถว็ที่�� 2 คอลั�มน�ที่�� 2</td> </tr> </table> </BODY> </HTML>
การก�าหนด์ภาพพ"-นหลั�งตารางในหน�าเว็�บเพจร�ปแบบค�าส��ง <table border=“1“
background=“ชื่"�อไฟลั�ภาพ“></table>ช้��อแอตทร�บ�ว็ต3 background
ต+าแห้นิ�งท,�ใช้� ภายในิแท%กเป็4ดขึ้อง <table>…..</ table >
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
TEST4_6.htm การใส�ภาพพ"-นหลั�งในตารางม�ร�ปแบบค�าส��ง
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
<HTML><HEAD> <TITLE> ที่ด์สอบการสร�างเว็�บเพจ</TITLE></HEAD><BODY> <table border='1' background="bg3.gif"> <tr> <td>แถว็ที่�� 1 คอลั�มน�ที่�� 1</td> <td>แถว็ที่�� 1 คอลั�มน�ที่�� 2</td> </tr> <tr> <td>แถว็ที่�� 2 คอลั�มน�ที่�� 1</td> <td>แถว็ที่�� 2 คอลั�มน�ที่�� 2</td> </tr> </table> </BODY> </HTML>
ต�-งระยะห�างระหว็�างชื่�องในตารางร�ปแบบค�าส��ง <table border=“1“
cellspacing=“15“></table>
ช้��อแอตทร�บ�ว็ต3 cellspacing
ต+าแห้นิ�งท,�ใช้� ภายในิแท%กเป็4ดขึ้อง <table>…..</ table >ค�าท,�ก+าห้นิดให้� ระยะห้�างในิห้นิ�ว็ยพื่�กเซล
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
TEST4_7.htm การต�-งระยะห�างชื่�องในตารางม�ร�ปแบบค�าส��ง
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
<HTML><HEAD> <TITLE> ที่ด์สอบการสร�างเว็�บเพจ</TITLE></HEAD><BODY> <table border='1' cellspacing="15"> <tr> <td>แถว็ที่�� 1 คอลั�มน�ที่�� 1</td> <td>แถว็ที่�� 1 คอลั�มน�ที่�� 2</td> </tr> <tr> <td>แถว็ที่�� 2 คอลั�มน�ที่�� 1</td> <td>แถว็ที่�� 2 คอลั�มน�ที่�� 2</td> </tr> </table> </BODY> </HTML>
ต�-งระยะห�างระหว็�างขอบก�บข�อม�ลัในแต�ลัะชื่�องตารางร�ปแบบค�าส��ง <table border=“1“
cellpadding=“10“></table>
ช้��อแอตทร�บ�ว็ต3 cellpadding
ต+าแห้นิ�งท,�ใช้� ภายในิแท%กเป็4ดขึ้อง <table>…..</ table >ค�าท,�ก+าห้นิดให้� ระยะห้�างในิห้นิ�ว็ยพื่�กเซล
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
TEST4_8.htm การต�-งระยะห�างระหว็�างขอบก�บข�อม�ลัในตารางม�ร�ปแบบค�าส��ง
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
<HTML><HEAD> <TITLE> ที่ด์สอบการสร�างเว็�บเพจ</TITLE></HEAD><BODY> <table border='1' cellspacing="15 "cellpadding="10"> <tr> <td>แถว็ที่�� 1 คอลั�มน�ที่�� 1</td> <td>แถว็ที่�� 1 คอลั�มน�ที่�� 2</td> </tr> <tr> <td>แถว็ที่�� 2 คอลั�มน�ที่�� 1</td> <td>แถว็ที่�� 2 คอลั�มน�ที่�� 2</td> </tr> </table> </BODY> </HTML>
การก�าหนด์คว็าม ส�ง,กว็�าง,ต�าแหน�ง ให�ก�บเฉพาะColumn ในตารางร�ปแบบค�าส��ง
<td width=“100” height=“80” aling=“center></table>
ช้��อแอตทร�บ�ว็ต3 width, height , align
ต+าแห้นิ�งท,�ใช้� ภายในิแท%กเป็4ดขึ้อง <td>…..</ td >ค�าท,�ก+าห้นิดให้� คว็ามกว็�างห้ร�อคว็ามส/งเป็*นิเป็อร3เซ%นิต3ห้ร�อก+าห้นิด ในิห้นิ�ว็ยพื่�เซล ใช้� left,center,right เป็*นิต�นิ
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
TEST4_9.htm การจ�ด์การข�อม�ลัภายใน คอลั�มน� ในตารางม�ร�ปแบบค�าส��ง
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
แถึว็ท,� 1 คอล!มนิ3ท,� 1</td>
<HTML><HEAD> <TITLE> ที่ด์สอบการสร�างเว็�บเพจ</TITLE></HEAD><BODY> <table border='1' cellspacing="15 "cellpadding="10"> <tr> <td width="100 "
height="50 " align="center"> แถว็ที่�� 1 คอลั�มน�ที่�� 1</td> <td>แถว็ที่�� 1 คอลั�มน�ที่�� 2</td> </tr> <tr> <td>แถว็ที่�� 2 คอลั�มน�ที่�� 1</td> <td>แถว็ที่�� 2 คอลั�มน�ที่�� 2</td> </tr> </table> </BODY> </HTML>
การรว็ม COLUMN ในตารางร�ปแบบค�าส��ง
<td colspan=“จ�านว็นชื่�องที่��ต�องการรว็ม”></table>
ช้��อแอตทร�บ�ว็ต3 colspan
ต+าแห้นิ�งท,�ใช้� ภายในิแท%กเป็4ดขึ้อง <td>…..</ td >
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
TEST4_10.htm การรว็ม คอลั�มน� ในตารางม�ร�ปแบบค�าส��ง
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
<HTML><HEAD> <TITLE> ที่ด์สอบการสร�างเว็�บเพจ</TITLE></HEAD><BODY> <table border='1' cellspacing="15 "cellpadding="10"> <tr> <td colspan="2 " >แถว็ที่�� 1 คอลั�มน�ที่�� 1</td> <td>แถว็ที่�� 1 คอลั�มน�ที่�� 2</td> </tr> <tr> <td>แถว็ที่�� 2 คอลั�มน�ที่�� 1</td> <td>แถว็ที่�� 2 คอลั�มน�ที่�� 2</td> </tr> </table> </BODY> </HTML>
ก�อนิ
ก�อนิ
ห้ล!ง
การรว็ม ROW ในตารางร�ปแบบค�าส��ง
<td row=“จ�านว็นชื่�องที่��ต�องการรว็ม”></table>
ช้��อแอตทร�บ�ว็ต3 rowspan
ต+าแห้นิ�งท,�ใช้� ภายในิแท%กเป็4ดขึ้อง <td>…..</ td >
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
TEST4_11.htm การรว็ม แถว็ ในตารางม�ร�ปแบบค�าส��ง
การสร�างตาราง การสร�างตาราง ((TABLETABLE))
<HTML><HEAD> <TITLE> ที่ด์สอบการสร�างเว็�บเพจ</TITLE></HEAD><BODY> <table border='1' cellspacing="15 "cellpadding="10"> <tr> <td rowspan="2 " >แถว็ที่�� 1 คอลั�มน�ที่�� 1</td> <td>แถว็ที่�� 1 คอลั�มน�ที่�� 2</td> </tr> <tr> <td>แถว็ที่�� 2 คอลั�มน�ที่�� 1</td> <td>แถว็ที่�� 2 คอลั�มน�ที่�� 2</td> </tr> </table> </BODY> </HTML>
ก�อนิ
ห้ล!ง
สารพ�นว็1ธี�การประย3กต�ใชื่�ตารางสารพ�นว็1ธี�การประย3กต�ใชื่�ตาราง
การจ�ด์ต�าแหน�งข�อม�ลัเชื่�น โชื่ว็�ส1นค�าเป4น
หมว็ด์หม�� เป4นต�นออกแบบเที่�มเพลัตให�เว็�บไซด์�จ�ด์เร�ยงแต�ลัะส�ว็นของร�ปภสพไว็�ในตารางที่�าขอบตารางให�เก5ไก5
THE ENDTHE END
