javascript – Populating a table with JS

Question:

//Есть объект:

var section = {
  link: [],
  filename: [],
  name: [],
  author: [],
  material: [],
  scale: [],
  date: [],
  museum: [],
  city: [],
  notation: [],
};

console.log(section);
for (property in section) {
  section[property].forEach(function(item) {
    $('#painting > tbody:last-child').append('<tr><td>' + item + '</td></tr>');
  });
}

<table id="painting" cellspacing="2" border="1" cellpadding="5">
  <thead>
    <tr>
      <th>Имя файла</th>
      <th>Название</th>
      <th>Автор</th>
      <th>Материал</th>
      <th>Размеры</th>
      <th>Дата создания</th>
      <th>Музей</th>
      <th>Страна, город</th>
      <th>Примечание</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

After filling it, I get arrays (the number of elements in them is equal, respectively). Then I try to fill in the table:

And only the first column ("File name") is filled with all values. How can I fill in the table correctly?

Answer:

<table id="painting" cellspacing="2"  border="1" cellpadding="5">
  <thead>
    <tr>
      <th>Имя файла</th>
      <th>Название</th>
      <th>Автор</th>
      <th>Материал</th>
      <th>Размеры</th>
      <th>Дата создания</th>
      <th>Музей</th>
      <th>Страна, город</th>
      <th>Примечание</th>
    </tr>
  </thead>
  <tbody>
  <tr>
  </tr>
  </tbody>
</table>

for (property in section) {
  section[property].forEach(function(item) {
    $('#painting > tbody tr:last-child').append('<td>' + item + '</td>');
  });
}