- 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 input tag is the parent tag of the forms used in an HTML document.
- It can fetch and store diverse inputs.
- For example: <input type=”text” >, <input type=”password” >, <input type=”checkbox” >,<input type=”radio” >,<input type=”submit” >, and so on.
- This button tag specifies the clickable button in an HTML page with a particular attribute associated with it.
- There are a number of type attributes that the button tag can contain.
- For example: autofocus, form_id, name,value, and so on.
- This p tag is responsible for inserting a paragraph section in an HTML page.
- This div tag is used as a division in an HTML document.
- 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 small tag is used to insert a hint or comment or side note which is not necessarily of use but can be helpful.
- 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 if Statement
The for Loop
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 21, we have used <button> tag to submit input from the user using the id=’fetch’ attribute.
- Also, we will put a text Create to be displayed on the button on the HTML page.
- In line 22, we have used <p> tag for inserting a paragraph in the body with <small> tag to display a note to the user.
- The note will be useful to inform the user that in case no values are entered, the HTML page will create a 10×10 table by default.
- In <div> tag, we have used id=’container’ attribute that will contain the entered value by the user as input.
- In line 25, we have used document.getElementById() method which returns the input element object with ID ‘fetch’. So, we can now access the input elements.
- In line 26 and 27, variables rows and cols are defined and values fetched from the user input is assigned in them respectively using getElementById().value to generate the dynamic table further.
- From line 28 to 31, we used the if statement to make sure that if no values are entered, then by default the values of both rows and cols will be equal to 10.
- In line 32, we defined a variable output and assigned a table to it.
- Also, in line 32, we styled the table using some attributes like border, cellspacing, and cellpadding.
- In line 35, inside the function, we will create a for loop for rows of the table.
- In line 36, inside the first for loop, between each iteration, the output will generate rows for row elements using <tr>.
- In line 37, inside the first for loop, we will create another for loop for columns in each row.
- In line 38, inside the column loop, between each iteration, the output will generate columns in each row and store data using <td>, and also take data input from the user using <input> with type attribute stating a text input data.
- After the loops are closed, the output is updated each time in line 40 and line 42.
- In line 43, we will update the ID ‘container’ using the output from the function.
- In line 45, we finally call the createTable() function.