In this post we are going to share a small CSS code about customizing the HTML tables. Default HTML tables are very ugly looking but you can easily customize those ugly tables into beautiful ones with this small CSS code. It is very easy to understand this code, you can change the code according to your own needs.

HTML Tables before CSS customization

Below is the screen shot of default HTML tables without any CSS customizations. These tables are looking very dull and odd. If you use these tables in your website then you will surely ruin the design of your website.

HTML tables after CSS customization

Below is the screenshot of HTML tables after CSS customizations. Now you can clearly see the difference between the default and customized design. You can easily change the color scheme of the table design according to your own choice.

HTML

<table class='dap-table'>
<tbody>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 4</th>
<th>Heading 5</th>
<th>Heading 6</th></tr>
<tr>
<td >EWR</td>
<td >FGH</td>
<td >VCB</td>
<td >EWR</td>
<td>ASD</td></tr>
<tr>
<td >QWE</td>
<td >BVN</td>
<td >GHJ</td>
<td >TRY</td>
<td >CVB</td></tr>
<tr>
<td >QWR</td>
<td >SDF</td>
<td >QWE</td>
<td >DFG</td>
<td >RTY</td></tr>
<tr>
<td >VBN</td>
<td >GFH</td>
<td >VNB</td>
<td >FGJ</td>
<td>CVN</td></tr></tbody></table>

CSS

.dap-table
{
margin:10px;
border-collapse:collapse;
font-family:Helvetica,Arial;
font-size:14px;
box-shadow:1px 1px 4px  #dcdcdc;
-moz-box-shadow:1px 1px 4px  #dcdcdc;
-webkit-box-shadow:1px 1px 4px  #dcdcdc;
-o-box-shadow:1px 1px 4px  #dcdcdc;
}
.dap-table th
{
background:#243342;
color:#ffffff;
padding:12px;
}
.dap-table th:hover
{
background:#3c556e;
}
.dap-table td
{
padding:8px;
color:#777777;
border:1px solid #dcdcdc;
}
.dap-table tr:hover
{
background:#f0f0f0;
}

Leave a Reply

Your email address will not be published. Required fields are marked *