Navigate to https://money.rediff.com/index.html

Click ‘More gainers’ link that you see in below figure

You get a list of all the companies, see below figure

This is an example of Webtable, it is a kind of an excel file where elements are present in a systematic tabular manner.

Right click & inspect this Webtable, you will see that this webtable is under ‘<table>’ tag

If you hover over <table class=”dataTable”>, the entire Webtable is highlighted

So, table is the parent tag of all the webtables

Inside the <table> tag we have 2 immediate child tags as shown below: thead and tbody 

When we expand the thead tag, we can see that it contains the tr tag (r stands for row)

When we mouse hover over tr, we would see entire first row getting highlighted, see below 

Expand <tr> tag, it contains <th> tags (th for table headings)

When we mouse hover over any <th> tag, the respective table heading gets highlighted. 

For example, mouse hover <th>Current Price (Rs)</th>, notice that ‘Current Price (Rs)’ column name gets highlighted

Similarly you can mouse hover other <th> tags.

Now let us expand <tbody> tag. It contains various tr tags corresponding to each row. So each tr tag represents table row. So if you mouse hover any tr tag, you see the respective company row getting highlighted, see below

Let us expand <tr> tag. It contains td tag that holds the data of a particular cell. So if you mouse hover over <td>18.88</td>, you see that 18.88 getting highlighted

Webtable hierarchy can thus be represented as below:

Let us try to create few custom xpaths for the webtable.

We earlier saw that the table tag has “class” attribute having the value ‘dataTable’

Execute the below custom xpath in SelectorsHub

This will select the entire webtable as shown below

Let us now extend this custom xpath by appending tbody tag that in turn contains tr tag that in turn contains td tag

See that all the rows and columns get highlighted

Below xpath would highlight 5^th cell data of 4th row 

Below xpath would highlight entire 4th row

Below xpath would highlight all the individual cells of 4th row

Below xpath represents all the rows

Let us say we want to print the ‘Current price’ of ‘JK Lakshmi Cement L’



Let us copy the text ‘JK Lakshmi Cement L’ from website page and create new class. Paste the company name in a string variable


Xpath of entire first column (company names) would be: 

This will give us a list of all the companies

Now we will extract all the values of first column (since first column gives us company name) using “findElements” method that returns us a ‘List’ (we have to import java.util.List)

Let us use a ‘for’ loop to print all the values (company names) 

Run script, all the company names are printed

Similarly the xpath //table[@class=’dataTable’]/tbody/tr/td[4] will extract all the current prices (since column 4 gives us current price)

So we can write


Now we can print each company & its corresponding current price

Run, all companies along with their respective current prices get printed

We are only interested in ‘JK Lakshmi Cement L’, so we can put a simple ‘if’ condition inside the ‘for’ loop. This ‘if’ condition will check, if the “cName” that we have defined in line#13 equals the “cNames” that we are fetching inside the ‘for’ loop. Once both match, we will print the o/p

Run, notice that only desired value is printed 

Below is complete source code

This is how we can handle webtables using selenium webdriver. 

Thanks!