JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>

<table border id = "mytable">
    <tr>
        <td> Cats/dogs</td>
    </tr>
</table>    
</body>
</html>

JavaScript

var cats = [ "a", "b", "c", "d", "e", "f"];
var dogs = [ "z", "y", "x", "w"]

var numberOfRows = cats.length;
var numberOfColumns = dogs.length;

cats.forEach(function (cat) {
	$("#mytable").append(`<tr id="${cat}">`)
  dogs.forEach(function (dog) {
  	$(`#${cat}`).append(`<td>${cat},${dog}</td>`)
  })
})