HomeSelenium

HTML for Selenium (Part 15) – Adding Table to the Web Page

HTML for Selenium (Part 15) – Adding Table to the Web Page

<<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:

Table - Rows

There are 2 columns in the table as shown below:

Table - Columns

The table has a border:

Table - Border

The first row in the table contains table headings:

Table - Headings

The other rows in the table contain table data:

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:

Table - Edit with NotePad

4) Add  <table> ..</table> tags as shown below:

Table - table tags

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:

Table - tr tags

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:

Table - td tags

7) Let’s add table headings and table data to the above <td> </td> cells as shown below:

Table - table data and headings

8) Save the above HTML code, Right click on the above-saved HTML  file, select ‘Open’ option and observe the below:

Table - table without border

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:

Table - border 1

10) Save the above HTML code, Right click on the above-saved HTML  file, select ‘Open’ option and observe the below:

Table - table with border displayed

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:

Table - th tags

12) Save the above HTML code, Right click on the above-saved HTML  file, select ‘Open’ option and observe the below:

Table - table headings displayed

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 ?

About Me > Arun Motoori

On a mission to contribute to the Software Testing Community in all possible ways.

<<Previous Post                            << Complete Tutorial>>                              Next Post>>

Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *

For FREE Testing Tutorials & Videos

X
Open chat
Contact Us on Whatsapp