title: How to create a table from an array using javascript
body: <p>I am trying to figure out how I can transfer an array with multiple variables into an HTML table using only javascript. My javascript code so far is rendering everything onto the page and I don't want the tags like  and such showing. The result should look something like this <a href="https://i.stack.imgur.com/TOfIA.png" rel="nofollow noreferrer">[table_example_image]</a>.</p>
  <p>The instructions are:</p>
  <p>Using JavaScript, iterate through the items in the array, and dynamically display the collection within a table under the  section of your webpage.</p>
  <p>The entire table (including replacing any true/false text with actual images like in the example) and content should be generated and outputted with JavaScript.</p>
  <p>Within the table, create a  element for each of the properties in the array collection (for example title, author, alreadyRead) - column count and text should be dynamically generated based on JavaScript, and not &quot;hardcoded&quot;.</p>
  <p>Create and append a  for each value
  Use JavaScript to append and create the style rules for the table within the  section of the HTML document.</p>
  <p>Any tips would be appreciated!</p>
  <pre><code>    var books = [
      {
          title: 'The Stranger',
          author: 'Albert Camus',
          alreadyRead: true
      },
      {
          title: 'Binging with Babish',
          author: 'Andrew Rea',
          alreadyRead: true
      },
      {
          title: 'You Suck at Cooking: The Absurdly Practical Guide to Sucking Slightly Less at Making Food: A Cookbook',
          author: 'You Suck at Cooking',
          alreadyRead: false
      }];
  
  createTable();
  
  function createTable() {
      var table = document.createElement(&quot;table&quot;);  //makes a table element for the page
  
      table += &quot;&lt;tr class='firstRow'&gt;&lt;th&gt;Title&lt;/th&gt;&lt;th&gt;Author&lt;/th&gt;&lt;th&gt;Read?&lt;/th&gt;&lt;/tr&gt;&quot;;  //adds the first row that contains the sections for the table
  
      for (var i = 0; i &lt; books.length; i++)  //loops through the array 
      {
          //add info from the array into this
          table += &quot;&lt;tr&gt;&lt;td&gt;&quot; + books[i].title + &quot;&lt;/td&gt;&lt;td&gt;&quot;;
      }
  
      document.body.append(table);
  }
  </code></pre>