การใช้ภาพเป็นพื้นหลังของตารางเพื่อตกแต่งหน้าเว็บไซต์ ( Table Background )

การใส่ background ทำให้แต่ละหน้าของเว็บดูดีขึ้นนั้น เราทำได้ด้วยการใช้ table tag ใน html

ขั้นตอน

๑ เตรียมรูปภาพก่อน

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

๒ นำรูปภาพไปฝากไว้บนเว็บไหนก็ได้ แนะนำว่าบนเว็บของเราเองดีที่สุด หรือไม่เช่นนั้นแนะนำ photobucket.com รูปตัวอย่างฝากไว้บน photobucket.com

๓ ฝากรูปแล้วให้จัดการลอก url ของรูปเตรียมไว้ก่อน ในตัวอย่างคือ http://i230.photobucket.com/albums/ee8/maha-oath/leaves_bg.jpg

๔ เขียน code ตาราง จะทำให้ดูเป็นตัวอย่างเล็ก ๆ น้อย ๆ ไม่ซับซ้อน เพื่อเป็นแนวทางก่อน ( บอกหมดเดี๋ยวไม่ได้ฝึกทำเอง อย่างที่ปราชญ์ว่า    " สอนจับปลา ดีกว่าคอยหาปลาให้ "  )

<!--ตัวอย่างการใช้ table เพื่อตกแต่ง entry ให้สวยงาม-->

        <table style="width:350px;height:300px" bordercolor="#000000" cellspacing="0" cellpadding="3" align="center" background="http://i230.photobucket.com/albums/ee8/maha-oath/leaves_bg.jpg" border="1">

                <tbody>

                             <tr>

                                      <td valign="center" align="center"><font size="5" color="white">ตัวอย่างการนำรูปมาเป็น background</font></td>

                             </tr>                  

               </tbody>

         </table>

<!--end ตัวอย่างการใช้ table เพื่อตกแต่ง entry ให้สวยงาม-->

๕ นำ code ที่ได้ไปแปะลงในส่วนที่ต้องการ เท่านี้ก็เรียบร้อย

ผลงานที่ปรากฏ

ตัวอย่างการนำรูปมาเป็น background

อธิบายโค้ดตัวอย่าง

ถ้าคุ้นเคยกับ html บ้าง ก็จะทราบว่า html tag นั้น ต้อง มีเปิด และ ปิด เป็นส่วนมาก <tag> คือเปิด </tag> คือปิด  เปิดแล้วต้องไม่ลืมปิดด้วยนะครับ มาดูกันทีละอย่าง


<!--ตัวอย่างการใช้ table เพื่อตกแต่ง entry ให้สวยงาม-->
        <table style="width:350px;height:300px" bordercolor="#000000" cellspacing="0" cellpadding="3" align="center" background="http://i230.photobucket.com/albums/ee8/maha-oath/leaves_bg.jpg" border="1">
                <tbody>
                             <tr>
                                      <td valign="center" align="center"><font size="5" color="white">ตัวอย่างการนำรูปมาเป็น background</font></td>
                             </tr>                
               </tbody>
         </table>
<!--end ตัวอย่างการใช้ table เพื่อตกแต่ง entry ให้สวยงาม-->

สีม่วง คือ comment ของเราเองเพื่อเตือนความจำ หรือเพื่อง่ายต่อการกลับมาแก้ไขในภายหลัง ไม่มีผลต่อการแสดงบน browser

สีแดง คือ ค่า parameter ที่เราสามารถกำหนดเองได้

สีน้ำเงิน คือ url ของรูปภาพที่ใช้เป็น background

สีเขียวคือ สิ่งที่ต้องการให้ปรากฏ หรือ object ต่าง ๆ