มาบทนี้ผมจะอธิบายเกี่ยวกับการสร้างตาราง กันนะครับ Table ในการเขียนเว็บด้วยภาษา HTML มีความสำคัญมากครับ เนื่องจาก การสร้าง Table ที่ดี จะทำให้เราจัดองค์ประกอบของเว็บไซต์ได้อย่างสวยงาม เป็นระบบ เป็นระเบียบ ผู้ที่เข้ามาเยี่ยมชมเว็บเรา จะรู้สึกประทับใจ และชวนให้ผู้เข้าชม อ่านเว็บไซต์เราอย่างต่อเนื่องครับ แต่ไม่ใช่ว่า Table คือคำตอบในการเขียนเว็บทุกอย่างครับ แต่มันเป็นสิ่งสำคัญเลยทีเดียวสำหรับการพัฒนาเว็บไซต์ครับ เราลองมาดูกันเลยครับ
1.ลองสร้างตารางดู
ตารางจะแบ่งออกเป็น 2 ส่วน คือ
1.แถว คือจำนวนตารางในแนวนอน
2.หลัก คือจำนวนตารางในแนวตั้ง
รูปแบบของคำสั่งตาราง
<table>
<tr>
<td></td>
</tr>
</table>
2.เส้นขอบตาราง
เมื่อพูดถึงตารางก็ต้องพูดถึงเส้นขอบของตาราง ซึ่งในบทนี้จะพูดถึงการกำหนดเส้นขอบของตาราง โดยขอบของตารางเราจะใช้ Attibute คำสั่ง border ในการควบคุม
รูปแบบของคำสั่ง border
<table border="ขนาดเส้นของขอบ"> <tr><td></td></tr> </table>
3.หัวข้อตาราง
ปรกตินั้นถ้าเราจะเขียนส่วนที่เป็นหัวข้อเราจะใช้ h tag หรือ <b> เพื่อเน้นส่วนที่เป็นหัวข้อ แต่ในส่วนของตารางมีคำสั่งให้เราใช้กันอยู่แล้ว นั่นคือ th
รูปแบบของคำสั่ง border
<table> <tr><th></th></tr> </table>
4.ใส่ช่องว่างให้ตาราง
ถ้าเรามีตาราง 6 ช่อง แต่มีข้อมูลอยู่เพียง 5 ชิ้น เมื่อเราเขียนข้อมูลใส่ตารางจะพบว่าตารางแสดงผลมีเส้นขาดหายไปดังนั้นเราจึงต้องใส่ค่าว่างไปให้ตารางเพื่อแสดงผลเส้นที่ขาดหายไป ด้วยการใช้
การใช้ช่องว่าง
<table> <tr><td> </td></tr> </table>
5.การผสานตาราง
ถ้าข้อมูลเขาเรา มี 1 หัวข้อใหญ่แต่มีข้อมูล ย่อยๆ 2 ชนิด ทำให้เราต้องทำการผสานตารางตามตัวอย่าง โดยมีหลักดังนี้
1.ผสานในหลักให้ใช้คำสั่ง colspan = "จำนวนช่องที่ต้องการผสาน"
2.ผสานในแถวให้ใช้คำสั่ง rowspan = "จำนวนช่องที่ต้องการผสาน"
6.ตารางซ้อนตาราง
การทำตารางซ้อนตาราง เป็นการจัดหน้าเว็บที่ใช้กันบ่อยมาก และเป็นการใช้งานที่มีประสิทธิภาพ ทำให้จัดเรียงข้อมูลได้ดีขึ้น
7.กำหนดระยะห่างของช่อง
ในตัวอย่างจะเป็นการแสดงการใช้งาน cellpadding และ cellspacing โดยทั้ง 2 อย่างมีการใช้งานดังนี้
1. cellpadding ใช้กำหนดระยะห่างระหว่างข้อมูล กับเส้นขอบตาราง
2. cellspacing ใช้กำหนดระยะห่างระหว่างเส้นตารางภายนอก และภายใน ให้ลองสังเกตุจากตัวอย่างดู จะเห็นว่าแตกต่างจากการใช้ border
8.ใส่พื้นหลังให้ตาราง
ในบทนี้จะใส่พื้นหลังให้กับตาราง และช่องของตาราง โดยพื้นหลังมี 2 แบบคือ
1.แบบที่เป็นสี ใช้คำสั่ง bgcolor
2.แบบที่เป็นรูปภาพ ใช้คำสั่ง background
9.ขนาดตาราง
ขนาดของตารางกำหนดได้โดย Attibute คำสั่ง width และความสูงใช้คำสั่ง height ซึ่งเราจะกำหนดหน่วยเป็น % หรือ px(pixel) แล้วแต่จุดประสงค์
1.แบบเปอร์เซนต์ (%) ขนาดจะเปลี่ยนตามขนาดหน้าต่างของ web browser ที่เปลี่ยนแปลง
2.แบบ pixel (px) ขนาดจะเท่าที่เรากำหนดตลอดไม่มีการเปลี่ยนแปลง ถ้าเราไม่กำหนดหน่วยเป็น % ตัวของ html จะกำหนดให้เป็น px เสมอ
10.การจัดเรียงตัวอักษรในช่องของตาราง
ในบทนี้จะเป็นเรื่องของ การจัดเรียงตัวอักษร หรือ รูปภาพ ในช่องของตารางให้ชิดซ้าย หรือชิดขวา หรือจัดเข้ากึ่งกลาง ซึ่งจะทำให้ตารางข้อมูลดูได้ง่ายขึ้น ซึ่งเราจะใช้ Attibute คำสั่ง Align
