<TABLE width="200" border="1" cellspacing="0" cellpadding="0"> <TR> <TD style="width:100%; background-color:lightblue" onMouseover="this.style.backgroundColor='yellow';" onMouseout="this.style.backgroundColor='lightblue';"> ทดสอบๆ </TD> </TR> </TABLE>
<html><head> <title></title> <style> tr:hover {background-color: #FFFF00;} </style> </head> <body > <table><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr><tr><td>4</td></tr></table>
$(document).ready(function() { $("#gridview tbody tr:odd").addClass("odd"); $("#gridview tbody tr:even").addClass("even"); $("#gridview thead tr").addClass("head"); $(document).ready(function() { $("#gridview tr.odd").mouseover(function(e) { $(this).removeClass("odd").addClass("over"); }).mouseout(function(e) { $(this).removeClass("over").addClass("odd"); }); $("#gridview tr.even").mouseover(function(e) { $(this).removeClass("even").addClass("over"); }).mouseout(function(e) { $(this).removeClass("over").addClass("even"); }); });
<style type="text/css"> table#gridview { clear:both; } table#gridview td { padding:3px 0px; } table#gridview tr.head { background:#ccc; font:bold 12px Tahoma, Geneva, sans-serif; text-align:center; } table#gridview tr.head td { padding:8px 0px; } table#gridview tr.odd { background:#f5f5f5; } table#gridview tr.even { background:#eee; } table#gridview tr.over { background:#fcf; } </style>
<table width="100%" border="0" cellspacing="1" cellpadding="2" id="gridview"> <thead> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> </thead> <tbody> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tbody> </table>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง