7.การสร้างตาราง

..:: การสร้างตาราง

ตาราง (Table)

tag ที่ใช้สำหรับทำตารางมีอยู่หลาย tag

Example tag ที่ใช้บ่อยๆ ได้แก่ <table>, <tr>, <td>

<table> <tr> <td>รหัสพนักงาน</td> <td>ชื่อ</t> <td>เงินเดือน</td> </tr> <tr> <td>01</td> <td>อำนาจ</td> <td>30,000</td> </tr> <tr> <td>02</td> <td>สมชาย</td> <td>25,000</td> </tr> <tr> <td>03</td> <td>วีระ</td> <td>20,000</td> </tr> </table>

Output

เราสามารถกำหนดคุณสมบัติให้ตาราง <table> ผ่าน attribute ต่างๆ ได้แก่

- align="left" | "center" | "right" จัดตำแหน่งของตาราง

- border="number" กำหนดความหนาของเส้นขอบตาราง

- bordercolor="สี" สีของเส้นขอบ

- width="number" กำหนดความกว้างให้ตาราง

- bgcolor="สี" กำหนดสี background

- cellspacing="number" กำหนดช่องว่างภายใน cell

- cellpadding="number" กำหนดระยะห่างระหว่าง cell

attribute กำหนดคุณสมบัติให้แถวของตาราง <tr> ได้แก่

- align="left" | "center" | "right" จัดตำแหน่งของข้อความใน cell แนวนอนทั้งแถว

- valign= "top" | "middle" | "bottom" | "baseline" จัดตำแหน่งของข้อความใน cell แนวตั้งทั้งแถว

- bgcolor ="สี" กำหนดสี background ให้ทั้งแถว

attribute กำหนดคุณสมบัติให้ cell ข้อมูล <td> ได้แก่

- align="left" | "center" | "right" จัดตำแหน่งของข้อความใน cell แนวนอน

- valign= "top" | "middle" | "bottom" | "baseline" จัดตำแหน่งของข้อความใน cell แนวตั้ง

- width="ความกว้างของคอลัมน์"

- height="ความสูงของแถว"

- colspan="number" จำนวนคอลัมน์ที่จะให้รวมเป็นคอลัมน์เดียวกัน

- rowspan="number" จำนวนแถวที่จะให้รวมแถวเป็นแถวเีดียวกัน

- bgcolor="สี" กำหนดสี background ให้ cell

Example attribute :align, border, width, bgcolor

<table align="center" border="1" width="80%" bgcolor="#FFFF99"> <tr> <td>รหัสพนักงาน</td> <td>ชื่อ</td> <td align="right">เงินเดือน</td> </tr> <tr> <td>01</td> <td>อำนาจ</td> <td align="right">30,000</td> </tr> <tr> <td>02</td> <td>สมชาย</td> <td align="right">25,000</td> </tr> <tr> <td>03</td> <td>วีระ</td> <td align="right">20,000</td> </tr> </table>

Output

Example attribute : cellspacing, cellpadding

- cellspacing กำหนดระยะห่างระหว่าง cell

- cellpadding กำหนดช่องว่างภายใน cell

<table border="1" width="80%" cellspacing="10"> <tr> <td>รหัสพนักงาน</td> <td>ชื่อ</td> <td align="right">เงินเดือน</td> </tr> <tr> <td>01</td> <td>อำนาจ</td> <td align="right">30,000</td> </tr> <tr> <td>02</td> <td>สมชาย</td> <td align="right">25,000</td> </tr> <tr> <td>03</td> <td>วีระ</td> <td align="right">20,000</td> </tr> </table> <table border="1" width="80%" cellpadding="10"> <tr> <td>รหัสพนักงาน</td> <td>ชื่อ</td> <td align="right">เงินเดือน</td> </tr> <tr> <td>01</td> <td>อำนาจ</td> <td align="right">30,000</td> </tr> <tr> <td>02</td> <td>สมชาย</td> <td align="right">25,000</td> </tr> <tr> <td>03</td> <td>วีระ</td> <td align="right">20,000</td> </tr> </table>

Output

cellspacing = ระยะห่างระหว่าง cell

cellpadding = ช่องว่างภายใน cell

Example attribute : colspan, rowspan

- colspan รวมหลายๆ คอลัมน์เป็นคอลัมน์เดียว

- rowspan รวมหลายๆ แถวเป็นแถวเีดียว

<table align="center" border="1" width="80%" bgcolor="#FFFF99"> <tr> <td rowspan="2">รหัสพนักงาน</td> <td colspan="2">ชื่อ</td> <td rowspan="2" align="right">เงินเดือน</td> </tr> <tr> <td>ไทย</td> <td>eng</td> </tr> <tr> <td>01</td> <td>อำนาจ</td> <td>Amnaj</td> <td align="right">30,000</td> </tr> <tr> <td>02</td> <td>สมชาย</td> <td>Somchai</td> <td align="right">25,000</td> </tr> <tr> <td>03</td> <td>วีระ</td> <td>Weera</td> <td align="right">20,000</td> </tr> </table>

