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>
<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;}
#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
very nice buddy, very useful article for me