Have Look View
For This Table HTML Code below :
<!DOCTYPE html>
<html>
<head><title>Table</title>
<style>
body {
font-family: courier, serif;
font-size: 20px;
}
.str-table{
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
min-width: 300px;
border-radius: 10px 10px 0 0;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 152, 121);
text-align:center;
}
.str-table th,
.str-table td{
padding: 12px 15px;
}
.str-table tbody tr{
border-bottom: 1px solid #dddddd;}
.str-table tbody tr:nth-of-type(even) {
background-color: #D6EEEE;
}
.str-table tbody tr:last-of-type {
hover-bottom:2 px solid #009879;
border-bottom: 2px solid #009879;
}
.str-table tbody tr:hover.rayhan-row2
{background-color:#dddddd;
font-weight: bold;
}
.str-table tbody tr:hover.rayhan-row3
{background-color:#8cab61;
font-weight:bold;
font-style:italic;
color:cyan;
}
.str-table tbody tr:hover.rayhan-row4
{background-color:lightblue;
font-weight: bold;
}
.str-table tbody tr.rayhan-row2{
height:200px;
width:100%;
}
.str-table tbody tr.rayhan-row {
font-weight: bold;
color: #009879;}
.str-table tbody tr:hover.rayhan-row
{background-color:#ffff99;
font-weight:bold;
font-style:italic;
color:#009926;
}
tr:hover{
background-color:#ffff99;
color:purple;
}
th, td {
border-style:solid;
border-color: #96D4D4;
}
</style>
</head>
<body>
<table class="str-table">
<tr class="rayhan-row">
<th>a<sub>2</sub> </td> <td colspan="3" rowspan="2">a<sup>2
</sup>+ b<sup>2</sup>
</th>
</tr>
<tr class="rayhan-row2"> <td rowspan="3"> <ol type="A">
<li>10</li>
<li>10</li>
</ol></td>
</tr>
<tr class="rayhan-row3">
<td><u>a</u></td>
<td>b</td>
<td rowspan="2"><a href="https://dailytorun.blogspot.com">Fb.Html</a></td>
</tr>
<tr class="rayhan-row4">
<td colspan="2"><img align="center" src="30.jpg" /></td>
</tr>
</table>
</body>
</html>
My First post){kind=link}
0 Comments