How to get position with XPath? - html

Let's say I have this HTML structure:
<table>
<tr>...</tr>
<tr>...</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td>222</td>
</tr>
</table>
What will be right XPath if I need to find number of <tr> tags from first <tr> to <tr> tag which has /td[text()='111']
In my example number of <tr> tags will be 3.
And result will be 4 if we want to see number of <tr> from beginning to <tr> which has "/td[#text='222']"


This XPath
count(//tr[td ='111']/preceding-sibling::tr) + 1
applied against this markup
<table>
<tr>...</tr>
<tr>...</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td>222</td>
</tr>
</table>
will return
3
as requested.

Related

How to align <td>s from 1 table against another?

I'm new to HTML/CSS, and I'm having a hard time aligning the Opening days, hours, closing days of the Chicken shop against the Open, Hours, and Close from the table. I want the days and time to align directly below each category. Such as Open (Sun/Mon..), Hours (9-3pm), Close (Tues/Fri). Below are my codes, any advise would be greatly appreciated!!! Thank you!!!
<table id="shops">
<tr>
<th>Shops</th>
<th>Location</th>
<th>Store Hours</th>
<th>Products</th>
</tr> <!-- Nested table for store hours and product types-->
<tr>
<td colspan="2"></td>
<td>
<table id="hours_table">
<tr>
<th>OPEN</th>
<th>HOURS</th>
<th>CLOSE</th>
</tr>
</table>
</td>
<td>
<table id="products_table">
<tr>
<th>Animals</th>
<th>Cost</th>
<th>Items</th>
<th>Cost</th>
</tr>
</table>
</td>
</tr>
<tr>
<td id="chicken_shop">Cuckoo House Chicken Shop</td>
<td>West Natura</td>
<td>
<table id="chicken_hours">
<tr>
<td>SUN/MON/WED/THURS/SAT</td>
<td>9AM - 3PM</td>
<td>TUES/FRI</td>
</tr>
</table>
</td>
</table>

Hi here is the solution:
<table id="shops" border='1'>
<tr>
<th>Shops</th>
<th>Location</th>
<th>Store Hours</th>
<th colspan="4">Products</th>
</tr> <!-- Nested table for store hours and product types-->
<tr>
<td id="chicken_shop">Cuckoo House Chicken Shop</td>
<td>West Natura</td>
<td>
<table width="333" id="hours_table" border='1'>
<tr>
<td>OPEN</td>
<td>HOURS</td>
<td>CLOSE</td>
</tr>
<tr>
<td>SUN/MON/WED/THURS/SAT</td>
<td>9AM - 3PM</td>
<td>TUES/FRI</td>
</tr>
</table>
</td>
<th>Animals</th>
<th>Cost</th>
<th>Items</th>
<th>Cost</th>
</tr>
</table>

Instead of using <th> you have to use <td> even if it is part of the table head.
<table>
<thead>
<tr>
<td>Shops</td>
<td>SOmethng</td>
<td>Something#2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Something in the body of the table</td>
<td>something</td>
<tdSomething</td>
</tr>
</tbody>
</table>
I suggest using w3schools.com for additional info.Also you can add borders in case you want some borders around it.

Extract specific tags and bundle remaining into one in HTML

So lets say, in a HTML snippet, I have some non-table tags, then a <table> tag, then some non-table tags, then another <table> tag and so on.
What I wanna do is get the first set of non-table tags into one group, then the table section in another and the next set of non-table tags into another and so on.
I have tried using regex. It is becoming superly complicated. I have tried searching how to do using BeautifulSoup but no use.
And also, if I have to extend it to ordered <ol> and unordered <ul> sections, how can I do it?
For example: I have this (HTML) string:
<h2>Hello There.</h2>\n
<p>
Click ME </p>
<p>Lets have a coffee</p>\n
<table>
<tbody>
<tr>
<th>Drink</th><th>Cost</th></tr>
</tbody>
<tbody>
<tr>
<td>Coffee</td><td>152.61 </td> </tr>
<tr>
<td>Coke</td><td>62.56</td> </tr>
<tr>
<td>Pepsi</td><td>21.71</td> </tr>
</tbody>
</table>
<p>
So? click me too. Here is another list</p>
<table>
<tbody>
<tr>
<th>Food</th><th>cost</th></tr>
</tbody>
<tbody>
<tr>
<td>Bhel</td><td>25.5</td> </tr>
<tr>
<td>Puri</td><td>23.0</td> </tr>
<tr>
<td>Something</td><td>19.4</td> </tr>
<tr>
<td>Pani</td><td>17.12 </td> </tr>
<tr>
<td>Puriya</td><td>10.64 </td> </tr>
<tr>
<td>Done</td><td>9.21</td> </tr>
<tr>
<td>Rice</td><td>9.20 </td> </tr>
</tbody>
</table>
<p>This amazing collection is here.</p>
Required Result:
[<h2>Hello There.</h2>
<p>
Click ME </p>
<p>Lets have a coffee</p>,
<table>
<tbody>
<tr>
<th>Drink</th><th>Cost</th></tr>
</tbody>
<tbody>
<tr>
<td>Coffee</td><td>152.61 </td> </tr>
<tr>
<td>Coke</td><td>62.56</td> </tr>
<tr>
<td>Pepsi</td><td>21.71</td> </tr>
</tbody>
</table>,
<p>
So? click me too. Here is another list</p>,
<table>
<tbody>
<tr>
<th>Food</th><th>cost</th></tr>
</tbody>
<tbody>
<tr>
<td>Bhel</td><td>25.5</td> </tr>
<tr>
<td>Puri</td><td>23.0</td> </tr>
<tr>
<td>Something</td><td>19.4</td> </tr>
<tr>
<td>Pani</td><td>17.12 </td> </tr>
<tr>
<td>Puriya</td><td>10.64 </td> </tr>
<tr>
<td>Done</td><td>9.21</td> </tr>
<tr>
<td>Rice</td><td>9.20 </td> </tr>
</tbody>
</table>,
<p>This amazing collection is here.</p>]
a list containing the parts

Html table withsubsections

I want to create table with main section and subsections like that
I tried
<html>
<body>
<table style="width:100%">
<tr>
<td rowspan="3">section</td>
<td rowspan="3">subsection1</td>
<td rowspan="2">subsection1</td>
<td rowspan="1">subsection1</td>
</tr>
<tr>
<td>text1</td>
</tr>
<tr>
<td>text2</td>
</tr>
<tr>
<td>text3</td>
</tr>
...
</table>
</body>
</html>
but this code dont create dont create subsections. Surrounding subsection1 with also dont create subsections.

The rowspan attribute indicates the number of rows a cell should take up. There are 6 rows total in your table, so if you want a cell to span to the last row of the table, you specify rowspan="6". Note that the rowspan values should sum up to the same number for each column, the default value being 1.
<table style="width:100%">
<tr>
<td rowspan="6">section</td>
<td rowspan="3">subsection1</td>
<td>text1</td>
</tr>
<tr>
<td>text2</td>
</tr>
<tr>
<td>text3</td>
</tr>
<tr>
<td rowspan="2">subsection2</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
</tr>
<tr>
<td rowspan="1">subsection3</td>
<td>...</td>
</tr>
</table>
See this JSFiddle

Table and body design mismatch

I have following table structure
<table>
<table>
<thead>
<tr>...header template...</tr>
</thead>
</table>
<tbody>
<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
<table>
My problem is that the datarows and header rows are not aligned to each other.
The table structure looks wierd.
Any clue how can i make them aligned.
Edit:
I have used Jqgrid to populate my grid.
The table structure which jqgrid produces is like the above one.
If i dont wrap within tag, then the first inside disappears.
Somewhere i found that jquery.clean will clean up if we dont wrap within table.
do u guys have any idea on this

You have so much syntax errors.
This is normal table:
<table border=1>
<thead>
<tr><th>header template</th></tr>
</thead>
<tbody>
<tr><td>...</td></tr>
<tr><td>...</td></tr>
</tbody>
</table>

A table have head and body and each can have rows and columns:
<table>
<thead>
<tr><td></td></tr>
</thead>
<tbody>
<tr><td></td></tr>
</tbody>
<table>
You can also see following link for more details.
Cheers !!

Try using a syntax like this:
<table>
<thead>
<tr>
<th colspan="2"> ...header template... </th>
</tr>
</thead>
<tbody>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
</tbody>
</table>

Is it possible to lay out a table with 2 columns. The first column with many td's, the second one with one?

Is it possible to lay out a table with 2 columns. The first column with many td's, the second one with only one?

Yes, use colspan...or you might want rowspan (colspan's opposite :))
Directly from the article (with enclosing the attributes in quotes:
<TABLE BORDER="2" CELLPADDING="4">
<TR> <TH COLSPAN="2">Production</TH> </TR>
<TR> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR>
<TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR>
<TR> <TH COLSPAN="2">Sales</TH> </TR>
<TR> <TD>Claire Horne</TD> <TD>4827</TD> </TR>
<TR> <TD>Bruce Eckel</TD> <TD>7246</TD> </TR>
<TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TR>
</TABLE>
Here is the W3 article

yes use rowspan or colspan to merge td. Example:
<table>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td rowspan="3"></td>
</tr>
</table>