<!-- https://www.sitepoint.com/community/t/table-rows-not-showing-on-own-lines/395429/9 -->
<div id='friends'></div>
thead {
  background-color: #3f87a6;
  color: #fff;
}

tbody {
  background-color: #e4f0f5;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(200, 200, 200);
  letter-spacing: 1px;
  font-family: sans-serif;
  font-size: .8rem;
}

td,
th {
  border: 1px solid rgb(190, 190, 190);
  padding: 5px 10px;
  text-align: left;
}
const friends = TAFFY([
	{"id":1,"gender":"M","first":"John","last":"Smith","city":"Seattle, WA"},
	{"id":2,"gender":"F","first":"Kelly","last":"Ruth","city":"Dallas, TX"},
	{"id":3,"gender":"M","first":"Jeff","last":"Stevenson","city":"Washington, D.C."},
	{"id":4,"gender":"F","first":"Jennifer","last":"Gill","city":"Seattle, WA"}	
]);

const createTable = (friends) => (`
  <table>
    <thead>
        <tr>
            <th>Name</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
      ${
        friends.map(({ first, last, city }) => {
          return `<tr><td>${first} ${last}</td><td>${city}</td></tr>`
        }).join('\n')                         
      }
    </tbody>
  </table>
`)

const femaleFriends = createTable(friends({gender: 'F'}))
document.querySelector('#friends').innerHTML = femaleFriends
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js