1 / 34

CHAPTER 4

CHAPTER 4. การสร้างตารางบนเว็บไซด์. สาระการเรียนรู้. เพื่อศึกษาถึงเทคนิคในการสร้างตารางแบบต่าง ๆ โดยใช้ภาษา Html ในการ จัดการโดยให้สามารถออกแบบเว็บเพจได้ง่ายมากยิ่งขึ้น. การสร้างตาราง ( TABLE ).

nevan
Télécharger la présentation

CHAPTER 4

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CHAPTER 4 การสร้างตารางบนเว็บไซด์

  2. สาระการเรียนรู้ เพื่อศึกษาถึงเทคนิคในการสร้างตารางแบบต่าง ๆ โดยใช้ภาษา Html ในการ จัดการโดยให้สามารถออกแบบเว็บเพจได้ง่ายมากยิ่งขึ้น

  3. การสร้างตาราง (TABLE) การสร้างตาราง ถือเป็น คำสั่งที่มีความ สำคัญ อย่างมาก ต่อการจัดหน้าเอกสาร ของเว็ปเพจ เพราะ เราสามารถ จัดวาง รูปภาพ ข้อความ หรือแม้แต่ ตาราง ฯลฯ ไว้ได้ที่ตำแหน่ง ต่างๆ โดยใช้คำสั่ง การสร้าง TABLE

  4. การสร้างตาราง (TABLE) โครงสร้างของการสร้างตาราง (TABLE)

  5. การสร้างตาราง (TABLE) Attribute ที่สำคัญ ของ TABLEborder ใช้กำหนดความหนา ของขอบ ตาราง ถ้าไม่ต้องการให้มี ขอบ กำหนดเป็น 0cellPadding ใช้กำหนดพื้นที่ว่างๆภายในขอบเซลของตารางcellSpacing ใช้กำหนดช่องว่างระหว่างเซลwidth ใช้กำหนดความกว้างของ Table และ ความกว้างของช่องเซลล์ สามารถ กำหนดเป็นตัวเลขหน่อย pixel หรือ กำหนดเป็น % ก็ได้height ใช้กำหนดความสูงของ Table และ ความสูงของช่องเซลล์ สามารถ กำหนด เป็นตัวเลขหน่อย pixel หรือ กำหนดเป็น % ก็ได้ bgcolor ใช้กำหนดสีพื้นของ Table และ สีพื้นของช่องเซลล์

  6. การสร้างตาราง (TABLE) Attribute ที่สำคัญ ของ TDalign ใช้กำหนด ตำแหน่งของ สิ่งที่จะแสดงภาย ในเซล์ ในแนวนอน มี left ,center,rightvalign ใช้กำหนด ตำแหน่งของ สิ่งที่จะแสดงภาย ในเซล์ ในแนวตั้ง มี top ,middle,bottom Attribute ที่น่าสนใจอื่นๆ Colspan (รวม cell แนวนอน ) (ตัวอย่างการใช้อยู่ด้านล่าง) , Rowspan ( รวม cell แนวตั้ง )

  7. การสร้างตาราง (TABLE) คอลัมน์ (COLUMN) แถว (ROW)

  8. การสร้างตาราง (TABLE) จำนวนแถวในตาราง <table> <tr>แถว 1</tr> <tr> แถว 2</tr> <tr>แถว 3</tr> </table>

  9. การสร้างตาราง (TABLE) จำนวนคอลัมน์ในแต่ละแถว <tr> <td>แถว 1</td> <td> แถว 2</td> <td>แถว 3</td> </tr>

  10. การสร้างตาราง (TABLE) TEST4.htm ทำการสร้างทดสอบการสร้างตาราง <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>

  11. การสร้างตาราง (TABLE) กำหนดให้เส้นขอบตารางให้ปรากฎ รูปแบบคำสั่ง <table border=“1"></table> ชื่อแอตทริบิวต์ borderตำแหน่งที่ใช้ ภายในแท็กเปิดของ <table>…..</ table >ค่าที่กำหนดให้ ขนาดในหน่วยพิกเซล

  12. การสร้างตาราง (TABLE) 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>

  13. การสร้างตาราง (TABLE) เปลี่ยนสีเส้นขอบตาราง รูปแบบคำสั่ง <table border=“1“ bordercolor="#FF0000"></table> ชื่อแอตทริบิวต์ bordercolorตำแหน่งที่ใช้ ภายในแท็กเปิดของ <table>…..</ table >ค่าที่กำหนดให้ ชื่อสีหรือค่าสี เช่น green, pink, #FF0000

  14. การสร้างตาราง (TABLE) 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>

  15. การสร้างตาราง (TABLE) กำหนดขนาดของตาราง รูปแบบคำสั่ง <table border=“1“ width=“45%“height=“150“></table> ชื่อแอตทริบิวต์ width, heightตำแหน่งที่ใช้ ภายในแท็กเปิดของ <table>…..</ table >ค่าที่กำหนดให้ ความกว้างหรือความสูงที่เป็นเปอร์เซ็นต์ หรือจะกำหนดเป็นพิกเซลโดยตรง

  16. การสร้างตาราง (TABLE) TEST4_3.htm การสร้างตารางกำหนดขนาดของตารางมีรูปแบบคำสั่ง <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>

  17. การสร้างตาราง (TABLE) การจัดตำแหน่งของตารางในหน้าเว็บเพจ รูปแบบคำสั่ง <table border=“1“ align=“center“></table> ชื่อแอตทริบิวต์ alignตำแหน่งที่ใช้ ภายในแท็กเปิดของ <table>…..</ table >ค่าที่กำหนดให้ left, right และ center โดยค่าปกติคือ left

  18. การสร้างตาราง (TABLE) TEST4_4.htm การจัดตำแหน่งของตารางมีรูปแบบคำสั่ง <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>

  19. การสร้างตาราง (TABLE) การกำหนดสีในตารางในหน้าเว็บเพจ รูปแบบคำสั่ง <table border=“1“ bgcolor=“center“></table> ชื่อแอตทริบิวต์ bgcolorตำแหน่งที่ใช้ ภายในแท็กเปิดของ <table>…..</ table >ค่าที่กำหนดให้ ชื่อสีหรือค่าสี

  20. การสร้างตาราง (TABLE) TEST4_5.htm การใส่สีภายในตารางมีรูปแบบคำสั่ง <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>

  21. การสร้างตาราง (TABLE) การกำหนดภาพพื้นหลังตารางในหน้าเว็บเพจ รูปแบบคำสั่ง <table border=“1“ background=“ชื่อไฟล์ภาพ“></table> ชื่อแอตทริบิวต์ backgroundตำแหน่งที่ใช้ ภายในแท็กเปิดของ <table>…..</ table >

  22. การสร้างตาราง (TABLE) TEST4_6.htm การใส่ภาพพื้นหลังในตารางมีรูปแบบคำสั่ง <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>

  23. การสร้างตาราง (TABLE) ตั้งระยะห่างระหว่างช่องในตาราง รูปแบบคำสั่ง <table border=“1“ cellspacing=“15“></table> ชื่อแอตทริบิวต์ cellspacingตำแหน่งที่ใช้ ภายในแท็กเปิดของ <table>…..</ table >ค่าที่กำหนดให้ ระยะห่างในหน่วยพิกเซล

  24. การสร้างตาราง (TABLE) TEST4_7.htm การตั้งระยะห่างช่องในตารางมีรูปแบบคำสั่ง <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>

  25. การสร้างตาราง (TABLE) ตั้งระยะห่างระหว่างขอบกับข้อมูลในแต่ละช่องตาราง รูปแบบคำสั่ง <table border=“1“ cellpadding=“10“></table> ชื่อแอตทริบิวต์ cellpaddingตำแหน่งที่ใช้ ภายในแท็กเปิดของ <table>…..</ table >ค่าที่กำหนดให้ ระยะห่างในหน่วยพิกเซล

  26. การสร้างตาราง (TABLE) TEST4_8.htm การตั้งระยะห่างระหว่างขอบกับข้อมูลในตารางมีรูปแบบคำสั่ง <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>

  27. การสร้างตาราง (TABLE) การกำหนดความ สูง,กว้าง,ตำแหน่ง ให้กับเฉพาะColumn ในตาราง รูปแบบคำสั่ง <td width=“100” height=“80” aling=“center></table> ชื่อแอตทริบิวต์ width, height , alignตำแหน่งที่ใช้ ภายในแท็กเปิดของ <td>…..</ td >ค่าที่กำหนดให้ ความกว้างหรือความสูงเป็นเปอร์เซ็นต์หรือกำหนด ในหน่วยพิเซล ใช้ left,center,right เป็นต้น

  28. การสร้างตาราง (TABLE) TEST4_9.htm การจัดการข้อมูลภายใน คอลัมน์ ในตารางมีรูปแบบคำสั่ง <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> แถวที่1คอลัมน์ที่1</td>

  29. การสร้างตาราง (TABLE) การรวม COLUMN ในตาราง รูปแบบคำสั่ง <td colspan=“จำนวนช่องที่ต้องการรวม”></table> ชื่อแอตทริบิวต์ colspanตำแหน่งที่ใช้ ภายในแท็กเปิดของ <td>…..</ td >

  30. การสร้างตาราง (TABLE) TEST4_10.htm การรวม คอลัมน์ ในตารางมีรูปแบบคำสั่ง ก่อน <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> หลัง ก่อน

  31. การสร้างตาราง (TABLE) การรวม ROW ในตาราง รูปแบบคำสั่ง <td row=“จำนวนช่องที่ต้องการรวม”></table> ชื่อแอตทริบิวต์ rowspanตำแหน่งที่ใช้ ภายในแท็กเปิดของ <td>…..</ td >

  32. การสร้างตาราง (TABLE) TEST4_11.htm การรวม แถว ในตารางมีรูปแบบคำสั่ง ก่อน <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> หลัง

  33. สารพันวิธีการประยุกต์ใช้ตารางสารพันวิธีการประยุกต์ใช้ตาราง • การจัดตำแหน่งข้อมูลเช่น โชว์สินค้าเป็นหมวดหมู่ เป็นต้น • ออกแบบเท็มเพลตให้เว็บไซด์ • จัดเรียงแต่ละส่วนของรูปภสพไว้ในตาราง • ทำขอบตารางให้เก๋ไก๋

  34. THE END

More Related