การสร้างตาราง

ตาราง (Table)

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

Tag	Description
<table>	ใช้สร้างตารางข้อมูล
<th>	สำหรับข้อความที่เป็นหัวคอลัมน์ จะเป็นตัวหนา
<tr>	สำหรับแถวของตาราง
<td>	สำหรับข้อมูลในแต่ละ cell
<caption>	คำอธิบายตาราง
<thead>	กำหนดส่วน head ของตาราง
<tbody>	กำหนดส่วน body ของตาราง
<tfoot>	กำหนดส่วน footer ของตาราง
<colgroup>	กำหนดคุณสมบัติให้ groups ของคอลัมน์ในตาราง ใช้ร่วมกับ <col> (Firefox ไม่สนับสนุน)
<col>	กำหนดคุณสมบัติให้คอลัมน์ใดๆ (Firefox ไม่สนับสนุน)

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

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

เราสามารถกำหนดคุณสมบัติให้ตาราง <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

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

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

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

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

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

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

รหัสพนักงาน	ชื่อ		เงินเดือน
	ไทย	eng
01	อำนาจ	Amnaj	30,000
02	สมชาย	Somchai	25,000
03	วีระ	Weera	20,000

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

รหัสพนักงาน	ชื่อ	Name	เงินเดือน
01	อำนาจ	Amnaj	30,000
02	สมชาย	Somchai	25,000
03	วีระ	Weera	20,000

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

รหัสพนักงาน	ชื่อ	Name	เงินเดือน
01	อำนาจ	Amnaj	30,000
02	สมชาย	Somchai	25,000
03	วีระ	Weera	20,000

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

รายชื่อนักเรียน และผลการเรียน

รหัสพนักงาน	ชื่อ	เงินเดือน
01	อำนาจ	30,000
02	สมชาย	25,000
03	วีระ	20,000
	รวม	75,000

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

รายชื่อนักเรียน และผลการเรียน

รหัสพนักงาน	ชื่อ	เงินเดือน
01	อำนาจ	30,000
02	สมชาย	25,000
03	วีระ	20,000
	รวม	75,000