บทเรียนออนไลน์ คุณครูอิทธิวิธิ สินศิริ

5. การใส่รูปภาพลงในตาราง
     เราสามารถนำรูปภาพมาใส่ลงในตารางได้ โดยอาจเป็น
      1) ใส่รูปภาพลงในเซลล์ของตาราง
      2) ใส่รูปภาพเป็นพื้นหลังของตาราง

5.1 การใส่รูปภาพลงในเซลล์ของตาราง
การใส่รูปภาพลงในเซลล์ของตารางจะถือเป็นส่วนหนึ่งของข้อมูล เราสามารถใช้แท็ก <img> ได้เช่นเดียวกับการใส่รูปภาพที่ได้กล่าวมาแล้ว แค่เพียงใส่ลงในแท็ก <td> หรือ <th> ดังนี้

รูปแบบ

<table border="1" width="500" height="500"
           Cellspacing="2" cellpadding="5">
   <tr>
           <th colspan="4" bgcolor="red">
           <img src="book.png" width="50" align="middle">
           <font olor="white><font size="5">หนังสือดีมีคุณภาพ</th>
   </tr>

ผลที่ได้บนเบราว์เซอร์

5.2 การใส่รูปภาพเป็นพื้นหลังของตาราง
เป็นการใส่รูปภาพเพื่อแสดงเป็นพื้นหลังของตารางเพื่อความสวยงาม โดยการกำหนดคำสั่ง background ลงในแท็ก <table> ดังนี้

รูปแบบ

<table background= “ชื่อไฟล์รูปภาพ">

ผลที่ได้บนเบราว์เซอร์

ส่วนที่ไม่ได้มีการกำหนดสีไว้จะถูกแสดงด้วยรูปภาพนั้นเป็นพื้นหลังแทน