ภาษา HTML – คำสั่งหลักที่ใช้บ่อย (Tables)

หลังจากที่เราได้เข้าใจที่มาและหน้าที่คร่าว ๆ ของ HTML และ CSS แล้ว(ตามได้ที่ HTML คืออะไร? ทำไมคนเขียนเว็บไซต์ต้องใช้งาน และ CSS คืออะไร และใช้งานอย่างไร? ) ในบทความนี้จะมาพูดถึงคำสั่งการสร้างตาราง หรือที่เรียกว่า Table ในภาษา HTML กัน!

” อย่างที่เรารู้กันว่า ภาษา HTML มีหน้าที่คล้ายกับการสร้างโครงเว็บไซต์ขึ้นมา ฉะนั้นคำสั่ง Table จึงมีความสำคัญในสร้างกรอบหรือ Layout ภายในเว็บไซต์นั้น “

โดย Tag ของการสร้างตารางนั้นจะเขียนในรูปแบบ:

<table> </table>

โดยการเขียนจะต้องมีการเปิดวงเล็บ <table> และมีการจบคำสั่งนั้นด้วย </table> โดยปกติแล้วการสร้างแถวหรือตางราง ต้องมีคำสั่งเพิ่มเติมมาอย่าง <tr> <th> และ <td> โดยองค์ประกอบเหล่านี้จะต้องอยู่ใน tag ของ Table อีกที โดย และคำสั่งที่สมบูรณ์ของ Table คือ….

<table>
     <tr> 
        <th>NAME</th>
        <th>Price</th> 
     </tr>
     <tr>
        <td>Dinner Plate</td>
        <td>$100</td>
     </tr>
     <tr>
        <td>Bowl</td>
        <td>$100</td>
     </tr>

</table>

โดยแต่ละ Tag หรือองค์ประกอบที่อยู่ใน <table> </table>จะทำหน้าที่ต่างกัน สามารถอธิบายได้ดังนี้

” Tag <table> </table> : เป็นตัวกำหนดการสร้างตาราง “

• <tr> </tr> : เป็นตัวกำหนดแถวของตาราง
• <th> </th> : เป็นตัวกำหนดส่วนหัวของตาราง มีคุณสมบัติทำให้ตัวหนังสื่อให้ช่องนั้นอยู่กึ่งกลางและตัวหนา
• <td> </td> : เป็นตัวกำหนดข้อมูลหรือเซลล์ในแต่ละตาราง มีคุณสมบัติทำให้ตัวหนังสือมีขนาดปกติและจัดชิดซ้าย

ตัวอย่างคำสั่ง table พร้อมองค์ประกอบอื่น ๆ

หากต้องการเขียนภาษา Html และสร้างตารางให้ดูน่าสนใจมากขึ้นด้วยการใส่สีหรือการใส่ความหนาของเส้นตารางนั้นต้องเรียก CSS มาเข้าช่วย ซึ่งจะอยู่ในส่วน Tag <style></style>

• CSS คืออะไร และใช้งานอย่างไร?

ตัวอย่างการใช้ CSS เข้าช่วย ซึ่งโค้ดจะมาจากภาพตัวอย่างข้างบน

<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
</style>

การเขียน tag <table> จะช่วยกำหนดโครงสร้างหน้าเว็บได้อย่างไร ?

โดยปกติแล้วเราจะใช้ tag <table> เพื่อสร้าง Layout เว็บขึ้นมา หลังจากนั้นก็ใส่ข้อมูลเข้าไปภายในช่องนั้น ทั้งการใช้คำสั่งอื่น ๆ ของ Html อย่างเช่น

• การเพิ่มสีพื้นหลัง : style=”background-color::DodgerBlue;”
• การเพิ่มภาพ : <img src =”ชื่อภาพ”>
• การเพิ่ม Link : <a href=”url”>link text</a>

การเขียน Code นั้นมีอีกหลากหลาย tag ให้ใช้งาน ซึ่งการสร้างเว็บหรือตารางที่สวยงามขั้นมานั้นควรใช้หลาย ๆ ภาษาเข้าร่วมกัน