Create a table using CSS (tabular data)

Last months I had met some CSS professionals. They said that if you are creating any div based layout than there are no any use of HTML table. don’t use tables at all.

But this is not the truth. Tables are still perfectly fine to use – if used correctly. most commonly used for tabular data in a div based layout. You can avoid using tables for layout, but for tabular data, tables are what you should use.
I am telling your very simple way how to create or manage a table using CSS properties.

Let’s start with a very simple table.

1. Html Part

<table id=”csstable” summary=”table using css”>
<thead>
<tr>
<th scope=”col”>School</th>
<th scope=”col”>Cont</th>
<th scope=”col”>Cont</th>
<th scope=”col”>Cont</th>
<th scope=”col”>Cont</th>
</tr>
</thead>
<tbody>
<tr>
<td>Microlaout</td>
<td>intel</td>
<td>intel</td>
<td>intel</td>
<td>Microsoft</td>
</tr>
<tr>
<<td>Microsoft</td>
<td>intel</td>
<td>intel</td>
<td>intel</td>
<td>Microsoft</td>
</tr>
<tr>
<td>Microlaout</td>
<td>intel</td>
<td>intel</td>
<td>intel</td>
<td>Microsoft</td>
</tr>
<tr>
<td>Microsoft</td>
<td>intel</td>
<td>intel</td>
<td>intel</td>
<td>Microsoft</td>
</tr>
</tbody>
</table>

2. CSSPart

#csstable{font:12px verdana; margin: 10px;width: 480px;text-align: left;    border-collapse: collapse;    border: 1px solid #69c;}
#csstable th{padding: 12px 15px;font-weight: normal;font-size: 14px;color: #039;border-bottom: 1px dashed #69c;}
#csstable td{padding: 5px 10px;    color: #669;}
#csstable tbody tr:hover td{    color: #339; background: #d0dafd;}

To see a Live demo. Click here
To download a demo file. Click here

Tags: , ,

This entry was posted on Tuesday, June 30th, 2009 at 3:03 am and is filed under CSS, Design, Web Design, Web Standard. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “Create a table using CSS (tabular data)”

  1. Michael Says:

    very nice buddy, very useful article for me

Leave a Reply

This blog is kept spam free by WP-SpamFree.

 

Get Adobe Flash player