Background Images in Responsive Tables

Table #1 Background images can be placed in tables using embedded style sheets and by making use of class identifiers.

background-image: url(images/image.gif);

Tags that accept the background-image attribute are:
<table>
<th>
<td>

We'll use these images in our demonstration:
background image

Heading
Column 1	Column 2

The HTML

<table class="red-table">
<tr>
<th colspan="2">Heading</th></tr>
<tr>
<td class="left-column">Column 1</td>
<td class="right-column">Column 1</td>
</tr></table>

The CSS

table.red-table{
width: 100%; 
margin: 2% auto;
box-shadow: 1px 1px 2px #000
}

table.red-table th {
background-image: url(images/150-culttext.jpg);
text-align :center;
padding: 5px 5px
}

.left-column {
background-image:url(images/sandy-green.jpg);
text-align :center;
padding : 5px 5px
}


.right-column {
background-image:url(images/sandy-red.jpg);
text-align :center;
padding : 5px 5px
}

The techniques used here for making responsive tables is only to be used for the very small ones. For large data tables visit our beginner solution for large responsive data tables.

When using background images in tables or as page backgrounds, be sure to choose them wisely. One of the most common errors in web page design is the use of busy or dark colored backgrounds that conflict with text.

Top