JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Correct use of colspan and rowspan</h1>
<table id="correct">
    <tr>
        <td>a</td>
        <td>b</td>
        <td rowspan="2">c</td>
    </tr>
    <tr>
        <td colspan="2">d</td>
    </tr>
</table>

<h1>Wrong use of colspan and rowspan: both are too small</h1>
<table id="wrong1">
    <tr>
        <td>a</td>
        <td>b</td>
        <td rowspan="1">c</td>
    </tr>
    <tr>
        <td colspan="1">d</td>
    </tr>
</table>

<h1>Wrong use of colspan and rowspan: both are too big</h1>
<table id="wrong2">
    <tr>
        <td>a</td>
        <td>b</td>
        <td rowspan="3">c</td>
    </tr>
    <tr>
        <td colspan="3">d</td>
    </tr>
</table>

<h1>Wrong use - overlapping cells</h1>
<table id="wrong3">
    <tr>
        <td>a</td>
        <td rowspan="2">b</td>
        <td>c</td>
    </tr>
    <tr>
        <td colspan="4">d</td>
    </tr>
</table>

CSS

h1 {
    margin: 20px 0 10px 0;
    font-size: 18px;
    font-weight: bold
}

table td {
    border: 1px solid grey;
    padding: 4px;
}

JavaScript

function validateTable(id){
    var rows = document.getElementById(id).tBodies[0].rows;
    var totalCells=0;
    // total rows and columns
    var totalRows=rows.length;;
    var totalColumns=0;;
    var foundCells=new Array();    
    var maxRows=rows.length;
    var maxColumns=0;
    var maxCellIndex = 0;
    // First we get totalRows and totalColumns
    for(var i=0;i<rows.length;i++){     
        totalColumns = Math.max(totalColumns,rows[i].cells.length);
    }
    
    // The matrix now should be totalRows x totalColumns
    for(var i=0;i<totalRows;i++){
        for(var j=0;j<totalColumns;j++){
            maxCellIndex = (i*totalColumns)+j;
            foundCells[ maxCellIndex ] = 0;
        }
    }
    
    for(var i=0;i<rows.length;i++){     
        maxColumns = Math.max(rows[i].cells.length,maxColumns);
        for(var j = 0;j<rows[i].cells.length;j++){
            var cellPosition = (i*totalColumns)+j;
            var cols=0;
            var tcells=0;
            cols = parseInt( rows[i].cells[j].rowSpan );           
            tcells = parseInt( rows[i].cells[j].colSpan );
            if(tcells>0){
                for(var k=0;k<tcells;k++){
                     foundCells[cellPosition + k] = 1; 
                }
            }
            if(cols > 0){
               for(var k=0;k<cols;k++){
                     foundCells[cellPosition + (k*totalColumns)  ] = 1;
                }
            }
           // totalCells += ( tcells * cols) ;
        }        
    }     
    var allCellsAlignedCorrectly=true;
    for(var n=0;n<=maxCellIndex;n++){        
       if(isNaN(foundCells[n]) || parseInt(foundCells[n]) == 0){
          allCellsAlignedCorrectly = false;
       }
    }
for(var n=0;n<=foundCells.length;n++){
    if(!isNaN(foundCells[n])){
          totalCells+=foundCells[n];
    }
}
    // alert(foundCells);
    // alert(totalCells+":"+totalColumns+":"+totalRows);
    return (((totalCells) == (maxRows*maxColumns)) &...