- This head tag is the place where the metadata(data about the stored data of the document) is stored. It is the first element in an HTML document.
- This body tag is the place that is the core area of the HTML document.
- It includes the content of the page.
- It is used just once on an HTML page.
- This h2 tag is the heading of the HTML page. The value 2 specifies the degree of heading.
- There can be multiple headings in one document of different degrees (from higher to lower). Eg: <h1>,<h2>,<h3>,<h4>, and so on.
- This style tag is used to contain or link CSS styling of the HTML page using attributes such as media, type, and scoped.
- It is usually placed inside the head element.
- This table tag is used to form a structure of a table in an HTML document which can be further filled with data.
- This tr tag is used in HTML to hold the child inside it, i.e. data cells <td> and header cells <th>.
- This th tag specifies the heading for a row or column in an HTML page.
- The <th> tag is the child of <tr> elements.
The for Loop
- The document.getElementById() method in HTML DOM (Document Object Model), is the most common and easiest way of accessing the form elements in a HTML document.
- The insertRow() method is used in an HTML page to generate empty <tr> elements and then they added to the table.
- The insertCell() method is used in an HTML page to insert a particular cell inside a table.
The HTML Markup
- In line 4, first we will write the HTML code for the title of the HTML page using <title> tag inside.
- From 5 to 14, we styled the input cell border using <style> tag with attributes like border, outline, and font-size.
- In <h2> tag, we have styled using the text-align:left to place the heading on the left side of the HTML page.
- In line 20, we used the <table> tag to pass the ArrayList values later using the id=’fetch’ attribute.
- Also, we styled the table using some attributes like border, cellspacing, and cellpadding.
- In line 21, we have used <tr> tag to hold the children tags inside it and constitutes the body of the table.
- In line 22, we have used <th> tag that creates the heading for the rows and columns of a table, i.e. A, B, and C.
- In line 28, we have created an array that includes 15 elements, 3 in each row and 5 in each column.
- In line 33, we assigned the document.getElementById() method using the ID ‘fetch’ to another variable fetch that will be used later in loop iteration.
- In line 35, we will create a for loop for rows of the table.
- In line 36, we will create a variable newRow and assign the fetch.insertRow() method with fetch.length as a parameter to it.
- Inside the first for loop, between each iteration, the newRow will generate rows for row elements using ID ‘fetch’ of <table>.
- In line 37, inside the first for loop, we will create another for loop for columns in each row.
- In line 38, we create a variable cell and assign the insertCell() method to it.
- Inside the column loop, between each iteration, the newRow.insertCell() will generate empty columns in each row.
- In line 39, we use the innerHTML property to access the array[i][j] and read and write data and assign it to the corresponding empty rows and columns created above.