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) || (Math.abs(i - X2) + Math.abs(j - X2) <= X22)) ? $('tr:last').append('<td class="x"></td>') : $('tr:last').append('<td></td>');
    }
}
    $('table').append('</tr>');