Formatting A Table Generated With An Array In JavaScript

Question

I can't seem to figure out what I should be doing here. I've created a code block for testing, that generates a table based off of some random numbers and input from the user(this will come later and is not present in the current code block). The random numbers are generated and stored in variables that are then kept in a two dimensional array.

I've figured out how to generate a simple table using two for loops and document writing, however i would like to format the end result with a border and some interior padding. I cannot figure out to do this.

Code:

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <link href="styles.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap&" rel="stylesheet">
  <script>
    function main() {
      var x = 10; // 2 decimals
      var b1 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b2 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b3 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b4 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b5 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s1 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s2 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s3 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s4 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s5 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var n1 = "Newman"
      var n2 = "Sally"
      var mainArr = [
        [n1, b1, b2, b3, b4, b5],
        [n2, s1, s2, s3, s4, s5]
      ];

      document.write("<table>")
      document.write("<tr><td>Employee</td><td>Monday</td><td>Tuesday</td><td>Wednesday</td><td>Thursday</td><td>Friday</td>")

      for (var i = 0; i < mainArr.length; i++) {
        var arrInd = mainArr[i];
        document.write("<tr>")
        for (var j = 0; j < arrInd.length; j++) {
          document.write("<td>" + mainArr[i][j] + "</td>");
        }
      }
      document.write("</table>")
    }
  </script>
</head>

<body onload="main()">
</body>

</html>

I have looked on Stack already, as-well-as several other sites, and while the information presented seems to make sense, I haven't had luck trying to integrate code from them, into my code. Ex: document.CreateElement("table") and so forth. It seems like it should work, however as has been the trend with most of my questions on Stack thus far, I think I may be having a hard time understanding the logic of how it works.

tl;dr: I would like help formatting the table generated with the above code, specifically a simple border and some cell interior padding.

Thanks in advance.

This code works. If this isn't the code you're having trouble with, post the code your question is really about. — Barmar, Jul 18 '19 at 03:38
You can use CSS to style the table, you don't need any changes to this code. — Barmar, Jul 18 '19 at 03:38
However, you should read [Why is document.write considered bad practice](https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) — Barmar, Jul 18 '19 at 03:39
I understand the code works to generate a table. I'm asking about how to format the table while or after it has been generated. — Dev-MDW2, Jul 18 '19 at 03:39
I know, however from my understanding CSS doesn't work with the document.write method. As far as why I'm using document.write, it's just for a simple proof of concept for my manager at his point in time. — Dev-MDW2, Jul 18 '19 at 03:41
See my answer, you can write CSS with `document.write()`, just like any other part of the document. — Barmar, Jul 18 '19 at 03:45
Why write CSS, why not just put the CSS in your style sheet and it will be used. This feels like painting a car while it is going down the street at each stop sign — Mark Schultheiss, Jul 18 '19 at 12:30
You really should look at and understand `document.createElement('table');` and how to create elements and append to a page. — Mark Schultheiss, Jul 18 '19 at 16:07

score 4 · Accepted Answer · answered Jul 18 '19 at 03:45

Add CSS to your page.

Since you're rewriting the page in main(), you have to add the CSS with document.write() as well. It would be better if you learned how to modify the DOM.

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <link href="styles.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap&" rel="stylesheet">
  
  <script>
    function main() {
      var x = 10; // 2 decimals
      var b1 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b2 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b3 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b4 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b5 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s1 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s2 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s3 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s4 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s5 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var n1 = "Newman"
      var n2 = "Sally"
      var mainArr = [
        [n1, b1, b2, b3, b4, b5],
        [n2, s1, s2, s3, s4, s5]
      ];

      document.write("<table>")
      document.write("<tr><td>Employee</td><td>Monday</td><td>Tuesday</td><td>Wednesday</td><td>Thursday</td><td>Friday</td>")

      for (var i = 0; i < mainArr.length; i++) {
        var arrInd = mainArr[i];
        document.write("<tr>")
        for (var j = 0; j < arrInd.length; j++) {
          document.write("<td>" + mainArr[i][j] + "</td>");
        }
      }
      document.write("</table>")
      document.write(`<style>
  table, th, td {
 border: 1px solid black;
}
</style>`);
    }
  </script>
</head>

<body onload="main()">
</body>

</html>

score 1 · Answer 2 · answered Jul 18 '19 at 03:59

I altered this code to create a black border around your table. document.write("<table style='border: 1px solid black'>")

If you want more then you can do the same for each block created in your tr or td element

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <link href="styles.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap&" rel="stylesheet">
  <script>
    function main() {
      var x = 10; // 2 decimals
      var b1 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b2 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b3 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b4 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var b5 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s1 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s2 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s3 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s4 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var s5 = Math.floor(Math.random() * (8 * x - 1 * x) + 1 * x) / (1 * x);
      var n1 = "Newman"
      var n2 = "Sally"
      var mainArr = [
        [n1, b1, b2, b3, b4, b5],
        [n2, s1, s2, s3, s4, s5]
      ];

      document.write("<table style='border: 1px solid black'>")
      document.write("<tr><td>Employee</td><td>Monday</td><td>Tuesday</td><td>Wednesday</td><td>Thursday</td><td>Friday</td>")
      //const tbody = document.getDocumentById("<tbody>")
      //tbody.setAttribute("style", "border: 1px solid blue;")
      for (var i = 0; i < mainArr.length; i++) {
        var arrInd = mainArr[i];
        document.write("<tr>")
        for (var j = 0; j < arrInd.length; j++) {
          document.write("<td>" + mainArr[i][j] + "</td>");
        }
      }
      document.write("</table>")
    }
  </script>
</head>

<body onload="main()">
</body>

</html>

Formatting A Table Generated With An Array In JavaScript

2 Answers2