ให้เรตสมาชิก: 0 / 5

ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

                             การจัดการรูปภาพในภาษา HTML กล่าวถึงการใส่รูปภาพพื้นหลังให้กับตารางเป็นการกำหนดแอตทริบิวต์ background ในแท็ก <table> และการแทรกรูปภาพใช้แท็ก <img src="/รูปภาพ"> ในตาราง

arrow2 การใส่รูปภาพพื้นหลังตารางในภาษา HTML

               สามารถใส่รูปภาพให้กับพื้นหลังของตารางได้ด้วยการใช้แอตทริบิวต์  background  โดยการกำหนดอยู่ภายในแท็ก  <table>  ทั้งนี้ไม่นิยมใช้กับรูปภาพที่มีความละเอียดน้อยเพราะอาจทำให้รูปที่นำมาใช้งานนั้นแสดงผลแตกแยกควรใช้รูปภาพที่มีรายละเอียดลวดลายน้อยเพราะการกำหนดรูปภาพบนพื้นตารางนั้นจะมีการนำเสนอข้อมูลต่าง  ๆ  ในตารางด้วย ดังนั้นหากนำรูปภาพที่มีรายละเอียดลวดลายมากเกินไปมากำหนดเพิ่มอีกอาจทำให้ความชัดเจนของข้อมูลลดลงทำให้ไม่สวยงาม 

 

รูปแบบการใช้งาน

 <table background= “ชื่อไฟล์รูปภาพ”>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
<tr><td>ข้อมูล1</td><td>ข้อมูล2</td></tr>
</table>

 ตัวอย่าง

<table border=1 cellspacing=”0” cellpadding=”2” background=”images/bg.png”>
<caption align=top>ตารางเวรประจำวัน</caption>
<tr><th>จันทร์</th><td>ฉัตรชัย</td><td>ขนิษฐา</td>
<td>เพ็ญศิริ</td></tr>
<tr><th>อังคาร</th><td>ภานุพงษ์</td><td>จิราพร</td>
<td>ธนัณชญา</td></tr>
<tr><th>พุธ</th><td>จิตรภานุ</td><td>ปรีดาภรณ์</td>
<td>ฐาปนี</td></tr>
<tr><th>พฤหัสฯ</th><td>กษิดิศ</td><td>พัณณิตา</td>
<td>จารุพร</td></tr>
<tr><th>ศุกร์</th><td>ศุภวิชญ์</td><td>วรโชติ</td>
<td>ปรางค์ทอง</td></tr>
</table>

      table background

 

arrow2 การแทรกรูปภาพในตารางภาษา HTML

               สามารถนำรูปภาพมาแทรกในเซลล์ตารางได้ โดยการใช้แท็ก  <img>​​​​​​​​​  ซึ่งเป็นแท็กเดี่ยวมีเฉพาะแท็กเปิด  (open tag)  ใช้คู่กับแอตทริบิวต์ในการกำหนดไฟล์รูปภาพ  src  แท็ก <img src= “ไฟล์รูปภาพ”>   กำหนดระหว่างแท็ก  <td>...</td>

 

รูปแบบการใช้งาน

 <table>
<tr>
<td><img src= “ไฟล์รูปภาพ”></td>
<td><img src= “ไฟล์รูปภาพ”>ข้อความ</td>
</tr>
</table>

 ตัวอย่าง

 <table border= “1”>
<caption align= “top”>การแทรกรูปในตาราง
</caption>
<tr><td><img src= “images/cat2.jpg”></td>
<td><img src= “images/cat4.jpg”></td></tr>
<tr align= “center”><td>กัตโตะ</td><td>โคนี</td></tr>
<table>

      table img