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

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

หากต้องการเขียนภาษา Html และสร้างตารางให้ดูน่าสนใจมากขึ้นด้วยการใส่สีหรือการใส่ความหนาของเส้นตารางนั้นต้องเรียก CSS มาเข้าช่วย ซึ่งจะอยู่ในส่วน Tag <style></style>
ตัวอย่างการใช้ 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 <style> นั้นจะประกอบได้
- การกำหนดฟอนต์
- การกำหนดความเข้มของเส้น
- การกำหนดระยะห่างภายในช่องตาราง
- การกำหนดสีพื้นหลัง
หากใครสนใจศึกษาเพิ่มเติมสามารถไปเรียนรู้ได้ที่ > w3schools.com
การเขียน tag <table> จะช่วยกำหนดโครงสร้างหน้าเว็บได้อย่างไร ?
โดยปกติแล้วเราจะใช้ tag <table> เพื่อสร้าง Layout เว็บขึ้นมา หลังจากนั้นก็ใส่ข้อมูลเข้าไปภายในช่องนั้น ทั้งการใช้คำสั่งอื่น ๆ ของ Html อย่างเช่น
- การเพิ่มสีพื้นหลัง : style=”background-color::DodgerBlue;”
- การเพิ่มภาพ : <img src =”ชื่อภาพ”>
- การเพิ่ม Link : <a href=”url”>link text</a>
การเขียน Code นั้นมีอีกหลากหลาย tag ให้ใช้งาน ซึ่งการสร้างเว็บหรือตารางที่สวยงามขั้นมานั้นควรใช้หลาย ๆ ภาษาเข้าร่วมกัน