บทเรียนออนไลน์ คุณครูอิทธิวิธิ สินศิริ

สาระสำคัญ

การสร้างตารางเหมาะสำหรับในกรณีที่มีข้อมูลจำนวนมากโดยที่ข้อมูลแต่ละส่วนจะมีความสัมพันธ์ซึ่งกันและกัน
ในลักษณะของแนวแถว(Row) และแนวคอลัมน์ (Column) การแสดงข้อมูลในรูปของตารางจะช่วยให้เข้าใจได้ง่ายขึ้น
อีกทั้งตารางยังนำมาใช้ในการจัดหน้าเว็บเพจเป็นระเบียบขึ้นด้วย

ผลการเรียนรู้

      1. บอกความหมายของตารางและประโยชน์จากการนำตารางมาใช้ได้
      2. เรียนรู้ถึงคำสั่งในการสร้างตารางและอธิบายรูปแบบของการใช้คำสั่งได้
      3. สามารถสร้างตารางในเว็บเพจได้
      4. เรียนรู้ถึงคำสั่งในการจัดรูปแบบตารางและอธิบายรูปแบบของการใช้คำสั่งได้
      5. สามารถใส่รูปภาพในตารางได้
      6. สามารถจัดรูปแบบของตารางให้ตรงตามที่ต้องการได้

1. ความหมายของตาราง

ตาราง (Table) เป็นวิธีหนึ่งในการนำเสนอข้อมูลที่ทำให้ผู้อ่านสามารถอ่านและเข้าใจได้ง่ายและดูเป็นระเบียบ เรียบร้อยกว่า การนำเสนอแบบ ร่ายยาวทั่วไปใน HTML นี้จะแท็กคำสั่ง ที่ช่วยให้เราสามารถสร้างตารางได้อย่างง่ายดาย ไม่ว่าเป็นตารางแบบง่ายๆ หรือตารางในแบบซับซ้อน

โครงสร้างของตาราง

การสร้างตารางนี้จะเหมาะสำหรับในกรณีที่มีข้อมูลจำนวนมากโดยที่ข้อมูลแต่ละส่วนจะมีความสัมพันธ์ซึ่งกันและ กันในลักษณะของแนวแถว (Row) และแนวคอลัมน์ (column) โดยส่วนของตัวตารางจะมีลักษณะเป็นกรอบสี่เหลี่ยม โดยแบ่งออกเป็น 2 ส่วน คือ ส่วนเก็บข้อมูลในแนวนอนเรียกว่า แถว (Row) และส่วนเก็บข้อมูลในแนวตั้ง
เรียกว่า คอลัมน์ (column) โดยแต่ละช่องของตารางจะเรียกว่า เซลล์ (Cell)

2. คำสั่งในการสร้างตาราง

สำหรับการสร้างตารางนี้ จะมีส่วนประกอบของแท็กคำสั่ง ดังนี้

<table>.................</table>                     เป็นคำสั่งในการสร้างตาราง
<caption>…………..</caption>                 เป็นการกำหนดข้อความกำกับตาราง
<tr>……………………</tr>                         เป็นการกำหนดแถวของตาราง 1 แถว
<th>…………………..</th>                         เป็นการกำหนดส่วนหัวหรือชื่อหัวเรื่องให้กับแถว
                                                                แรกของตาราง
<td>…………………..</td>                         เป็นการกำหนดส่วนของข้อมูลในแต่ละแถว

2.1 โครงสร้างของการใช้คำสั่งสร้างตาราง

      <table>
                   <caption> ข้อความกำกับตาราง … </caption>
                   <tr>
                   <th> ข้อความส่วนหัว …             </th>
                   ………………………………………….........................
                   ………………………………………….........................
                   </tr>
                   <tr>
                   <td> ข้อความส่วนของข้อมูล …</td>
                   …………………………………………
                   ………………………………………..
                   </tr>
                   <tr>
                   <td> ข้อความส่วนของข้อมูล …</td>
                   ………………………………………………
                   ………………………………………………
                    </tr>
                   ……………………………………………..
       </table>

ตัวอย่างการสร้างตารางแบบง่ายๆ

<!TDCTYP html>
<html>
<head>
         <title>Table Tag</title>
</head>
<body>
<table>
     <tr>
        <th> ชื่อหนังสือ</th>
        <th> ผู้เขียน</th>
        <th> ราคาปก</th>
    </tr>
    <tr>
        <td> คณิตศาสตร์คอมพิวเตอร์</td>
        <td> สิทธิชัย ประสานวงค์</td>
        <td>95</td>
    </tr>
    <tr>
        <td> โปรแกรมตารางคำนวณ</td>
        <td> สิทธิชัย ประสานวงค์</td>
        <td>95</td>
    </tr>
    <tr>
        <td> โปรแกรมกราฟิก</td>
        <td>สิทธิชัย   ประสานวงค์</td>
        <td>140</td>
    </tr>
</table>
</body>
</html>

ผลที่ได้บนเบราว์เซอร์ให้สังเกตว่าข้อมูลตารางที่ได้จะยังไม่มีเส้นตาราง