modify the background of your HTML tables.

Posted by admin November 20, 2011

modify the background of your HTML tables.

HTML table background code. This code enables you to modify the background of
your HTML tables. For example, you can change the background color or add a
background image to your tables.

Setting All Background Styles

There is a shorthand CSS property that allows you to set all your background
styles in one go. This property is the



background

property.

This is the property that most web developers use for setting their table
backgrounds, as it's quicker to use and it helps to minimize code. This property
allows you to set the background color and a background image properties using
one property. You can see it in action with the following example.

If you have difficulty understanding this property, have a look at the other
examples on this page. They should make things a bit clearer for you.

Example:

Table header	Table header	Table header
design	4webs	free html codes
free design	web design	all free

HTML Code:

<html><br /> <head><br /> <title>My<br />  Table and It's Background Image</title><br /> <style type="text/css"><br /> .myTableBg { width:400px;background:#dedede <br /> url(/pix/web_graphics/free_website_graphics/background_patterns/101Emboss8.gif)<br />  repeat;border-collapse:collapse; }<br /> .myTableBg td, .myTableBg th { border:2px solid white;padding:5px; }<br /> </style><br /> </head><br /> <body><br /> <table class="myTableBg"><br /> <tr><br /> <th>Table header</th><th>Table <br /> header</th><th>Table header</th><br /> </tr><br /> <tr><br /> <td>design</td><td>Table cell <br /> 2</td><td>free html codes</td><br /> </tr><br /> <tr><br /> <td>free design</td><td>Table cell <br /> 5</td><td>all free</td><br /> </tr><br /> </table><br /> </body><br /> </html><br />

Background Color

The following example demonstrates how background color can be applied to the
table, a table row, and also an individual table cell by using the



background-color

property. Check out

HTML Table Background Color to see more examples of adding background color
to a table. In particular, it shows how to use a
CSS class to
define your table styles.

Example:

Table header	Table header
design	4webs

HTML Code:

<table style="background-color:lightblue;"><br /> <tr style="background-color:blue;color:white;"><br /> <th>Table header</th><th>Table header</th><br /> </tr><br /> <tr><br /> <td width="20%">design</td><td style="background-color:lightgreen;">4webs</td><br /> </tr><br /> </table><br />

Table Background Image

Here's an example of adding a background image to your table by using the CSS



background-image

property.

The background image in this example automatically repeats across the full
width and height of the table. In other words, if the background image is
smaller than the table, it will be displayed again and again until it reaches
the edge of the table.

Here's the actual image that we will use in the following example:

As you can see, this image is smaller than the width of the table, so it
repeated across the full width and height of the table.

In this example, we also add a thin border to our table. Here's more about
HTML
table borders.

Table header	Table header
design	4webs

HTML Code:

<table<br />  <br /> style="background-image:url(/pix/web_graphics/free_website_graphics/background_patterns/ac643.gif);border:1px<br />  solid black;"><br /> <tr><br /> <th>Table header</th><th>Table header</th><br /> </tr><br /> <tr><br /> <td>design</td><td>4webs</td><br /> </tr><br /> </table><br />

Non-Repeating Background Image

Sometimes you might not want the background image to repeat. Sometimes you
might want it to appear once only. For this effect, you can use the CSS

background-repeat property. You can also use the

background-position property to define where the image is positioned within
the table. For example, you could position the image in the center of the table,
or at the top-left or bottom-right etc.

Table header	Table header
design	4webs
free html codes	free design
web design	all free

HTML Code:

<table<br />  <br /> style="background-image:url(/pix/web_graphics/free_website_graphics/background_patterns/101celebrate3.gif);background-repeat:no-repeat;background-position:center<br />  center;border:1px solid black;width:200px;height:200px;"><br /> <tr><br /> <th>Table header</th><th>Table header</th><br /> </tr><br /> <tr><br /> <td>design</td><td>4webs</td><br /> </tr><br /> <tr><br /> <td>free html codes</td><td>free design</td><br /> </tr><br /> <tr><br /> <td>web design</td><td>all free</td><br /> </tr><br /> </table><br />

Background Image on Table Cells

You could also add a background image to each individual table cell. You
could use a different image for each cell or the same image. If you use the same
image, it would give it that "repeat" effect and the "repeat" could be precisely
aligned with each table cell (but it doesn't have to be). You could also achieve
this effect using a repeating background image on the whole table, but you'd
need to ensure that each cell is exactly the same size as the image, and you
might need to play around with the
table
border.

Here's an example of adding a background image to each cell using a
CSS class with
an embedded style
sheet:

Table header	Table header	Table header
design	4webs	free html codes
free design	web design	all free

HTML Code:

<html><br /> <head><br /> <title>My<br />  Table Cells and Their Background Images</title><br /> <style type="text/css"><br /> .cellImage td, .cellImage th { <br /> background-image:url(/pix/web_graphics/free_website_graphics/background_patterns/101Emboss8.gif);width:120px;height:70px;padding:5px;<br />  }<br /> </style><br /> </head><br /> <body><br /> <table class="cellImage"><br /> <tr><br /> <th>Table header</th><th>Table <br /> header</th><th>Table header</th><br /> </tr><br /> <tr><br /> <td>design</td><td>Table cell <br /> 2</td><td>free html codes</td><br /> </tr><br /> <tr><br /> <td>free design</td><td>Table cell <br /> 5</td><td>all free</td><br /> </tr><br /> </table><br /> </body><br /> </html><br />

Using Classes

Some of the above examples use
inline style sheets
and the others use
embedded style
sheets to set the CSS properties. This is because it's easier for
demonstration purposes. I strongly encourage you to use a
CSS class
defined in an
external style sheet whenever possible to set your styles. This can reduce
coding time and make your code easier to maintain.

Search This Blog

web design