How To Create Table In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of how to create table in JavaScript, here we needs to create elements of ‘table,tr,th,td’ for creating table.
We know for create table we need ‘table,header,row,columns’ so we created element of table, row ‘tr’, table header ‘th’ and we appended heading into ‘th’ by innerHTML.
Now we have to adds every element with each other by appendChild() method then we finally we needs to add table to body of webpage.
Step By Step Guide On How To Create Table In JavaScript :-
Here we needs to create table elements ‘table,th,tr,td’ one by one by ‘createElement()’ method and for insert text into table columns ‘td’ by ‘innerHTML’.
Now we have to add columns of ‘th,td’ and adds columns to the table row ‘tr’ and needs to add that ‘tr’ to table ‘table’ then we needs to add whole table to body of webpage by appendChild() method.
<!DOCTYPE html>
<html>
<head>
<title>CREATE TABLE USING JAVASCRIPT</title>
</head>
<body>
<script>
let tbl=document.createElement('table');
tbl.border=1;
let hrow=document.createElement('tr');
let th1=document.createElement('th');
let th2=document.createElement('th');
th1.innerHTML="Name";
th2.innerHTML="Total Marks";
hrow.appendChild(th1);
hrow.appendChild(th2);
let row2=document.createElement('tr');
let td1=document.createElement('td');
let td2=document.createElement('td');
td1.innerHTML="Prawin";
td2.innerHTML="454";
row2.appendChild(td1);
row2.appendChild(td2);
tbl.appendChild(hrow);
tbl.appendChild(row2);
document.body.appendChild(tbl);
</script>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defined variable ‘tbl’ for store created element ‘table’ and ‘border’ property we adds into variable ‘tbl’ for sets table border to ‘1’.
- For header row we created ‘tr’ element and stored on variable ‘hrow’ with two header columns created ‘th’ then stored on variables ‘th1,th2’. We sets texts of ‘Name, Total Marks’ on variables ‘th1,th2’ by innerHTML.
- Finally we added columns ‘th1,th2’ on row ‘hrow’ by appendChild() method and same as we defining second row ‘tr’ created stored on variable ‘row2’, two columns ‘td’ created then stored on variable ‘td1,td2’.
- Using innerHTML we sets texts of ‘Prawin, 454’ on variables ‘td1,td2’ then we added columns to row ‘row2’ then both rows added on table variable ‘tbl’ by appendChild() method.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to create table using javascript.
When we executes program on browser we can see table with two rows and two columns with data’s ‘(Name,Total Marks),(Prawin,454)’. Here ‘(Name,Total Marks)’ refers header of table then next data considered as table data.
If you need more numbers of data’s means do the common steps repeatedly with some other details so we gets more number of records table.
I hope this tutorial on how to create table in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
