CreateaFreeWebsite
with Responsive Tables
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:
| Heading | |
|---|---|
| Column 1 | Column 2 |
<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>
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.
Have you found Thiings yet?.
Over 6000 Free 3D images that you can download (individually or the complete set) and use for personal or commercial projects. You have got to SEE this!!
Free Bullet Images, WingDings and WebDings
🔵 🔶 😀 🎈 🐝 🏀 👉 👲 💡 🍅
Have you tried our NEWEST template kit with scrolling columns?
Download Template Kit #601 - 4 Page Kit or Test Drive It!