Wednesday 19 February 2014

table code with background image

သီခ်င္းထည့္တဲ့ဇယားကြက္မွာ ပုံဘယ္လုိထည့္ရလဲေမးထားတဲ့သူငယ္ခ်င္းေရ

ေအာက္မွာထည့္တဲ့ကုတ္ေတြေပးလုိက္ပါတယ္။

ပုံလင့္ထည့္ပါ ဆုိတဲ့ေနရာမွာၾကိဳက္ႏွစ္သက္ရာပုံထည့္ႏူိင္ပါတယ္။

ဆုိေတးသီခ်င္းေတြတင္ထားတဲ့ကုတ္ထဲက background ပုံေလးကလြဲရင္ေပါ့ 

(ကုိယ္တုိင္ edit လုပ္ထားတာေလးမုိ႔နားလည္ေပးပါ) :D

ထည့္မယ့္ ပုံကုိ size 800x600 ထားတာအဆင္ေျပမယ္ထင္ပါတယ္။

ေအာက္က ကုတ္ေတြက Design >> Layout >> HTML/JavaScript (css ကုတ္ထည့္တဲ့ေနရာ)မွာထည့္ရပါမယ္။

table.mp3 { border-collapse: collapse; padding: 5px; background-image:url(ပုံလင့္ထည့္ပါ); background-repeat:repeat; }
.mp3 th { border: 1px solid #333; padding: 5px 10px; color: lime; font-size: 16px; }
.mp3 td { border: 1px solid #333; padding: 5px 10px; color: #00CC00; font-size: 15px; } .mp3 a { color: yellow; text-shadow: 1px 1px 2px #32CD32; text-decoration:none; }
.mp3 a:hover { color: red; text-shadow: 1px 1px 2px #00ff00; } 
ေအာက္မွာေပးထားတဲ့ကုတ္ေတြကေတာ့ ပို႕စ္တင္တဲ့ေနရာမွာ HTML ကို ႏွိပ္ၿပီး ထည့္ရပါမယ္။
<table class="mp3">
<tbody>
<tr>
<th width="40">No</th>
<th width="200">Title</th>
<th width="200">Singer</th>
<th width="160">Listen/Download</th>
<th width="60">Size</th>
</tr>
<tr>
<td>1</td>
<td>Title</td>
<td>Singer</td>
<td><a href="http://itwebcrazyboy.blogspot.com" target="_blank"> Click Here !!</a></td>
<td>2.00 MB</td>
</tr>
<tr>
<td>2</td>
<td>Title</td>
<td>Singer</td>
<td><a href="http://itwebcrazyboy.blogspot.com" target="_blank"> Click Here !!</a></td>
<td>2.00 MB</td>
</tr>
<tr>
<td>3</td>
<td>Title</td>
<td>Singer</td>
<td><a href="http://itwebcrazyboy.blogspot.com" target="_blank"> Click Here !!</a></td>
<td>2.00 MB</td>
</tr>
<tr>
<td>4</td>
<td>Title</td>
<td>Singer</td>
<td><a href="http://itwebcrazyboy.blogspot.com" target="_blank"> Click Here !!</a></td>
<td>2.00 MB</td>
</tr>
<tr>
<td>5</td>
<td>Title</td>
<td>Singer</td>
<td><a href="http://itwebcrazyboy.blogspot.com" target="_blank"> Click Here !!</a></td>
<td>2.00 MB</td>
</tr>
<tr>
<td>6</td>
<td>Title</td>
<td>Singer</td>
<td><a href="http://itwebcrazyboy.blogspot.com" target="_blank"> Click Here !!</a></td>
<td>2.00 MB</td>
</tr>
<tr>
<td>7</td>
<td>Title</td>
<td>Singer</td>
<td><a href="http://itwebcrazyboy.blogspot.com" target="_blank"> Click Here !!</a></td>
<td>2.00 MB</td>
</tr>
<tr>
<td>8</td>
<td>Title</td>
<td>Singer</td>
<td><a href="http://itwebcrazyboy.blogspot.com" target="_blank"> Click Here !!</a></td>
<td>2.00 MB</td>
</tr>
<tr>
<td>9</td>
<td>Title</td>
<td>Singer</td>
<td><a href="http://itwebcrazyboy.blogspot.com" target="_blank"> Click Here !!</a></td>
<td>2.00 MB</td>
</tr>
<tr>
<td>10</td>
<td>Title</td>
<td>Singer</td>
<td><a href="http://itwebcrazyboy.blogspot.com" target="_blank"> Click Here !!</a></td>
<td>2.00 MB</td>
</tr>
</tbody>
</table>
အဆင္ေျပပါေစ။ဘေလာ့ေလးကုိလာလည္တဲ့တြက္ ေက်းဇူးတင္ပါတယ္ရွင့္

No comments:

Post a Comment

Comment မ်ားအား စစ္ေဆးျပီးမွသာ အတည္ျပဳေပးမည္။