Anukulsahu/task3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task 3</title>
    <style>
        table{
            width: 50%;
            margin: 150px;
          
        }
        table, th,  td{
            border: 2px solid black;
            border-collapse: collapse;
            padding: 5px;
            min-width: 75px;
        }
        
        .center{
            margin-left: auto;
            margin-right: auto;
        }
        td{
            text-align: center;
            height: 40px;
            
        }
        
        #r2{
            background-color:darkgrey;
        }
        #r3{
            background-color: yellow;
        }
        #r4{
            background-color: yellow;
        }
       
        
    </style>
</head>
<body>
    <table class="center" >
       <colgroup>
        <col span="1" style="background-color: orange;">
       </colgroup>
       
       <colgroup>
        <col span="2" style="background-color: rgb(73, 180, 222);">
      </colgroup>

      <colgroup>
        <col span="1" style="background-color: rgb(49, 180, 49);">
       </colgroup>
        <tr >
            <td >10</td>
            <td>20</td>
            <td>30</td>
            <td>40</td>
        </tr>
        <tr>
            <td>50</td>
            <td colspan="2" id="r2">Colored Table</td>
            <td>6</td>

        </tr>
        <tr>
            <td>70</td>
            <td rowspan="2" id="r3">80</td>
            <td rowspan="2" id="r4">90</td>
            <td>10</td>
        </tr>
        <tr>
            <td>110</td>
            <td>12</td>
        </tr>
        <tr>
            <td>130</td>
            <td>140</td>
            <td>50</td>
            <td>16</td>
        </tr>
    </table>
</body>
</html>