HTML > HTML tags on Web Pages Scrolling by Marquee Form CSS Table

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'>

<tr><td background='images/bg1.jpg'>&nbsp<font
face='Verdana' size='2'>This is our text over the
header</font></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>

HTML Table | Table Row | Table Data | Table Heading

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

<Table>

Table tag Table Row Table Data Table Heading Background Image