Attractive table creation tutorial in Html . Sample code for top rated tables
simple html table:
tr - table row
th - table heading
td - table data
Colorful table with css:
Using css ,html tables can be made attractive which give a rich look to your website.
css:
html:
simple html table:
<table border=1 cellpadding=0 cellspacing=0>
<tr><th>S.no</th><th>Products<th></th></tr>
<tr><td>1</td><td>Item.1<td></tr>
<tr ><td>2</td><td>Item.2<td></tr>
<tr ><td>3</td><td>Item.3<td></tr>
</table>
<tr><th>S.no</th><th>Products<th></th></tr>
<tr><td>1</td><td>Item.1<td></tr>
<tr ><td>2</td><td>Item.2<td></tr>
<tr ><td>3</td><td>Item.3<td></tr>
</table>
S.no | Products | |
---|---|---|
1 | Item.1 | |
2 | Item.2 | |
3 | Item.3 |
th - table heading
td - table data
Colorful table with css:
Using css ,html tables can be made attractive which give a rich look to your website.
css:
#tablehome {
border:1px solid #D9D5BE;
border-collapse:collapse;
text-align:center;
}
#tablehome td {
border:1px solid #D9D5BE;
padding: 2px 0px;
}
border:1px solid #D9D5BE;
border-collapse:collapse;
text-align:center;
}
#tablehome td {
border:1px solid #D9D5BE;
padding: 2px 0px;
}
html:
<table id="tablehome" >
<tr bgcolor=#8B6914 style="color:white;"><th>S.no</th><th>Products<th></th></tr>
<tr bgcolor=#EED5B7><td>1</td><td>Item.1<td></tr>
<tr bgcolor=#EEB422><td>2</td><td>Item.2<td></tr>
<tr bgcolor=#EED5B7><td>3</td><td>Item.3<td></tr>
<tr bgcolor=#EEB422><td>4</td><td>Item.4<td></tr>
</table>
<tr bgcolor=#8B6914 style="color:white;"><th>S.no</th><th>Products<th></th></tr>
<tr bgcolor=#EED5B7><td>1</td><td>Item.1<td></tr>
<tr bgcolor=#EEB422><td>2</td><td>Item.2<td></tr>
<tr bgcolor=#EED5B7><td>3</td><td>Item.3<td></tr>
<tr bgcolor=#EEB422><td>4</td><td>Item.4<td></tr>
</table>
0 comments:
Post a Comment