JSFiddle - React, Tailwind, and code Playground

HTML

<table></table>

CSS

td { width:20px; height:20px; border:1px solid grey; }
.x { background-color: #aaa }

JavaScript

var X = 20;
var X2 = X/2;
var X22 = X2/2;

for (i=0; i<=X; i++) {
    $('table').append('<tr>');
    
    for (j=0; j<=X; j++)
        ((i==X2 && j>=X22 && j<=X2+X22) ||
            (j==X2 && i>=X22 && i<=X2+X22)) ?
                        $('tr:last').append('<td class="x"></td>') : 
                            $('tr:last').append('<td></td>');
    
    $('table').append('</tr>'); 
}