Html คือ ภาษาคอมพิวเตอร์ที่ใช้สร้างหน้าเว็บ webpage ในรูปแบบของ ไฟล์ HTML (คือไฟล์ที่มีนามสกุลเป็น .htm หรือ .html) ซึ่งมีเว็บเบราว์เซอร์ (Web browser) เป็นโปรแกรมที่ใช้แปลงไฟล์ HTML เพื่อ แสดงผลในรูปของหน้าเว็บ โดยภาษาคอมพิวเตอร์ HTML จะมี tag ที่ชื่อ ว่า table ไว้ใชำสำหรับสร้างตารางบนเว็บไซต์ของเราแน่นอนว่าไม่ได้สร้างขึ้นมาง่ายๆ แน่ถ้าหากเป็นมือใหม่

 

Table Tags ในภาษา Html นี้ถือเป็น Tags ที่ Advance Tags นึงเลยเพราะกว่าจะได้ตารางที่เหมือนเราทำ ใน word นั้นยากมากเลยก็ว่าได้ตารางที่ต้องการสำหรับคนที่เริ่มเขียนโค้ดใหม่ๆ

 

tag ที่ใช้บ่อย

<table></table> เป็นการกำหนดเพื้อใช้ตารางใน Html

<tr></tr> Table Row : เป็นการกำหนดแถวให้กับ table

<th></th> Table Header : เป็นการกำหนด cell ใน columns ที่เป็นหัวข้อแต่ละช่องของตาราง

<td></td> Table Data : เป็นการกำหนด cell ใน columns ที่เป็นหัวข้อแต่ละช่องของตาราง

 

ทำความเข้าใจเกี่ยวกับ Rows และ columns

Rows : จะเห็นตามภาพข้างบนการใช้ Rows ก็คือแถวหน้ากระดานนั้นเองคือจะจัดออกเป็นแนวนอน เวลาเราต้องการ 2 แถว เราก็ต้องสั่งแถวหน้ากระดานเรียง 2 ก็เอาไปใช้งานได้เลย

Columns : จากภาพจะเห็นได้ว่า Columns ก็คือแถวตอนที่เราเข้าใจกันนั้นแหละ เราต้องการใช้มันก็จะต้องเรียกแถวตอน 2 แถว

Cell : ตัวนี้ก็คือลูกเสื่อแต่ละคนที่ยืนอยู่ในแถว หรือ ถ้าพูดเป็นตารางก็จะเป็นแต่ละช่องนั้นเอง

 

การผสานเซลล์บน html

การผสานเซลล์ นั้นสามารถทำได้ สอง แนวก็คือ แนวตั้ง (col span) และ แนวนอน (row span) การเรียกใช้งานนั้นเราจะเรียกใช้ผ่าน tags <th> or <td>

ตัวอย่างโค้ด

<table border="1"> 
  <tr> 
    <th>Item / Desc.</th> 
    <th>Qty.</th> 
    <th>@</th> 
    <th>Price</th> 
  </tr> 
  <tr> 
    <td>Paperclips (Box)</td> 
    <td>100</td> <td>1.15</td> 
    <td>115.00</td> 
  </tr> 
  <tr> 
    <td>Paper (Case)</td> 
    <td>10</td> 
    <td>45.99</td> 
    <td rowspan="2">459.90</td> 
  </tr> 
  <tr> 
    <td>Wastepaper Baskets</td> 
    <td>2</td> 
    <td>17.99</td> 
  </tr> 
  <tr> 
    <th colspan="3">Subtotal</th> 
    <td>610.88</td> 
  </tr> 
  <tr> 
    <th colspan="2">Tax</th> 
    <td>7%</td> 
    <td>42.76</td> 
  </tr> 
  <tr> 
    <th colspan="3">Total</th> 
    <td>653.64</td> 
  </tr> 
</table>

 

การทำ Formatting Table

การทำ formatting ของ table นี้ถือมีความสำคัญมากในเรื่องการทำงานรวมกันเพราะถ้าเกินต่างคนต่างเขียนไปคนละทิศทางจะทำให้ html file ของเรานั้นอ่านยาก มากถึงมากที่สุด ที่จริงมันก็ไม่ได้ยากไรมาก แค่เราเขียนให้เป็นส่วนที่ภาษา html เขาได้ออกแบบ มาอยู่แล้วก็จบ น่าจะเข้าใจตรงกันแล้ว เดียวเรามาดู code แบบ simple สักหน่อย

<div class="forumbg">
    <div class="inner">
        <table class="table1 show-header responsive" id="team">
            <thead>
                <tr class="header">
                    <th class="number">{L_TEMPC_NUMBER}</th>
                    <th class="user">{L_USERNAME_TEMPC}</th>
                    <th class="temp_amount">{L_TEMPC_BEFORE_AMOUNT}</th>
                    <th class="temp_unit">{L_TEMPC_BEFORE_UNIT}</th>
                    <th class="temp_unit">{L_TEMPC_AFTER_UNIT}</th>
                    <th class="temp_amount">{L_TEMPC_AFTER_AMOUNT}</th>
                    <th class="conver_date">{L_TEMPC_CONVERT_DATE}</th>
                    <th class="created_date">{L_TEMPC_USER_CREATED_DATA}</th>
                    <th class="ip">{L_TEMPC_IP}</th>
                    <th class="descripsion">{L_DESCRIPSION_TEMPC}</th>
                </tr>
            </thead>
        <tbody class="bg_table">
            <!-- BEGIN loop -->
                    <tr>
                    <td class="number">{loop.num}</td>
                    <td class="user">{loop.tempc_user_name}</td>
                    <td class="temp_amount">{loop.tempc_before_amount}</td>
                    <td class="temp_unit">{loop.tempc_before_unit}</td>
                    <td class="temp_unit">{loop.tempc_after_unit}</td>
                    <td class="temp_amount">{loop.tempc_after_amount}</td>
                    <td class="conver_date">{loop.tempe_convert_date}</td>
                    <td class="created_date">{loop.tempe_user_created_date}</td>
                    <td class="ip">{loop.tempc_user_ip}</td>
                    <td class="descripsion">{L_DESCRIPSION_TEMPC}</td>
                    </tr>
            <!-- END loop -->
        </tbody>
    </table>
    </div>
</div>

โต้ดตัวนี้เป็นการแสดงข้อมูลตารางเข้าใช้งานของโปรแกรมแปลงอุณหภูมิโดยมีการกำหนด class เพื่อเพิ่มความสวยงามให้กับ ตาราง และมีการ loop แสดงข้อมูล เพื่อนำมาแสดงบน หน้าเว็บไซต์

 

สรุป HTML เป็นภาษาที่ใช่สำหรับการจัดทำเว็บไซต์วิธีการเขียน สามารถเขียนโดยใช้ tag ตัว html จะมี tag table ที่ใช้สำหรับการทำตารางแต่เราต้องทำความเข้าใจก่อนว่า การเขียน Table ใน html มีหลักการยังไง นอกจากการสร้างตารางด้วย tag เรายังสามารถเขียน css เพื่อเปลี่ยนสีเปลี่ยนขนาดได้ตามที่เราต้องการอีกด้วย

 

HTML Tables, [ออนไลน์], เข้าถึงได้จาก https://www.w3schools.com/html/html_tables.asp
The Table element, [ออนไลน์], เข้าถึงได้จาก https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
HTML Tables – Table Tutorial with Example Code, [ออนไลน์], เข้าถึงได้จาก https://www.freecodecamp.org/news/html-tables-table-tutorial-with-css-example-code/