คู่มือท่องเที่ยว สำหรับคนรักการท่องเที่ยว

Chapter 12

ตาราง (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
« Chapter 11
Chapter 13 »