การสร้างตารางด้วย HTML
<html>
<head>
<title>การสร้างตาราง</title>
</head>
<body>
<table border="1" height = "200" width = "300">
<tr>
<td>แถวที่ 1 คอลัมน์ 1</td>
<td>แถวที่ 1 คอลัมน์ 2</td>
</tr>
<tr>
<td>แถวที่ 2 คอลัมน์ 1</td>
<td>แถวที่ 2 คอลัมน์ 2</td>
</tr>
</table>
</body>
</html>
อธิบายคำสั่ง
<table border="1" height = "200" width = "300">
บรรทัดนี้เป็นการใช้คำสั่ง table ในการสร้างตารางโดยกำหนด border="1" คือ เส้นขอบของตารางมีความหน้า = 1 , height = 200 คือ การกำหนดความสูง 200 และ width คือ การกำหนดความกว้าง 300
<tr> คือการสร้างแถวขึ้นมา 1 แถว
<td> คือคำสั่งจ้างคอลัมน์ 1 คอลัมน์
การสร้างตารางในตัวอย่างด้านบน คือการสร้างตารางแบบ 1 แถว 1 คอลัมน์
nuiii044
Webmaster
หากต้องการจะเพิ่มแถวให้ใช้ <tr></tr> เป็นตัวกำหนดครับ และหากต้องการเพิ่มคอลัมน์ให้ใช้ <td></td> เป็นตัวกำหนด
ตัวอย่างเช่นถ้าต้องการสร้างตารางสองแถวสองคอลัมน์ให้เขียนว่า
<table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
nuiii044
Webmaster
การใช้คำสั่ง colspan และ rowspan ในการสร้างตาราง ตัวอย่าง
<table width="200" border="1">
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
nuiii044
Webmaster
แบบฝึกหัด
ให้นักเรียนสร้างตารางตามรูปภาพดังต่อไปนี้
