Inside a parent table, I have table1(with 3 rows) and table2(with 2 rows). I need table2 to align at the top with table1 and right now its centering table2. I know about divs and float but this page is getting sent through a mail server and it renders the page all weird and I have to use tables.
I tried to post some images of my code but its saying I need at least 10 reputations to post images?
try adding valign="top" on your parent table td elements as the default vertical alignment is center or middle for td elements
<table id="parent">
<tr>
<td valign="top">
<table id="table1"></table>
</td>
<td valign="top">
<table id="table2"></table>
</td>
</tr>
</table>
Related
I am working for a project where I need to convert the html that photoshop generates to email client compatible.
Once I receive a psd file, I need to create slices and then generate the html. The problem is that the generated html has tables with rowspan and colspan. I then manually remove these colspans and rowspans and nest tables to achieve the same layout.
My question is, is there a library or something that I can use to automate this task?
Below is just an example, the real problem can include various colspans and rowspans in any specific order.
Example -
PS code ->
<tr>
<td colspan="3">First row 3 columns</td>
</tr>
<tr>
<td>Second row first column</td>
<td>Second row second column</td>
<td>Second row column column</td>
</tr>
I will then have to code this as -
<tr>
<td>First row 3 columns</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Second row first column</td>
<td>Second row second column</td>
<td>Second row column column</td>
</tr>
</table>
</td>
</tr>
I work for a company who deliver many HTML emails everyday, i'm email HTML developer, and we use Fireworks (CS6, he's not in the CC..) to generate nested tables (some options are to define).
G.
I have an issue with selecting a table to be read in Selenium.
I have a table in which there is two 'tr' elements inside the 'thead', and I need to find a way to ignore the first of these.
Here is the code:
<table class="noselect">
<thead>
<tr>
<th> </th>
<th class="number IOL">Interest Rates</th>
<th class="number IO">
</tr>
<tr>
<th>Description</th>
<th class="number">Value</th>
<th class="number">Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<tr class="">
<tr class="">
<tr class="">
<tr>
<tr>
</tbody>
</table>
Using Selenium I will ask it to record the value of a certain row and column . This will then look at the Table element I will give it (hopefully using an XPath I can get working in this case), look at the thead and record the headers of each column. In this case that I am struggling with, the fact there is an extra 'tr' at the top of this table gets in the way of this process.
This is how the element is currently used:
[TableAlias("Detailed table")]
protected virtual IWebElement DetailedTable()
{
return Driver.FindElement(By.XPath("//table[#class='noselect']"));
}
I have tried many different ways which I can't get to work, but the gist of what I've been going for is:
//table[#class='noselect movements']/thead/tr/th[not(text()='Interest Rates')]/../../..
Here I'm stuck on going to the 'tr' element, telling it not to use it then backing out, but that selects it back again - and even that doesn't unselect the whole 'tr' element. It doesn't seem to help (to me) that the 'tr' element I'm trying to remove is blank with no class or defining features.
Is there a way of selecting the entire table except for the first 'tr' element in 'thead' as one element?
combine two xpathes. The 1st xpath take thead without the 1st tr and the 2nd tbody
//table/thead/tr[not(position()=1)] | //table/tbody
In your function that processes the THEAD tag, get the collection of TRs and start with [1] (skipping [0]) and process the rest.
I am working on automating a webpage editing task. The webpage has a dynamic table inside a frame. Each row has five columns. By dynamic table I mean that the rows are loaded dynamically on the web page. At any given point, the number of rows loaded are not more than 22. I can access more rows by moving the scroll bar. The total number of rows in the table is ~450, and I need to read all of them to modify some values in Column 2.
I am currently using Selenium WebDriver to try to read the rows into a List, but can only receive 22 rows at any given time. Here is what I have tried:
IWebElement tableElement = Driver.driverInstance.FindElement(By.XPath(*tableXPath*));
var rowList = tableElement.FindElements(By.TagName("tr"));
Console.WriteLine("Table rows: " + rowList.Count());
Is there any way by which I can read the entire table(450 rows) into a data structure, so I can do in-memory processing on them?
This is how the HTML portion looks like, through FireBug:
<table id="ctl00_MPH_HyperGrid1ContentTable" class="HyperGrid" style="table-layout: fixed; width: 100%;">
<colgroup>
<tbody>
<tr id="ctl00_MPH_HyperGrid1_10" class="" style="height: 37px;">
<tr id="ctl00_MPH_HyperGrid1_11" class="alt" style="height: 37px;">
<tr id="ctl00_MPH_HyperGrid1_12" class="" style="height: 37px;">
<td class="checkable">
<td class="">AntelopeEB</td>
<td class="">CA - Antelope EB</td>
<td class="">SmarterMail</td>
<td class="">User</td>
<td class="">
<td class="loadingCell" colspan="5" style="display:none;">Loading...</td>
</tr>
<tr id="ctl00_MPH_HyperGrid1_13" class="alt" style="height: 37px;">
<tr id="ctl00_MPH_HyperGrid1_14" class="" style="height: 37px;">
"At any given point, the number of rows loaded are not more than 22"
That means only 22 rows can be accessed by selenium and stored into the LIST datastructure as the browser has only 22 rows. You need to trigger an event through SELENIUM to make the remaining data to appear in the browser, so that selenium can retrieve the next 22 tags. You've mentioned that you can access more rows by scrolling, include a function that can trigger the scrolling event. Make use of Thread.sleep(millisecs); if page content loading is slow. Let me know if you need more info, please share the code too
is there a way to add cells in a row column in html table without adding another table inside the row column
I have attached the image. and here is my code
<tr>
<tbody>
<td>Name</td>
<td><div id="span1">Units</div>
<div id="span2" class="side-border">price</div>
<div id="span2" class="r">value</div>
</td>
</tbody>
</tr>
If you want to have some different structure of your rows, you should check colspan and rowspan. The numbers should add up.
Example
<table border="1px">
<tr>
<td colspan="5">Hello</td>
<td>World</td>
</tr>
<tr>
<td rowspan="2">col 1</td>
<td colspan="4">CENTER</td>
<td>right</td>
</tr>
<tr>
<td colspan="3">Text</td>
<td colspan="3">bottom right</td>
</tr>
</table>
If you were to add the numbers from colspan they add to 6 and rowspan goes to 3. There are some things you have to take care of though. It's a little hard for me to explain now what those are, just try to visualise how you want your table to look, and then follow this:
The table should have the max number of rows
The table should have the max number of columns
rowspan used across table has to add up (more or less)
colspan used across table has to add up (more or less).
Follow that, and after writing the HTML for a few "complex" tables, you'll get the gist of it.
Currently i am getting 100 Records from my Servlet .
I want to display only 20 Records per page , i am using dojox.grid.DataGrid , but still its displaying all the 100 Records
Please help .
<body class=" claro ">
<span dojoType="dojo.data.ItemFileReadStore" jsId="store1" url="http://localhost:8080/Game/servlet/Hi"></span>
<table dojoType="dojox.grid.DataGrid" store="store1" rowsPerPage="20" rowSelector="20px"
style="width: 100%; height: 500px;">
<thead>
<tr>
<th width="150px" field="name">Namer3</th>
<th width="150px" field="dept">Deptr3</th>
</tr>
</thead>
</table>
</body>
I would suggest you start using a QueryReadStore, and change your servlet to respect the start and count parameters that are part of the post. This will allow the grid to fetch the rows 1-20, then 21-40 when the user scrolls down, and so forth.
If you're looking to tell the grid to render only 20 rows at a time and wait for a scroll event for the others, that should already be handled. I would suggest you double check your grid. Initially 20 rows should be rendered with values, and the later ones should just have "..." inside all the values until scrolled into view.