ใน HTML ผู้พัฒนาเว็บไซต์สามารถตาราง รวมไปถึงจัดเรียงข้อมูลให้อยู่ในรูปแบบ แถว (Rows) และ คอลัมน์ (Columns)
| Company | Contact | Country |
|---|---|---|
| Nopar | Daisy Atterberry | America |
| LalaNoodle | Mu Shui | China |
| Rumi House | Ami Sano | Japan |
| Farm Trad | Pakpao Metharom | Thailand |
| Puca Trading Corporation | Seo-Yeon Lee | Korea |
| Nifty Investment Co., Ltd. | Baz Hart | Australia |
การสร้างตารางใน HTML
ตารางใน HTML ประกอบด้วย เซลล์ (Cells) ที่อยู่ภายใน แถว (Rows) และ คอลัมน์ (Columns)
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Nopar</td>
<td>Daisy Atterberry</td>
<td>America</td>
</tr>
<tr>
<td>LalaNoodle</td>
<td>Mu Shui</td>
<td>China</td>
</tr>
</table>
<p>เพื่อให้เห็นตัวอย่างชัดเจน ทางเราจึงได้ใส่ขอบตารางไว้ด้วย</p>
</body>
</html>
Table Cells
แต่ละเซลล์ของตารางจะถูกกำหนดด้วยแท็ก
<td> และ </td> tdย่อมาจาก table data- ทุกอย่างที่อยู่ระหว่าง
<td>และ</td>คือ เนื้อหาของเซลล์
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
⚠️ หมายเหตุ
เซลล์ของตารางสามารถใส่ Elements HTML ได้ทุกประเภท เช่น ข้อความ รูปภาพ รายการ ลิงก์ หรือตารางอื่น ๆ
Table Rows
แต่ละแถว (Rows) ของตารางจะเริ่มด้วยแท็ก <tr> และสิ้นสุดด้วย </tr>
trย่อมาจาก table row
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
สามารถมีได้หลายแถวเท่าที่ต้องการในตาราง แต่ควรตรวจสอบให้แน่ใจว่า จำนวนเซลล์ในแต่ละแถวเท่ากัน
⚠️ หมายเหตุ
บางครั้งจำนวนเซลล์ในแต่ละแถวอาจไม่เท่ากัน ซึ่งจะเรียนรู้เพิ่มเติมในบทถัดไป
Table Headers
ในกรณีที่ต้องการใส่ส่วนหัวของตาราง ใช้แท็ก <th> แทน <td>
thย่อมาจาก table header
<tr>
<th>คนที่ 1</th>
<th>คนที่ 2</th>
<th>คนที่ 3</th>
</tr>
<tr>
<td>Emily</td>
<td>Toby</td>
<td>Limus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>