JavaScript Table Tutorial

For the first tutorial of this blog I will be demonstrating how to create a simple table with colours and border styles in JavaScript. Before styling the table I will first show you how to make the table. See the image below for the end product of the following code:

This is a simple table of information which could be used by business for information on their customers. I have three rows of information with the headings of name, date of birth and country of residence. Lets get into the code!

This is the html code for a basic table. The green lines of code are just comments to help the reader understand the code. The items in the style table edit how the table visually looks. The div element is essentially where the table is stored on the html file. The script part is how the JavaScript and the html file are linked. Now lets take a look at the JavaScript code.

Just to reiterate, the green text does not need to be added it just helps people to read the code. This table is a 3 x 7 which you can edit to your liking. The <th> means table header which would be at the top of the table. The <td> defines a normal data cell in the table. It is worth noting that this code is HTML but is essentially being written as text in the JavaScript file and then being converted into the HTML file which then reads the text and understands it as code. Lets move on to styling the table

All styling of the table must be written between the <style> and </style>. There are many border types such as dotted (gives a dotted border), dashed (gives a dashed border), solid (gives a solid border), ridge (gives a 3D ridged border), etc. All colours have their own special number which is written with a hashtag. This is called the hex code. As an example, teal would be #008080. Here is a sample styled table.

Notice how typing the colour red will work. Some colours such as red, green and blue can be typed instead of using the # number. See below for a differently styled table.

 

See how different this table is to the red one? Styling the table even slightly differently can have a huge effect on the table. Now you have a table!