To create a table in an HTML document for displaying on a webpage, the following steps need to be adhered to. By following these guidelines, crafting a table becomes a straightforward task:
In the first step, we need to enter the HTML code into a text editor or open the current HTML file in the text editor where we intend to create a table.
<!Doctype Html>
<Html>
<Head>
<Title>
Make a Table
</Title>
</Head>
<Body>
Hello User! <br>
The Following table shows the student details
</Body>
</Html>
Next in line is to position the cursor between the body tag, specifying the exact location on the page where the table should be shown. Following that, enter the <table> tag at that precise spot.
<Body>
Hello User! <br>
The Following table shows the student details
<table>
</Body>
Step 3: Subsequently, we need to enter the <tr> element on the following line, signaling the start of a table row. This serves as the initial <tr> marker within the table, denoting the first row of the table.
<Body>
Hello User! <br>
The Following table shows the student details
<table>
<tr>
</Body>
Step 4: In this step, it is necessary to employ the <th> tag to specify the table's headings. Therefore, proceed by entering the <th> tag on the subsequent line.
<Body>
Hello User! <br>
The Following table shows the student details
<table>
<tr>
<th>
</Body>
Step 5: Next, enter the title of the initial heading that you want to place in the top cell of the first row. Once you have entered the title, remember to conclude the table heading using the closing </th> tag.
<Body>
Hello User! <br>
The Following table shows the student details
<table>
<tr>
<th>
Roll No.
</th>
</Body>
Step 6 involves a similar process to step 5, where we can include additional table headings using the designated <th> tag. Once all the necessary table headings have been added, it is important to properly conclude the initial row by closing the </tr> tag.
<Body>
Hello User! <br>
The Following table shows the student details
<table>
<tr>
<th>
Roll No.
</th>
<th>
Student Name
</th>
<th>
Marks
</th>
<th>
Address
</th>
</tr>
</body>
Step 7: Next, it is necessary to generate a fresh row for inputting values aligning with the column names. Therefore, proceed by inserting the <tr> tag on the subsequent line.
<Body>
Hello User! <br>
The Following table shows the student details
<table>
<tr>
<th>
Roll No.
</th>
<th>
Student Name
</th>
<th>
Marks
</th>
<th>
Address
</th>
</tr>
<tr>
</Body>
Step 8: In this step, we will utilize the <td> tag, which serves as a marker for the specific data or content intended for input into a single cell within a table. Proceed by entering the <td> tag on the subsequent line, following the format outlined in the example below.
<Body>
Hello User! <br>
The Following table shows the student details
<table>
<tr>
<th>
Roll No.
</th>
<th>
Student Name
</th>
<th>
Marks
</th>
<th>
Address
</th>
</tr>
<tr>
<td>
</Body>
Next, we need to assign a value to the initial column in the top cell of the following row. Once the value has been inputted, we must proceed to close the </td> tag.
<Body>
Hello User! <br>
The Following table shows the student details
<table>
<tr>
<th>
Roll No.
</th>
<th>
Student Name
</th>
<th>
Marks
</th>
<th>
Address
</th>
</tr>
<tr>
<td>
101
</td>
</Body>
In Step 10, similar to Steps 8 and 9, it is possible to add data from additional columns using the designated <td> marker. After inserting all the necessary values in the second row, the row can be closed by utilizing the closing <tr> tag.
<Body>
Hello User! <br>
The Following table shows the student details
<table>
<tr>
<th>
Roll No.
</th>
<th>
Student Name
</th>
<th>
Marks
</th>
<th>
Address
</th>
</tr>
<tr>
<td> 101
</td>
<td>
Arun
</td>
<td>
85
</td>
<td>
Mumbai
</td>
</tr>
</Body>
Step 11: Once all values have been added to each row, it is necessary to finalize the table using the </table> tag.
<!Doctype Html>
<Html>
<Head>
<Title>
Make a Table
</Title>
</Head>
<Body>
Hello User! <br>
The Following table shows the student details <br><br>
<table> <!-- The table tag which allows page to create a table. -->
<tr> <!-- First Row in the table -->
<th> <!-- First cell in first row which holds the column1 heading in the table -->
Roll No.
</th>
<th> <!-- second cell in first row which holds the column2 heading in the table -->
Student Name
</th>
<th> <!-- Third cell in first row which holds the column3 heading in the table -->
Marks
</th>
<th> <!-- Fourth cell in first row which holds the column1 heading in the table -->
Address
</th>
</tr> <!-- First Row is closed -->
<tr> <!-- Second Row starts in the table for entering the values of columns -->
<td> <!-- value in first Column -->
101
</td>
<td> <!-- value in Second Column -->
Arun
</td>
<td> <!-- value in third Column -->
85
</td>
<td> <!-- value in fourth Column -->
Mumbai
</td>
</tr> <!-- Second row is closed-->
<tr> <!-- Third Row starts in the table -->
<td>
102
</td>
<td>
Akshay
</td>
<td>
90
</td>
<td>
Goa
</td>
</tr> <!-- Third Row is closed -->
<tr> <!--Fourth Row starts in the table -->
<td>
103
</td>
<td>
Hrithik
</td>
<td>
95
</td>
<td>
Delhi
</td>
</tr> <!-- fourth row is closed -->
</table>
</Body>
</Html>
Step 12: Finally, it is necessary to save the HTML code and proceed to execute the file. Below is a screenshot displaying the result of the aforementioned HTML code: