1 Answers

The table that you have given is a really bad representation of data. I would suggest you rather try some Data Normalization (try googling 1NF, 2NF, etc..) on your data before trying to put this up.

What you typically need to learn for this in HTML tables, are rowspan, colspan. However, if this is exactly how you need it to be , then you can use this code:

<!DOCTYPE html>
<html>
<head>
    <style>
        h3 {
            text-align: center;
        }

        table, th, td {
          border: 1px solid black;
          border-collapse: collapse;
          width: 300px;
        }
        
        table {
            margin-left: auto;
            margin-right: auto;
        }
        
        th, td {
            text-align: center;
        }
    </style>        
</head>

<body>

    <H3>How can we design this HTML table which is shown in image. using table in html? Help me to make this table</H3>
    
    <table>
        <caption> The Really Weird Table</caption>
        <!--1st row-->
        <tr>
            <th colspan="6">A</th>
            <th colspan="6">B</th>
        </tr>
    
        <!--2nd row-->
        <tr>
            <td colspan="2">C</td>
            <td colspan="2">D</td>
            <td colspan="2">E</td>
            <td colspan="6" rowspan="2">F</td>
        </tr>
    
        <!--3rd row-->
        <tr>
            <td colspan="3">G</td>
            <td colspan="3">H</td>
        </tr>
    
        <!--4th row-->
        <tr>
            <td colspan="6">I</td>
            <td colspan="6">J</td>
        </tr>
    
        <!--5th row-->
        <tr>
            <td colspan="12" >K</td>
        </tr>
    
        <!--6th row-->
        <tr>
            <td colspan="6">L</td>
            <td colspan="6">M</td>
        </tr>
    
    </table>    

</body>
</html>

IFaceErrors0
Related