<<Previous Post << Complete Tutorial>> Next Post>>
In the previous posts, we have understood the below HTML basics:
- > HTML Structure
- > Also understand the previous posts on HTML in this tutorial for understanding the HTML basics (Click here to get started on HTML Basics for Selenium)
Once you have understood the above HTML Structure and other HTML Basics, you can now understand the steps for adding Table to the Web Page using HTML.
Before understanding the steps for adding the table to the Web Page, I will explain about the table that I am going to add.
The following is the table that I am going to add to the web page:
| ID | Name |
|---|---|
| 001 | Arun |
| 002 | Varun |
| 003 | Tharun |
Understand the below things from the above table:
There are four rows in the table as shown below:
There are 2 columns in the table as shown below:
The table has a border:
The first row in the table contains table headings:
The other rows in the table contain table data:
We have now understood what exactly is a table and also the table that we are going to build in HTML and add to the web page.
Let’s get started
HTML for Selenium (Part 15) – Adding Table to the Web Page
Follow the below steps for adding Table to the Web Page using HTML.
1) Before I explain in detail, the following is the HTML code for adding a table to the web page:
<table border='1'> <tr> <th>ID</th> <th>Name</th> </tr> <tr> <td>001</td> <td>Arun</td> </tr> <tr> <td>002</td> <td>Varun</td> </tr> <tr> <td>003</td> <td>Tharun</td> </tr> </table>
2) Download the Document having HTML structure from here (Download here)
3) Open the above-downloaded Document in NotePad++ as shown below:
4) Add <table> ..</table> tags as shown below:
5) As we need to add four rows to the table, let’s add four sets of <tr> </tr> tags to the table as shown below:
6) To add two columns to the table, lets add two sets of <td> </td> tags under each and every <tr> tags set,as shown below:
7) Let’s add table headings and table data to the above <td> </td> cells as shown below:
8) Save the above HTML code, Right click on the above-saved HTML file, select ‘Open’ option and observe the below:
Observe that the table headings and data are displayed in tabular format, but there is no table border.
Let’s add table border in the below step.
9) Let’s add the table border by providing the border=’1′ attribute in the <table> tag as shown below:
10) Save the above HTML code, Right click on the above-saved HTML file, select ‘Open’ option and observe the below:
Observe that the table with heading and data are displayed in tabular format along with border this time.
But, the table headings and table data are in the same font.
Let’s follow the below step for differentiating the table heading from the table data.
11) Change the <td> </td> tags for table heading data to <th> </th> tags as shown below:
12) Save the above HTML code, Right click on the above-saved HTML file, select ‘Open’ option and observe the below:
Here concludes our articles on HTML basics for Selenium. In the upcoming posts, we will start learning Locators concepts for Selenium. HTML Basics learned so far will help you in understanding the Locators concepts better.
Next Steps:
- > To learn more about Selenium, continue to the next post (Click on Next Post link below)
- > Check complete Selenium Tutorial Contents here (Click here)
Please leave your questions/comments/feedback below.
Happy Learning ?
On a mission to contribute to the Software Testing Community in all possible ways.
<<Previous Post << Complete Tutorial>> Next Post>>