บทที่ 5 การสร้างตาราง
การสร้างตาราง
ในการนำเสนอข้อมูลต่าง ๆ นั้น จะเห็นว่าการนำเสนอข้อมูลด้วยตาราง จะทำให้เกิดความเข้าใจได้ง่ายขึ้น สามารถเปรียบเทียบความแตกต่าง ๆ ของข้อมูลได้อย่างชัดเจน นอกจากประโยชน์ดังกล่าวในการสร้างเว็บเพจนั้น ตารางยังสามารถนำมาช่วยในการจัดรูปแบบของจอภาพบนเว็บเพจได้อีกด้วย เพื่อแบ่งแยกหน้าเว็บเพจออกเป็น ส่วน ๆ เกิดความเป็นระเบียบและความสวยงามมากขึ้น ก่อนอื่นให้นักเรียนศึกษา รูปแบบตารางโดยทั่วไปก่อนดังนี้
ตารางประกอบไปด้วย 6 ช่อง หรืออาจเรียกว่า 6 เซลล์ (cell) มี 3 แถว (row) 2 คอลัมน์ (column)
ตารางประกอบไปด้วย 6 ช่อง หรืออาจเรียกว่า 6 เซลล์ (cell) มี 3 แถว (row) 2 คอลัมน์ (column)
ขั้นตอนการสร้างตารางมีดังนี้
1.คลิกที่ปุ่มรูปตารางดังรูป
1.คลิกที่ปุ่มรูปตารางดังรูป
2.จะมีหน้าต่างขึ้นมาดังรูป
รายละเอียดมีดังนี้
1.rows จำนวนแถวของตาราง
2.columns จำนวนหลักของตาราง
3.Table width ความกว้างของตาราง จะใส่เป็น Pixel เพื่อกำหนดความกว้างให้คงที่ หรือ Percent(%) เพื่อกำหนดความกว้างตามขนาดหน้าจอ ก็ได้
4.Border thickness ความหนาของเส้นขอบตาราง ถ้าเราไม่ต้องการให้มีเส้นขอบให้ใส่เป็น 0
5.Cell padding ระยะห่างระหว่างขอบตาราง กับเนื้อหาภายในตาราง
6.Cell spacing ระยะห่างระหว่างช่อง
7.Header จัดหัวข้อของตาราง <th> ข้อความที่อยู่ในช่องที่เป็นหัวข้อจะเป็นตัวหนา จะมี 3 แบบ คือ
7.1 left ให้หลักที่อยู่ทางซ้ายมือเป็นหัวข้อตาราง 7.2 top แถวบนสุดเป็นหัวข้อ
7.3 Both แถวบนสุด และหลักซ้ายสุดเป็นหัวข้อ
8.Caption ใส่ชื่อตาราง
9.Align caption จัดตำแหน่งของชื่อตาราง
10.Summary บรรยายตาราง
รายละเอียดที่เราจะเป็นต้องกรอกจะอยู่ในหัวข้อ Table size หรือรายการ 1-6 เท่านั้นนอกจากนั้นไม่จำเป็นต้องกรอกก็ได้
3.เมื่อเลือกที่ตารางจะเห็นว่า Property inspector เป็นดังรูปด้านล่าง
1.rows จำนวนแถวของตาราง
2.columns จำนวนหลักของตาราง
3.Table width ความกว้างของตาราง จะใส่เป็น Pixel เพื่อกำหนดความกว้างให้คงที่ หรือ Percent(%) เพื่อกำหนดความกว้างตามขนาดหน้าจอ ก็ได้
4.Border thickness ความหนาของเส้นขอบตาราง ถ้าเราไม่ต้องการให้มีเส้นขอบให้ใส่เป็น 0
5.Cell padding ระยะห่างระหว่างขอบตาราง กับเนื้อหาภายในตาราง
6.Cell spacing ระยะห่างระหว่างช่อง
7.Header จัดหัวข้อของตาราง <th> ข้อความที่อยู่ในช่องที่เป็นหัวข้อจะเป็นตัวหนา จะมี 3 แบบ คือ
7.1 left ให้หลักที่อยู่ทางซ้ายมือเป็นหัวข้อตาราง 7.2 top แถวบนสุดเป็นหัวข้อ
7.3 Both แถวบนสุด และหลักซ้ายสุดเป็นหัวข้อ
8.Caption ใส่ชื่อตาราง
9.Align caption จัดตำแหน่งของชื่อตาราง
10.Summary บรรยายตาราง
รายละเอียดที่เราจะเป็นต้องกรอกจะอยู่ในหัวข้อ Table size หรือรายการ 1-6 เท่านั้นนอกจากนั้นไม่จำเป็นต้องกรอกก็ได้
3.เมื่อเลือกที่ตารางจะเห็นว่า Property inspector เป็นดังรูปด้านล่าง
รายละเอียดมีดังนี้
1.Table id กำหนดชื่ออ้างอิงให้กับตาราง
2.rows กำหนดจำนวนแถวของตาราง ถ้าคุณเปลี่ยนจำนวนแถวให้น้อยลง โปรแกรมจะลบจากแถวล่างสุด
3.cols กำหนดจำนวนหลักของตาราง ถ้าคุณเปลี่ยนจำนวนหลักให้น้อยลง โปรแกรมจะลบจากหลักขวาสุด
4.W (Width) กำหนดความกว้างของตาราง
5.H (Height) กำหนดความสูงของตาราง ไม่แนะนำให้กรอกค่านี้ เพราะคำสั่งนี้ยังไม่สนับสนุน XHTML 1.0.
6.CellPad ระยะห่างระหว่างขอบตาราง กับเนื้อหาภายในตาราง
7.CellSpaceระยะห่างระหว่างช่อง
8.Align จัดตำแหน่งของตาราง
9.Borderกำหนดความหนาของขอบ
10.Class กำหนด class ใน css
11.Clear and Convert ปุ่มทางล่างซ้ายจะมีอยู่ 2 ประเภท คือ
1.Table id กำหนดชื่ออ้างอิงให้กับตาราง
2.rows กำหนดจำนวนแถวของตาราง ถ้าคุณเปลี่ยนจำนวนแถวให้น้อยลง โปรแกรมจะลบจากแถวล่างสุด
3.cols กำหนดจำนวนหลักของตาราง ถ้าคุณเปลี่ยนจำนวนหลักให้น้อยลง โปรแกรมจะลบจากหลักขวาสุด
4.W (Width) กำหนดความกว้างของตาราง
5.H (Height) กำหนดความสูงของตาราง ไม่แนะนำให้กรอกค่านี้ เพราะคำสั่งนี้ยังไม่สนับสนุน XHTML 1.0.
6.CellPad ระยะห่างระหว่างขอบตาราง กับเนื้อหาภายในตาราง
7.CellSpaceระยะห่างระหว่างช่อง
8.Align จัดตำแหน่งของตาราง
9.Borderกำหนดความหนาของขอบ
10.Class กำหนด class ใน css
11.Clear and Convert ปุ่มทางล่างซ้ายจะมีอยู่ 2 ประเภท คือ
12.Bg Color กำหนดสีพื้นหลังของตาราง คลิกที่ช่องสีเหลี่ยมด้านหน้าเพื่อเลือกสี
13.Bg Image กำหนดภาพพื้นหลังของตาราง
14.Brdr Color กำหนดสีขอบ คลิกที่ช่องสีเหลี่ยมด้านหน้าเพื่อเลือกสี
13.Bg Image กำหนดภาพพื้นหลังของตาราง
14.Brdr Color กำหนดสีขอบ คลิกที่ช่องสีเหลี่ยมด้านหน้าเพื่อเลือกสี
| คำสั่งหรือแท็กที่ใช้ในการสร้างตารางคือ <table>...</table> |
| ในการสร้างตารางนั้น ในเบื้องต้นต้องใช้คำสั่งหรือแท็กดังต่อไปนี้ <table>...</table> เป็นการบอกจุดเิ่ริ่มต้นและจุดสิ้นสุดในการสร้างตาราง <tr>....</tr> เป็นการบอกจำนวนแถว (row) <td>...</td> เป็นการบอกจำนวนคอลัมน์ (colunm) |
ตัวอย่างการสร้างตารางดังภาพด้านบน
|
| <html> <head> <title>การสร้างตาราง</title> </head> <body> การสร้างตารางในภาษา HTML <br> <hr> <table> <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> |
| การกำหนดสีพื้นในช่องตาราง |
| สามารถกำหนดสีพื้นใ้ห้กับช่องตาราง โดยใช้แอททริบิวต์ bgcolorได้หลายรูปแบบดัีงนี้ รูปแบบการใช้งาน bgcolor="ค่าสี" 1.กำหนดสีทั้งตาราง ให้นำแอททริบิวต์ bgcolor ใส่ลงในแท็ก <table> ดังตัวอย่าง <table border="1" cellspacing="5" width="300" height="100" bgcolor="blue"> <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> <tr><td> แถว 3 คอลัมน์ 1 </td><td> แถว 3 คอลัมน์ 2 </td></tr> </table> 2.กำหนดสีทั้งแถว แถวใดแถวหนึ่งในตาราง ให้นำแอททริบิวต์ bgcolor ใส่ลงในแท็ก <tr> ดังตัวอย่าง <table border="1" cellspacing="5" width="300" height="100"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption> <tr bgcolor="blue"><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> 3.กำหนดสีในช่องเซลล์ใดเซลล์หนึ่งในตาราง ให้นำแอททริบิวต์ bgcolor ใส่ลงในแท็ก <td> เซลล์นั้น ดังตัวอย่าง <table border="1" cellspacing="5" width="300" height="100"> <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> <tr><td> แถว 3 คอลัมน์ 1 </td><td bgcolor="blue"> แถว 3 คอลัมน์ 2 </td></tr> </table> 4.กำหนดสีให้กับทั้งตาราง แถว และเซลล์ ผสมกันได้โดยให้นำ แอททริบิวต์ bgcolor ใส่ลงในแท็ก <table> , <tr> และ <td> เซลล์นั้น ดังตัวอย่าง <table border="1" cellspacing="5" width="300" height="100" bgcolor="pink"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption> <tr bgcolor="blue"><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 bgcolor="#00ffcc"> แถว 3 คอลัมน์ 2 </td></tr> </table> |
ตัวอย่างการกำหนดสีพื้นในตาราง
|
| <html> <head> <title>การสร้างตาราง</title> </head> <body> การกำหนดความกว้างและความสูงของตาราง <br> <hr> <table border="1" cellspacing="5" width="300" height="100" bgcolor="pink"> <caption align="bottom">ตารางที่ 1 การทดลองสร้างตาราง </caption> <tr bgcolor="blue"><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 bgcolor="#00ffcc"> แถว 3 คอลัมน์ 2 </td></tr> </table> </body> </html>  |
ไม่มีความคิดเห็น:
แสดงความคิดเห็น