ใน HTML ผู้พัฒนาเว็บไซต์สามารถสร้างตาราง รวมไปถึงจัดการเกี่ยวข้อมูลที่อยู่ในตารางได้
ตัวอย่างตาราง
| 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 ดังนี้
<!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
แต่ละ Cell ของตาราง จะใช้ Tag <td> กับ </td>
td คือ ข้อมูลของตาราง
อะไรก็ตามที่อยู่ระหว่าง <td> และ </td> จะเป็นเนื้อหาของตาราง
ตัวอย่าง
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>การใช้งาน เพื่อกำหนด Elements td</h2>
<table style="width:100%">
<tr>
<td>Emily</td>
<td>Toby</td>
<td>Limus</td>
</tr>
</table>
<p>เพื่อให้เห็นตัวอย่างชัดเจน ทางเราจึงได้ใส่ขอบตารางไว้ด้วย</p>
</body>
</html>
Note: ข้อมูลภายใน Cell สามารถใส่ Elements HTML ได้ทุประเภท ไม่ว่าจะเป็น Text, Images, Lists, Links, Other Tables และอื่นๆ
Table Rows
แต่ละ Rows จะขึ้นต้นด้วย Tag <tr> และจบด้วย Tag </tr>
<tr> หมายถึง แถวของตาราง
ตัวอย่าง
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>การใช้งาน เพื่อกำหนด Elements tr</h2>
<table style="width:100%">
<tr>
<td>Emily</td>
<td>Toby</td>
<td>Limus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
<p>เพื่อให้เห็นตัวอย่างชัดเจน ทางเราจึงได้ใส่ขอบตารางไว้ด้วย</p>
</body>
</html>
คุณสามารถมีจำนวนแถวเท่าไหร่ก็ได้ ตามต้องการในตาราง แต่อย่าลืม!!! ตรวจสอบให้ดีนะคะว่า จำนวนเซลล์ในแต่ละแถวมีจำนวนเท่ากัน
Note: บางทีจำนวนแถวอาจมีน้อยหรือมากกว่าเซลล์ ซึ่งเราจะมาคุยกันเรื่องนี้ในบทต่อไป
Table Headers
ในกรณีที่ต้องการใส่ส่วนหัวของตาราง จะใช้ Tag <th> แทน tag <td>
th คือ ส่วนหัวของตาราง
ตัวอย่าง
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>การใช้งาน Elements th เพื่อกำหนดส่วนหัวของตาราง</h2>
<table style="width:100%">
<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>
</table>
<p>เพื่อให้เห็นตัวอย่างชัดเจน ทางเราจึงได้ใส่ขอบตารางไว้ด้วย</p>
</body>
</html>
ปกติแล้วค่าเริ่มต้นของข้อความใน <th> จะเป็นตัวหนา และจัดไว้กึ่งกลาง แต่สามารถเปลี่ยนได้ โดยการใช้ CSS