บทเรียนออนไลน์ การเขียนเว็บไซต์ด้วยภาษา HTML : ครูนุ่ม พิชชยานาฏ รีรักษ์ :

5.3 การใส่รูปภาพลงในตาราง


จุดประสงค์การเรียนรู้

1. สามารถนำรูปภาพใส่ลงในตารางได้
2. สามารถกำหนดรูปภาพเป็นพื้นหลังตารางได้


          นอกจากเราจะใส่ข้อความหรือข้อมูลต่าง  ๆ ลงในตารางแล้ว ยังสามารถนำรูปภาพมาวางไว้ในตารางได้ เพื่อให้การแสดงข้อมูลมีรูปแบบที่ดูง่าย มีความสวยงามและเป็นระเบียบมากขึ้น

รูปแบบของคำสั่ง HTML การใส่รูปภาพในตาราง

<TD><IMG SRC="ชื่อไฟล์รูปภาพที่ต้องการ.นามสกุล"> </TD>

ตัวอย่างโปรแกรม

<html>
<head><title>การใส่รูปภาพในตาราง</title>
<body>
<table align="center" width="360" hight="70" border=2 bordercolor="blue">
<caption>การใส่รูปภาพในตาราง</caption>
<tr>
<td align="center"><img src="t014.jpg"</td>
<td align="center"><img src="t006.jpg"</td>
<td align="center"><img src="t020.jpg"</td>
</tr>
<tr>
<td align="center">รูปที่ 1</td>
<td align="center">รูปที่ 2</td>
<td align="center">รูปที่ 3</td>
</tr>
</table>
</body>
</html>


ผลลัทธ์ที่ได้