Output

Example attribute : col

tag <col> ใช้กำหนดค่า attribute ได้ทั้งคอลัมน์ แทนการกำหนดซ้ำๆ ให้แต่ละ cell ตัวอย่างนี้จะเลิกใส่ attirbute align="right" ซ้ำๆ ที่ tag <td> (เงินเดือน)

<table border="1" width="80%"> <col align="center"></col> <col align="left"></col> <col align="left"></col> <col align="right"></col> <tr> <td>รหัสพนักงาน</td> <td>ชื่อ</td> <td>Name</td> <td>เงินเดือน</td> </tr> <tr> <td>01</td> <td>อำนาจ</td> <td>Amnaj</td> <td>30,000</td> </tr> <tr> <td>02</td> <td>สมชาย</td> <td>Somchai</td> <td>25,000</td> </tr> <tr> <td>03</td> <td>วีระ</td> <td>Weera</td> <td>20,000</td> </tr> </table>

Output

Example attribute : colgroup

tag <colgroup> ใช้เพื่อจัดหลายๆ คอลัมน์เป็น group เดียวกันก่อน แล้วค่อยกำหนดค่า attribute ให้กับ group ของคอลัมน์ แทนการกำหนดซ้ำๆ ให้แต่ละ คอลัมน์ หรือแต่ละ cell

ตัวอย่างนี้จัด group รวมคอลัมน์แรก และคอลัมน์ที่สองก่อน แล้วกำหนด attribute รวดเดียวเลย ว่าให้จัดชิดซ้าย

<table border="1" width="80%"> <colgroup align="center"></colgroup> <colgroup span="2" align="left"></colgroup> <colgroup align="right"></colgroup> <tr> <td>รหัสพนักงาน</td> <td>ชื่อ</td> <td>Name</td> <td>เงินเดือน</td> </tr> <tr> <td>01</td> <td>อำนาจ</td> <td>Amnaj</td> <td>30,000</td> </tr> <tr> <td>02</td> <td>สมชาย</td> <td>Somchai</td> <td>25,000</td> </tr> <tr> <td>03</td> <td>วีระ</td> <td>Weera</td> <td>20,000</td> </tr> </table>

Output

Example ตัวอย่างนี้ขอรวมมิตรทุก tag เลยละกันค่ะ

<table border="1" width="80%"> <caption>รายชื่อนักเรียน และผลการเรียน</caption> <col align="center"></col> <col align="left"></col> <col align="right"></col> <thead> <tr> <th width="20%" bgcolor="#FFFFCC">รหัสพนักงาน</th> <th bgcolor="#FFCCCC">ชื่อ</th> <th width="30%" bgcolor="#99CCFF">เงินเดือน</th> </tr> </thead> <tbody> <tr> <td>01</td> <td>อำนาจ</td> <td>30,000</td> </tr> <tr> <td>02</td> <td>สมชาย</td> <td>25,000</td> </tr> <tr> <td>03</td> <td>วีระ</td> <td >20,000</td> </tr> </tbody> <tfoot> <tr bgcolor="#EAF4FF"> <td>&nbsp;</td> <td align="right">รวม</td> <td>75,000</td> </tr> </tfoot> </table>

Output

Example ตัวอย่างนี้จะทำเส้นตารางโดยใช้ cellspacing แทน border และสีของเส้นตารางคือสีจาก bgcolor

<table width="80%" cellspacing="1" bgcolor="#CCCCCC"> <caption>รายชื่อนักเรียน และผลการเรียน</caption> <col align="center"></col> <col align="left"></col> <col align="right"></col> <thead> <tr> <th width="20%" bgcolor="#FFFFCC">รหัสพนักงาน</th> <th bgcolor="#FFCCCC">ชื่อ</th> <th width="30%" bgcolor="#99CCFF">เงินเดือน</th> </tr> </thead> <tbody> <tr bgcolor="#FFFFFF"> <td>01</td> <td>อำนาจ</td> <td>30,000</td> </tr> <tr bgcolor="#FFFFFF"> <td>02</td> <td>สมชาย</td> <td>25,000</td> </tr> <tr bgcolor="#FFFFFF"> <td>03</td> <td>วีระ</td> <td >20,000</td> </tr> </tbody> <tfoot> <tr bgcolor="#EAF4FF"> <td>&nbsp;</td> <td align="right">รวม</td> <td>75,000</td> </tr> </tfoot> </table>

Output