JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tfoot>
        <tr>
            <td> tfoot
    <tbody>
        <tr>
            <td> tbody
            
    <thead>
        <tr>
            <th> thead
                    
</table>

JavaScript

var cards = new Array( '2-ch', '2-bu', '2-kr', '2-pi',
                       '3-ch', '3-bu', '3-kr', '3-pi',
                       '4-ch', '4-bu', '4-kr', '4-pi',
                       '5-ch', '5-bu', '5-kr', '5-pi',
                       '6-ch', '6-bu', '6-kr', '6-pi',
                       '7-ch', '7-bu', '7-kr', '7-pi',
                       '8-ch', '8-bu', '8-kr', '8-pi',
                       '9-ch', '9-bu', '9-kr', '9-pi',
                       '10-ch', '10-bu', '10-kr', '10-pi',
                       'v-ch', 'v-bu', 'v-kr', 'v-pi',
                       'd-ch', 'd-bu', 'd-kr', 'd-pi',
                       'k-ch', 'k-bu', 'k-kr', 'k-pi',
                       't-ch', 't-bu', 't-kr', 't-pi'
                      );

var i = 0, j = 0, l = cards.length;
var tbl = '<table>';
// создаем table
for (; i < l; i+=4, j = 0) {
    // создаем tr
    tbl += '<tr>';
    for (; j < 4; j++) {
       // создаем td
       // добавлем td в tr
        tbl += '<td>' + cards[i+j];
       console.log(cards[i+j]);            
    }
    // добавляем tr в table
}

tbl += '</table>';

document.write(tbl);