1 / 42

ภาษา HTML

ภาษา HTML. การสร้างตาราง. 412 443 Web page Design and Development. อาจารย์จุฑาทิพย์ ไชยกำบัง กลุ่มวิชาการจัดการสารสนเทศและการสื่อสาร คณะมนุษยศาสตร์และสังคมศาสตร์ มหาวิทยาลัยขอนแก่น. การสร้างตาราง. การสร้างตารางขั้นพื้นฐาน การใช้แอททริบิวส์ BORDER การใช้แอททริบิวส์ COLSPAN และ ROWSPAN

vaughan-johns
Download Presentation

ภาษา HTML

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. ภาษา HTML การสร้างตาราง 412 443 Web page Design and Development อาจารย์จุฑาทิพย์ ไชยกำบัง กลุ่มวิชาการจัดการสารสนเทศและการสื่อสาร คณะมนุษยศาสตร์และสังคมศาสตร์ มหาวิทยาลัยขอนแก่น

  2. การสร้างตาราง • การสร้างตารางขั้นพื้นฐาน • การใช้แอททริบิวส์ BORDER • การใช้แอททริบิวส์ COLSPAN และ ROWSPAN • การใช้แอททริบิวส์ WIDTH และ HEIGHT • การใช้แอททริบิวส์ CELLSPACING • การใช้แอททริบิวส์ CELLPADDING • การใช้แอททริบิวส์ ALIGN • การใช้คำสั่ง <CAPTION>....</CAPTION> • การใช้แอททริบิวส์ BGCOLOR & BACKGROUND (ใช้กับ IE เท่านั้น) • การใส่รูปในตาราง 412 443 Web page design and development

  3. การสร้างตาราง Table คือ ตารางที่ประกอบไปด้วยแถว (Row) และสดมภ์ (Column) ตัดกัน จะได้ช่องสี่เหลี่ยมสำหรับบรรจุข้อมูล ซึ่งเราเรียกว่าเซล (Cell) ซึ่ง Cell แต่ละ Cell จะสามารถบรรจุข้อมูลได้หลายประเภท เช่น ข้อความ ลำดับรายการ รูปภาพ ฉากหลัง หรือแม้กระทั่งตารางอีกอันหนึ่ง การสร้างเว็บเพจโดยใช้ตาราง เพื่อให้เกิดความสวยงามและเป็นระเบียบเรียบร้อย 412 443 Web page design and development

  4. การสร้างตาราง • โครงสร้างตาราง <HTML> <HEAD> <TITLE>Table</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD></TD> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> <TD></TD> </TR> </TABLE> </BODY> </HTML> 412 443 Web page design and development

  5. คำสั่งสร้างตาราง ใส่ข้อมูลในแนวนอน (Row) ขึ้น Row ใหม่ ใส่ข้อมูลลงใน cell คำสั่งจบการสร้างตาราง การสร้างตาราง • <TABLE> • <TR> • <TD>cell1</TD> <TD>cell2</TD> • <TD>cell3</TD> • </TR> • <TR> • <TD>cell4</TD> <TD>cell5</TD> • <TD>cell6</TD> </TR> • </TABLE> 412 443 Web page design and development

  6. การสร้างตาราง • โครงสร้างตาราง 412 443 Web page design and development

  7. การสร้างตารางขั้นพื้นฐานการสร้างตารางขั้นพื้นฐาน • สมมติว่า ต้องการสร้างตารางเพื่อเก็บข้อมูลนักศึกษาดังนี้ เมื่อเขียนเป็นเอกสาร HTML จะได้ดังนี้ 412 443 Web page design and development

  8. การสร้างตารางขั้นพื้นฐานการสร้างตารางขั้นพื้นฐาน เมื่อเขียนเป็นเอกสาร HTML จะได้ดังนี้ • <HTML><HEAD><TITLE> Table</TITLE></HEAD> • <BODY> • <TABLE> • <TR> <TH>รหัสประจำตัว <TH>ชื่อ-สกุล <TH>ที่อยู่ • <TH>เบอร์โทรศัพท์</TR> • <TR> <TD>453080122-2</TD> <TD>สุวิทย์ แพงจัง</TD> • <TD>123 บ้านโนนม่วง ขอนแก่น 40000</TD> • <TD>012223333</TD></TR> • <TR> <TD>453080134-5</TD> <TD>นิตดา แสงโชติ</TD> • <TD>456 บ้านสีฐาน ขอนแก่น40000</TD> • <TD>019999991</TD></TR> • </TABLE> • </BODY> • </HTML> 412 443 Web page design and development

  9. การสร้างตารางขั้นพื้นฐานการสร้างตารางขั้นพื้นฐาน 412 443 Web page design and development

  10. การใช้แอททริบิวส์ BORDER • ในบางครั้งเราต้องการให้ตารางมีเส้นแบ่งกั้นอย่างชัดเจน เพื่อให้ข้อมูลอ่านง่ายขึ้นหรือเพื่อความเป็นระเบียบมากขึ้น โดยใช้ แอททริบิวส์ BORDER เพื่อสร้างเส้นขอบให้แก่ตาราง ความกว้างของเส้นขอบมีหน่วยเป็นพิกเซล (Pixel) • สามารถใส่สีให้ขอบตารางได้ โดยใช้แอททริบิวส์ BORDERCOLOR(ใช้กับ IE เท่านั้น) 412 443 Web page design and development

  11. การใช้แอททริบิวส์ BORDER <TABLEBORDER = 5> <TR> <TH>รหัสประจำตัว <TH>ชื่อ-สกุล <TH>ที่อยู่ <TH>เบอร์โทรศัพท์ </TR> <TR> <TD>453080122-2</TD> <TD>สุวิทย์ แพงจัง</TD> <TD>123 บ้านโนนม่วง ขอนแก่น 40000</TD> <TD>012223333</TD> </TR> <TR><TD>453080134-5</TD> <TD>นิตดา แสงโชติ</TD> <TD>456 บ้านสีฐาน ขอนแก่น40000</TD> <TD>019999991</TD> </TR> </TABLE> 412 443 Web page design and development

  12. การใช้แอททริบิวส์BORDER 412 443 Web page design and development

  13. การใช้แอททริบิวส์ FRAME <TABLE frame = "border"> <TR><TD>453080134-5</TD><TD>สุวิทย์ แพงจัง</TD></TR> <TR><TD>453080122-2</TD><TD>นิดดา แสงโชติ</TD></TR> </TABLE> <TABLE frame = "box"> ใช้สำหรับจัดการแสดงผลของเส้นรอบๆตาราง เหมือนกับแอททริบิวส์ BORDER โดยมีค่าของการแสดงผลตามตัวอย่าง ดังนี้ 412 443 Web page design and development

  14. <TABLE frame = “void"> <TR><TD>453080134-5</TD><TD>สุวิทย์ แพงจัง</TD></TR> <TR><TD>453080122-2</TD><TD>นิดดา แสงโชติ</TD></TR> </TABLE> 412 443 Web page design and development

  15. <TABLE frame = “below "> <TR><TD>453080134-5</TD><TD>สุวิทย์ แพงจัง</TD></TR> <TR><TD>453080122-2</TD><TD>นิดดา แสงโชติ</TD></TR> </TABLE> <TABLE frame = “above"> <TR><TD>453080134-5</TD><TD>สุวิทย์ แพงจัง</TD></TR> <TR><TD>453080122-2</TD><TD>นิดดา แสงโชติ</TD></TR> </TABLE> 412 443 Web page design and development

  16. <TABLE frame = “vsides"> <TR><TD>453080134-5</TD><TD>สุวิทย์ แพงจัง</TD></TR> <TR><TD>453080122-2</TD><TD>นิดดา แสงโชติ</TD></TR> </TABLE> <TABLE frame = “hsides"> <TR><TD>453080134-5</TD><TD>สุวิทย์ แพงจัง</TD></TR> <TR><TD>453080122-2</TD><TD>นิดดา แสงโชติ</TD></TR> </TABLE> 412 443 Web page design and development

  17. <TABLE frame = “lhs"> <TR><TD>453080134-5</TD><TD>สุวิทย์ แพงจัง</TD></TR> <TR><TD>453080122-2</TD><TD>นิดดา แสงโชติ</TD></TR> </TABLE> <TABLE frame = “rhs"> <TR><TD>453080134-5</TD><TD>สุวิทย์ แพงจัง</TD></TR> <TR><TD>453080122-2</TD><TD>นิดดา แสงโชติ</TD></TR> </TABLE> 412 443 Web page design and development

  18. <TABLE frame = "below" border ="3"> <TR><TD>453080134-5</TD><TD>สุวิทย์ แพงจัง</TD></TR> <TR><TD>453080122-2</TD><TD>นิดดา แสงโชติ</TD></TR> </TABLE> <TABLE frame = “hsides" border ="3"> <TR><TD>รหัสนักศึกษา</TD></TR> </TABLE> 412 443 Web page design and development

  19. การใช้แอททริบิวส์ COLSPAN และ ROWSPAN • แอททริบิวส์COLSPAN ทำหน้าที่กำหนดความกว้างของคอลัมน์ ให้ขยายไปครอบคลุมคอลัมน์อื่นที่อยู่ในแถวเดียวกัน การขยายความกว้างนี้ทำได้โดยการใส่แอททริบิวส์COLSPAN เข้าไปในคำสั่ง <TH> หรือ <TD> โดยมีหน่วยเป็นจำนวนคอลัมน์ที่ต้องการขยาย 412 443 Web page design and development

  20. การใช้แอททริบิวส์ COLSPAN และ ROWSPAN • แอททริบิวส์ COLSPAN 412 443 Web page design and development

  21. การใช้แอททริบิวส์ COLSPAN และ ROWSPAN • แอททริบิวส์ COLSPAN <TABLE BORDER =1> <TR> <TD COLSPAN =2>Row1 Col 1 + Col 2 </TD> <TD COLSPAN =2>Row1Col 3 + Col 4 </TD> </TR> <TR> <TD>Row 2 Col 1 </TD> <TD>Row 2 Col 2</TD> <TD>Row 2 Col 3</TD> <TD>Row 2 Col 4</TD> </TR> </TABLE> 412 443 Web page design and development

  22. การใช้แอททริบิวส์ COLSPAN และ ROWSPAN • แอททริบิวส์ ROWSPAN ทำหน้าที่กำหนดความกว้างของแถว ให้ขยายไปครอบคลุมแถวอื่นที่อยู่ในคอลัมน์เดียวกัน การขยายความกว้างของแถวทำได้โดยการใส่แอททริบิวส์ ROWSPAN เข้าไปในคำสั่ง <TH> หรือ <TD> โดยมีหน่วยเป็นจำนวนแถวที่ต้องการขยาย 412 443 Web page design and development

  23. การใช้แอททริบิวส์ COLSPAN และ ROWSPAN • แอททริบิวส์ ROWSPAN 412 443 Web page design and development

  24. การใช้แอททริบิวส์ COLSPAN และ ROWSPAN • แอททริบิวส์ ROWSPAN <TABLE BORDER =1> <TR> <TD ROWSPAN =2> Row1Col 1+Row 2 Col 1</TD> <TD>Row1Col 2 </TD> <TD>Row1Col 3 </TD> <TD>Row1 Col 4 </TD> </TR> <TR> <TD>Row 2 Col 2</TD> <TD>Row 2 Col 3</TD> <TD>Row 2 Col 4</TD> </TR> </TABLE> 412 443 Web page design and development

  25. การใช้แอททริบิวส์ WIDTH และ HEIGHT • แอททริบิวส์ WIDTHใช้สำหรับกำหนดความกว้างของตาราง มีหน่วยเป็นพิกเซล หรือร้อยละของตารางเทียบกับขนาดของหน้าจอ โดยการแทรกแอททริบิวส์ WIDTH เข้าไปในคำสั่ง <TABLE> • แอททริบิวส์ HEIGHTใช้สำหรับกำหนดความสูงของตาราง มีหน่วยเป็นพิกเซล หรือร้อยละของตารางเทียบกับขนาดของหน้าจอ โดยการแทรกแอททริบิวส์HEIGHT เข้าไปในคำสั่ง <TABLE> 412 443 Web page design and development

  26. การใช้แอททริบิวส์ WIDTH และ HEIGHT <TABLE width = 350 border = 2> <TABLE width = 100% border = 2> 412 443 Web page design and development

  27. 412 443 Web page design and development

  28. การใช้แอททริบิวส์ CELLSPACING • แอททริบิวส์ CELLSPACING ใช้สำหรับกำหนดความห่างระหว่างเซล มีหน่วยเป็นพิกเซล โดยการแทรกแอททริบิวส์ CELLSPACING เข้าไปในคำสั่ง <TABLE> 412 443 Web page design and development

  29. การใช้แอททริบิวส์ CELLSPACING <TABLE border = 1 cellspacing= 10> 412 443 Web page design and development

  30. การใช้แอททริบิวส์ CELLPADDING • แอททริบิวส์ CELLPADDING ใช้สำหรับกำหนดความห่างระหว่างข้อมูลในเซลกับขอบของเซล มีหน่วยเป็นพิกเซล โดยการแทรกแอททริบิวส์ CELLPADDING เข้าไปในคำสั่ง <TABLE> 412 443 Web page design and development

  31. การใช้แอททริบิวส์ CELLPADDING <TABLE border = 1 cellpadding = 20> 412 443 Web page design and development

  32. การใช้แอททริบิวส์ ALIGN • แอททริบิวส์ ALIGN (Horizontal alignment) • การแทรกแอททริบิวส์ ALIGN ในคำสั่ง <TABLE>ใช้สำหรับจัดตำแหน่งของตารางกับข้อความที่อยู่ภายนอกตาราง โดยมีค่าเป็น left, center,right • การแทรกแอททริบิวส์ ALIGN ในคำสั่ง <TR>, <TH> หรือ <TD>ใช้สำหรับกำหนดตำแหน่งของข้อมูลในเซลตามแนวนอน โดยมีค่าเป็น left, center,right 412 443 Web page design and development

  33. การใช้แอททริบิวส์ ALIGN • แอททริบิวส์ ALIGN (Horizontal alignment) <TABLE ALIGN =LEFT border = 2> <TH ALIGN =RIGHT> <TD ALIGN =CENTER> <TD ALIGN =LEFT> 412 443 Web page design and development

  34. การใช้แอททริบิวส์ ALIGN • แอททริบิวส์ VALIGN (Vertical alignment) ใช้สำหรับกำหนดตำแหน่งของข้อมูลในเซลตามแนวตั้ง โดยการแทรกแอททริบิวส์ VALIGN ในคำสั่ง <TR>, <TH> หรือ <TD>โดยมีค่าเป็น top, middle, bottom 412 443 Web page design and development

  35. การใช้แอททริบิวส์ ALIGN • แอททริบิวส์ VALIGN (Vertical alignment) <TH VALIGN = middle> <TD VALIGN = top> <TD VALIGN = bottom> 412 443 Web page design and development

  36. การใช้คำสั่ง <CAPTION>....</CAPTION> • ใช้สำหรับใส่ชื่อ หรือคำอธิบายกำกับตาราง มีแอททริบิวส์ ALIGN ทำหน้าที่จัดตำแหน่งให้ โดยมีค่าดังนี้ • top ชื่ออยู่ด้านบนของตาราง • bottom ชื่ออยู่ด้านล่างของตาราง • left ชื่ออยู่ด้านซ้ายของตาราง (ใช้กับ IE) • right ชื่ออยู่ด้านขวาของตาราง (ใช้กับ IE) 412 443 Web page design and development

  37. การใช้คำสั่ง <CAPTION>....</CAPTION> <TABLE border = 1 > <caption align = bottom>รายชื่อนักศึกษา</caption> <TR> <TABLE border = 1 > <caption align = left>รายชื่อนักศึกษา</caption> <TR> 412 443 Web page design and development

  38. การใช้แอททริบิวส์ BGCOLOR & BACKGROUND • ใช้แอททริบิวส์ BGCOLOR เพื่อใส่สีฉากหลังให้ตาราง • ใช้แอททริบิวส์ BACKGROUND เพื่อใส่รูปฉากหลังให้ตาราง • ใช้กับ IE เท่านั้น 412 443 Web page design and development

  39. การใช้แอททริบิวส์ BGCOLOR & BACKGROUND <TD background = "../images/square.gif">019999991</TD> <TH bgcolor = blue>รหัสประจำตัว 412 443 Web page design and development

  40. การใช้แอททริบิวส์ BORDERCOLOR • ใช้แอททริบิวส์ BORDERCOLOR เพื่อใส่สีให้กับเส้นขอบของตาราง • ใช้กับ IE เท่านั้น <TH bordercolor = "#0099FF">ชื่อ-สกุล <TABLE border = 5 bordercolor = "#009900"> 412 443 Web page design and development

  41. การใส่รูปในตาราง • เป็นประโยชน์อย่างหนึ่งของการใช้ตาราง คือ การจัด Layout ซึ่งจะช่วยให้การจัดหน้าเว็บเพจไม่ว่าจะเป็นข้อความหรือรูปภาพถูกจัดอย่างเป็นระเบียบ หรือสามารถจัดได้ตามต้องการ 412 443 Web page design and development

  42. การใส่รูปในตาราง <TABLE border = 2 width = 80%> <TR> <TD><IMG SRC="../img/com.gif" WIDTH="140" HEIGHT="91" BORDER=0 ALT="คอมพิวเตอร์"></TD> <TD>คอมพิวเตอร์</TD> </TR> <TR> <TD><IMG SRC="../img/pladao.gif" WIDTH="120" HEIGHT="74" BORDER=0 ALT="ปลาดาว"></TD> <TD>ปลาดาว </TD> </TR> </TABLE> 412 443 Web page design and development

More Related