SQL PHP HTML ASP JavaScript articles and free scripts to download

HTML table background image

We can create attractive headers like modern web design sites using background images. We will use one simple image to create one header like this below. To create one image like this please visit our gradient tutorial in our graphics section.

This is our text over the header
<table width='100%' border='0' cellspacing='1' cellpadding='0' background='images/bg1.jpg'>
<tr><td >This is our text over the header</td></tr>
</table>

Adding Background image to table data cell

This is our text over the header
<table width='100%' border='0' cellspacing='1' cellpadding='0'>
<tr><td background='images/bg1.jpg'>This is our text over the header</td></tr>
</table>
In above script we have added background image directly. We can also use style sheet to display images inside table

Using Style

Globally ( for the page ) we can declare style of the table like this.
table { background: url("http://www.plus2net.com/images/top2.jpg") no-repeat; }
All tables of the page will follow this property and all will use the same image as background image.
By adding class to it we can define another style to some other tables.
table.t1 { background: url("images/bg1.jpg") repeat;}
We will add the above code to head section of the page and display two tables with this.

Here is the demo of Table background image with CSS

Here is the script of the above demo
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>Demo of table background image</title>
<style type="text/css">
table { background: url("http://www.plus2net.com/images/top2.jpg") no-repeat; }
table.t1 { background: url("images/bg1.jpg") repeat;}

</style>
</head>

<body>
<table>
<tr><td>Cell 1 </td><td>Cell 2 </td><td>Cell 3 </td><td>Cell 4 </td></tr>
<tr><td>Cell 1 </td><td>Cell 2 </td><td>Cell 4 </td><td>Cell 4 </td></tr>
</table>
<br><br>
<table class="t1">
<tr><td>Cell 1 </td><td>Cell 2 </td><td>Cell 3 </td><td>Cell 4 </td></tr>
<tr><td>Cell 1 </td><td>Cell 2 </td><td>Cell 4 </td><td>Cell 4 </td></tr>
</table>
</body>
</html>
Please rate this Article on one to five scale

Google+
Post Comment This is for short comments only. Use the forum for more discussions.
Name
Email( not to be displayed)Privacy Policy
1+2=This is to prevent automatic submission by spammers. Please enter the result of the sum as asked



Join Our Email List
Email:  
For Email Newsletters you can trust
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

©2000-2014 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer