0 การสร้างเว็บไซต์ 0
1 การสร้างเว็บไซต์ 1 หน่วยที่ 6 การแทรกตาราง ตาราง (Table) หมายถึง ช่องสี่เหลี่ยมที่เกิดจากเส้นขนานในแนวตั้งกับแนวนอนตัดกันเหมาะกับ ข้อมูลเลข รวมทั้งเป็นการจัดหมวดหมู่ของข้อมูลให้เป็นระเบียบง่ายต่อการเข้าใจ ซึ่งช่วยให้ผู้ชมแหล่งข้อมูลได้ อย่างรวดเร็วและครบถ้วน ตลอดจนสามารถเปรียบเทียบข้อมูลที่หาได้อย่างรวดเร็วการสร้างเว็บเพจส่วนใหญ่ จะนำตารางมาใช้ในการจัดองค์ประกอบหน้าเว็บเพจ เช่น การแบ่งส่วนหัว ส่วนเมนู และส่วนแสดงเนื้อหา ตารางประกอบด้วยแถวและคอลัมน์ โดยช่องข้อมูลที่อยู่แนวนอนเดียวกันเรียกว่า แถว และช่องข้อมูล ที่อยู่ตรงกันในแนวตั้งเรียกว่าคอลัมน์ ส่วนช่องแต่ละช่องกันเรียกว่าเซลล์ใช้บรรจุข้อมูลต่าง ๆ เช่น ข้อความ รูปภาพ ตัวอย่างที่ 6.1 ตารางที่ใช้บรรจุข้อมูล เช่น ข้อความ Socket CPU Socket LGA 775 Intel Celeron Intel Pentium Intel Core 2 Socket LGA 1156 Intel Core i3 Intel Core i5 Intel Core i7 Socket LGA 1366 Intel Core i7 (Quad Core and Hexa Core) Socket LGA 1155 Intel Core i3 Intel Core i5 Intel Core i7 6.1 การสร้างตารางในเว็บเพจ คำสั่งภาษา HTML ที่ใช้สำหรับสร้างตารางจะประกอบด้วยคำสั่งแท็กหลายคำสั่งประกอบกันให้แสดงผล ออกมาเป็นตารางมีรูปแบบดังนี้ <table> <tr> <td>ข้อมูลในตาราง</td> </tr> </table>
2 การสร้างเว็บไซต์ 2 <table.../table> เป็นคำสั่งสร้างตาราง ใช้กำหนดขอบเขตของตารางรวมถึงการกำหนดรายละเอียด ต่าง ๆ ที่มีการแสดงผลทั้งตาราง <t>...<1> เป็นคำสั่งที่ใช้กำหนดแถวของตาราง เป็นคำสั่งคู่ที่ต้องมีทั้งแท็กเปิดและแท็กปิดการใช้ แท็ก<tr>...</t> 1 ครั้ง หมายถึง 1 แถว <td.... /1d> เป็นคำสั่งที่ใช้กำหนดจำนวนคอลัมน์ของตารางและใช้แสดงข้อมูลของแต่ละเชลล์ของ ตารางเป็นคำสั่งคู่ที่ต้องมีทั้งแท็กเปิดและแท็กปิด การใช้แท็ก <td>....</td> 1 ครั้ง หมายถึง 1 คอลัมน์ หรือ 1 เซลล์ ตัวอย่างที่ 6.2 <!DOCTYPE html> <html> <head> <title>การสร้างตารางในเว็บเพจ</title> <meta charset="UTF=8"> </head> <body> <table> <tr> <td>…………………………</td> <td>…………………………</td> </tr> <tr> <td>…………………………</td> <td>…………………………</td> </tr> </table> </body> </html>
3 การสร้างเว็บไซต์ 3 รูปที่ 6.2 ผลการใส่ข้อความในตาราง การใส่ข้อความในตารางสามารถทำได้ด้วยการพิมพ์ข้อความในแท็ก <td>…</td> ที่ต้องการมี รูปแบบดังนี้ <td>ข้อความในตาราง</td> ตัวอย่างที่ 6.3 <!DOCTYPE html> <html> <head> <title>การใส่ข้อความในตาราง</title> <meta charset=”UTF-8”> </head> <body> <table> <tr> <td>ข้อความในแถว1 คอลัมน์1</td> <td>ข้อความในแถว2 คอลัมน์2</td> </tr> <tr> <td>ข้อความในแถว1 คอลัมน์1</td> <td>ข้อความในแถว2 คอลัมน์2</td> </tr> </table> </body> </head>
4 การสร้างเว็บไซต์ 4 6.3 การจัดตำแหน่งข้อความในตาราง กำหนดตำแหน่งข้อความภายในเซลล์ของตารางซึ่งปกติการแสดงข้อความในเซลล์ของตชิดซ้ายของ เซลล์เสมอ และถ้าต้องการกำหนดตำแหน่งข้อความของภายในเซลล์ของตาราง สามารถกำหนดได้ 2 รูปแบบ ดังนี้ 6.3.1 การกำหนดตำแหน่งข้อความในแนวนอน สามารถทำได้ด้วยการกำหนดแอททริบิวท์ align โดย กำหนดที่แท็ก <tr> หรือแท็ก <td> มีรูปแบบคำสั่งดังนี้ <table> <tr align=”ตำแหน่งการแสดงผลข้อความ”> <td align=”ตำแหน่งการแสดงผลข้อความ”></td> </tr> </table> แอททริบิวท์ align ใช้สำกำหนดตำแหน่งข้อความภายในเซลล์ของตารางซึ่งจะกำหนดหรือไม่กำหนดก็ ได้มีรายละเอียดดังนี้ left กำหนดให้ข้อความชิดช้ายของเชลล์ตาราง right กำหนดให้ข้อความชิดขวาของเซลล์ตาราง center กำหนดให้ข้อความกึ่งกลางของเชลล์ตาราง justify กำหนดให้ข้อความเต็มช่องเซลล์ตาราง
5 การสร้างเว็บไซต์ 5 ตัวอย่างที่ 6.4 <!DOCTYPE html> <html> <head> <title>การจัดตำแหน่งข้อความในตาราง </title> <meta charset="UTF-8"> </head> <body> <table border="1"> <tr align="center"> <td>ข้อความแถว1 คอลัมน์1</td> <td>ข้อความแถว1 คอลัมน์2</td> <td>ข้อความแถว1 คอลัมน์3</td> </tr> <tr> <td align ='left">ข้อความแถว2 คอลัมน์1</td> <td align='left">ข้อความแถว2 คอลัมน์2</td> <td align="left">ข้อความแถว2 คอลัมน์3</td> </tr> <tr align="right"> <td>ข้อความแถว3 คอลัมน์1</td> <td>ข้อความแถว3 คอลัมน์2</td> <d>ข้อความแถว3 คอลัมน์3</td> </tr> </table> </body> <html>