This post helps you to crate a fancy table using html and css. Its very easy and it is looking plain and processional. In this table each column having different types of colors. Try this simple table and use it in your sites when you are require this. This also caontain rowspan and column span of the table below example have the demo page to view this page you will get live preview of this program.
index.html
<!DOCTYPE html>
<html>
<head>
<title>SAN HTML Table</title>
</head>
<body>
<table border="1" width="1050px;" style="border-collapse:collapse; border:1px solid #313131;" align="center" >
<thead>
<tr style="text-align:center; height:50px;">
<td colspan="2" width="120px;" style="background-color:#FFD2A6;">ARTS</td>
<td colspan="2" width="120px;" style="background-color:#95CAFF;">COMMERCE</td>
<td colspan="2" width="120px;" style="background-color:#FFB0D8;">SCIENCE</td>
</tr>
</thead>
<tbody>
<tr style="text-align:center; height:50px; ">
<td style="background-color:#FFD2A6; width:180px;">UG</td>
<td style="background-color:#FFD2A6; width:180px;">PG</td>
<td style="background-color:#95CAFF; width:140px;">UG</td>
<td style="background-color:#95CAFF; width:140px;">PG</td>
<td style="background-color:#FFB0D8; width:180px;"">UG</td>
<td style="background-color:#FFB0D8; width:180px;"">PG</td>
</tr>
<tr style="height:50px;">
<td style="background-color:#FFD2A6; padding:15px;">MARATHI</td>
<td style="background-color:#FFD2A6; padding:15px;">----</td>
<td style="background-color:#95CAFF; padding:15px;">B.COM</td>
<td style="background-color:#95CAFF; padding:15px;">M.COM</td>
<td style="background-color:#FFB0D8; padding:15px;">PHYSICS</td>
<td rowspan="2" style="background-color:#FFB0D8; padding:15px;">ORGANIC CHEMISTRY</td>
</tr>
<tr style=" height:50px;">
<td style="background-color:#FFD2A6; padding:15px;">HINDI</td>
<td style="background-color:#FFD2A6; padding:15px;">ENGLISH</td>
<td style="background-color:#95CAFF; padding:15px;">BCA</td>
<td style="background-color:#95CAFF; padding:15px;"> </td>
<td style="background-color:#FFB0D8; padding:15px;">CHEMISTRY</td>
</tr>
<tr style=" height:50px;">
<td style="background-color:#FFD2A6; padding:15px;">ENGLISH</td>
<td style="background-color:#FFD2A6; padding:15px;">HINDI</td>
<td style="background-color:#95CAFF; padding:15px;"> </td>
<td style="background-color:#95CAFF; padding:15px;"> </td>
<td style="background-color:#FFB0D8; padding:15px;">BOTANY</td>
<td style="background-color:#FFB0D8; padding:15px;">PG</td>
</tr>
<tr style="height:50px;">
<td style="background-color:#FFD2A6; padding:15px;">POLITICAL SCIENCE</td>
<td style="background-color:#FFD2A6; padding:15px;">POLITICAL SCIENCE</td>
<td style="background-color:#95CAFF; padding:15px;"> </td>
<td style="background-color:#95CAFF; padding:15px;"> </td>
<td style="background-color:#FFB0D8; padding:15px;">ZOOLOGY</td>
<td style="background-color:#FFB0D8; padding:15px;">PG</td>
</tr>
<tr style=" height:50px;">
<td style="background-color:#FFD2A6; padding:15px;">ECONOMICS</td>
<td style="background-color:#FFD2A6; padding:15px;">ECONOMICS</td>
<td style="background-color:#95CAFF; padding:15px;"> </td>
<td style="background-color:#95CAFF; padding:15px;"> </td>
<td style="background-color:#FFB0D8; padding:15px;">COMPUTER SCIENCE</td>
<td style="background-color:#FFB0D8; padding:15px;">PG</td>
</tr>
<tr style=" height:50px;">
<td style="background-color:#FFD2A6; padding:15px;">HISTORY</td>
<td style="background-color:#FFD2A6; padding:15px;">HISTORY</td>
<td style="background-color:#95CAFF; padding:15px;"> </td>
<td style="background-color:#95CAFF; padding:15px;"> </td>
<td style="background-color:#FFB0D8; padding:15px;">MICROBIOLOGY</td>
<td style="background-color:#FFB0D8; padding:15px;">PG</td>
</tr>
<tr style=" height:50px;">
<td style="background-color:#FFD2A6; padding:15px;">GEOGRAPHY</td>
<td style="background-color:#FFD2A6; padding:15px;"> </td>
<td style="background-color:#95CAFF; padding:15px;"> </td>
<td style="background-color:#95CAFF; padding:15px;"> </td>
<td style="background-color:#FFB0D8; padding:15px;"> </td>
<td style="background-color:#FFB0D8; padding:15px;">PG</td>
</tr>
</tbody>
</table>
</body>
</html>
0 Comments