HTML td Background with CSS Tutorial

In this tutorial, we’ll create a beautiful HTML table with td background style (CSS). Design a table, we can using for a lot of purpose, such as table price, table lesson and more. It is seem table hosting price that you can see detail in tutorial and Demo link bellow:

Demo Download

This article is about the proper th and td of tables, for tabular data. How you can implement them with accessibility in mind and how to make them appealing for the eye using CSS.

 The Markup

The table will have the following structure:

<table>
  <tr>
    <th class="c1">Didecated Hosting</th>
    <th class="c2">VPS Hosting</th>
    <th class="c3">Sharing Hosting</th>
    <th class="c4">Reseller Hosting</th>
  </tr>
  <tr>
    <td class="c1">$200/Month</td>
    <td class="c2">$100/Month</td>
    <td class="c3">$20/Month</td>
    <td class="c4">$50/Month</td>
  </tr>
  <tr>
    <td class="c1">Free Domain</td>
    <td class="c2">Free Domain</td>
    <td class="c3">Free Domain</td>
    <td class="c4">Free Domain</td>
  </tr>
  <tr>
    <td class="c1">2GB DDR2</td>
    <td class="c2">20GB Disc Space</td>
    <td class="c3">Unlimited Email</td>
    <td class="c4">Unlimited Email</td>
  </tr>
</table>

The Cascading Style Sheets (CSS)

The table css will have the following code:

tr th{
	font-weight:bold;
    }
tr th, tr td{
	padding:5px;
}
th{
    border: 5px solid #C1DAD7;
}
td{
	border: 5px solid #C1DAD7;
}
.c1{
	background:#4b8c74;
}
.c2{
	background:#74c476;
}
.c3{
	background:#a4e56d;
}
.c4{
	background:#cffc83;
}

Now! We  have a HTML table with td Background style. Check out the demo below, and feel free to download this example for future use.  I hope you enjoyed this tutorial and find it useful!

Demo | Download (220)