The table:
We can see the table, although it is a table, still looks rudimentary. Also, above the table is a row of commas. Let's firstly get rid of the commas, then look at styling the table a little better.
Why are the commas there?
We are displaying the [arrays] as "strings", the commas that separate each value are being treated as part of the
[arrays], and are thus being displayed at the top of the table.
We are going to use the .replace() method with two arguments to remove these commas. The first argument is to look for all instances of
the commas, while the second is to replace them. We can simply append this method to the end of our code:
Above, we have simply appended the following before the last semi-colon:
/,/g is the first argument. The /,/ is a regular expression that means "look for" and in this case, commas.
g means "all instances".
"" is the second argument, and means simply an empty "string".
We have also done the same, looking for the _ in the headers and replacing them with an empty space:
Amend part of writeToDocument() so display up to 35 characters, and if that entry hss more than 35 characters, to
append (...):
It would also be nice to have each table header in capitals.
We can do this, again in the same line of code, using the .toUpperCase() method:
Add some CSS styling to make some borders and add some padding, both around the table and around each cell:
So let's see how the table looks now: