CreateaFreeWebsite  with Responsive Tables

Using Color in Responsive Tables

The method shown here for making tables responsive should only be used for very small tables. For large data tables check out our beginners solution.

The CSS

table.demo4 {
width: 100%; 
margin: 0 auto; 
background-color :#7F7F7F; 
border: solid 2px #000; 
border-radius: 10px; 
box-shadow: 5px 5px 10px #0e0e0e
}
 table.demo4 th {
  background-color :#E4B552;
  padding: 5px 5px


}
.yellow-column {
  background-color: #ffff00;
	padding: 5px 5px;
text-align:center
}

.red-column {
  background: #ff8080;
  padding: 5px 5px;
text-align:center
}

Example Table

Heading
Column 1 Column 2

The html Code

The code shows the different methods of setting background colors.

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

Note: Some authorities will tell you to use relative values for padding. For us absolutes have always worked best. You choose.

 

Free Tools and Resources We Recommend

Free Responsive Web Design Certification freeCodeCamp
freeCodeCamp is a proven path to your first software developer job.
More than 40,000 people have gotten developer jobs after completing this – including at big companies like Google and Microsoft.
Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid.
FREE Certification Courses!!
Free Ebook How to Code in HTML5 and CSS3
"How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
FREE HTML Editor (Windows): NoteTab Light
All the features of a commercial HTML editor.
FREE Apache Server (Windows): IndigoAmpp
Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
Linux Users
If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the Geany Code Editor. You'll find it in your Linux Mint software repository. It's simple but powerful and FREE.
For image resizing we've found the easiest Linux tool to be Krita.

Have you tried our FREE RWD template kit? Download Template #402 - 6 Page Kit