Formating tables with CSS

November 6, 2007

Do you want to have a nice formatted table using CSS code? Being able to format a table it is not a “strange” thing than formating lists, links, text or other structures. You can have your own classes attached to the rows and columns or simple use another attributes (superscript) the used tags.

Below it is an example of a simple formated table. It is nothing special, but having particular effects give a nice and pleasant result.

I am going to show you the HTML code for this table and the CSS code table format. Having all this I think you can try something similar and why not you can show us your result. I expect you to visit our forums.

Here is the HTML code:

<table width="530" border="1" cellpadding="3" cellspacing="0" >

<tr class="tabletop">

<th width="39" >No.</th>

<th width="297" >Name</th>

<th width="168" >Actions</th>

</tr>

<tr>

<td class="col">1.</td>

<td class="col">Honda</td>

<td class="col">

<a href="">Models</a> |

<a href="">Edit</a> |

<a href="">Delete</a>

</td>

</tr>

<tr>

<td class="col">2.</td>

<td class="col">BMW</td>

<td class="col">

<a href="">Models</a> |

<a href="">Edit</a> |

<a href="">Delete</a>

</td>

</tr>

<tr>

<td class="col">3.</td>

<td class="col">Mercedes Benz</td>

<td class="col">

<a href="">Models</a> |

<a href="">Edit</a> |

<a href="">Delete</a>

</td>

</tr>

</table>

And now the CSS formats:

table{
border:1px solid #cfcfe8;
}
tr{
border:1px solid #cfcfe8;
}
td{
border:1px solid #EDF0F4;
}
th{
padding-left:15px;
border:1px solid #EDF0F4;
}
.tabletop{
background-color:#F5F6F7;
font-family:Tahoma;
font-size:14px;
font-weight:bold;
text-align:left;
color:#042461;
}
.col{
padding-left:15px;
font-size:12px;
}

Formating tables with CSS

Related news

Post a comment