I have a set of survey questions each of which I am arranging in a single row table. I want the first entry to serve as a prompt and have been using <th> for that cell, as in:
<table style='width:100% table-layout:fixed;border-collapse: collapse;'>
<tr>
<th style='width:40%'>
<b>How long were you on active surveillance?</b>
</th>
<td style='width:10%;'>f3_watchtime_num</td>
<td style='width:5%'></td>
<td style='width:50%;>f3_watchtime</td>
</tr>
</table>
It seems to work OK but I have some reservations and questions about mixing <th> and <td> cells in a single <tr>:
Is this HTML5 Standards compliant? (Is there a W3C document that allows or prohibits this practice?)
Are there any downsides to this practice?
Thanks,
David
1. Is this HTML5 Standards compliant? (Is there a W3C document that allows or prohibits this practice?)
W3C tr reference says it's content model can contain:
Content Model:
Zero or more td, th, and script-supporting elements
https://www.w3.org/TR/html5/tabular-data.html#the-tr-element
While your usage isn't very common, there isn't anything in W3C that forbids it.
2. Are there any downsides to this practice?
As for the use of th and td together, its accepted by W3C provided they are children of a tr element.
However, if you are displaying tabular data, (i.e. your survey results are data) using a table is fine. If you are using the table for layout purposes, you should use a CSS based layout instead.
The recommendation of W3C is avoid to use tables for layouts. It is valid only for displaying ordered data, but that's not your case. You can achieve the same with <div> and will be semantically correct.
Other thing is your question about mixing. I think if you don't write <tbody> and <thead> tags, you don't separate the content for the headers in the table, so that's correct because there aren't <td> tags inside a <thead> and there aren't <th> tags inside a <tbody>.
However, it's better practice if you don't use tables for this purpose.
Related
I am using datatables and am wondering if there is an option to make the header wrap.
i use compact display
the problem is, some javascript sets the width of the table header cells to a fix number of pixels.
so i want:
fees
covered
name
shown
amount
shown
in the headers
EDIT: the problem with adding a <br/> tag is that the width of the columns stay exactly the same, but i want them to become smaller, less width, see here:
Use line break <br> in the table header:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>fees<br>covered</th>
<th>name<br>shown</th>
<th>amount<br>shown</th>
</tr>
</thead>
</table>
See this jsFiddle for code and demonstration.
Depending on how your table is initialised then you could use an adaption of the title key within a columns definition:
"title": "Your Title".split(" ").join("<br/>"), // Your<br/>Title
Example JSFiddle here.
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 have a tab which shows two bootstrap tables (wenzhixin bootstrap tables). One tab shows a table for active equipment and the other in-active equipment.
For now i have done the filtering via 2 different sql statements (one for active equipment and one statement for in-active equipment). But i was wondering if there is a way to do the filtering using the returned result containing all the rows (both active and inactive) for example using the formatter or some other feature which i am not aware of ?
Or is the better solution to filter through sql ?
How i currently set the table data
Currently I need to call getActiveEquipment.php and getInactiveEquipment to get the equipment for my active equipment table and in-active equipmenttable. See below how my table for active equipment looks. Id prefere to call getEquipment, which returns ALL equipment and using that result filter the data put into the tables (active equipment -> table 1 , inactive equipment -> table 2)
<table id="active_equipment-table" data-toggle="table" data-url="getActiveEquipment.php" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" class="table table-hover table-condensed table-striped" data-page-list="[10, 20, 30, 40, 50, 60, 70]">
<thead>
<tr>
<th data-field="type" data-sortable="true">Type</th>
<th data-field="product" data-sortable="true">Fabrikat</th>
<th data-field="acquisition" data-sortable="true">Anskaffelsesår</th>
<th data-field="calibration_interval" data-sortable="true">Eftersynsinterval</th>
<th data-field="equipment_no" data-sortable="true">Instrument nr.</th>
<th data-field="inspection_date" data-sortable="true">Seneste eftersyn</th>
<th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents"></th>
</tr>
</thead>
</table>
Thought this might need my own answer.
Did not find any other alternative for filtering the received data before binding it to my data property of my tables.
So the solution was simply to create the getEquipment.php which is responsible for calling my API and fetch the data, and supply it with an argument for active as such.
getEquipment?active=1 and getEquipment?active=0
The filtering will then be handled in my database handler of my API
I'm writing test cases for a webpage that has a table as the main focus of the page. I'm checking that the page contains a new entry via the Page Should Contain fucntion, I then want to find the xpath for this element. I am doing this because each entry is added to the end of the table so I cannot set a static xpath for it because I don't know how many entries will be added between each run of this particular test.
Thanks in advance.
<table class="fw-table">
<thead>
<tr class="affix-header">
<th class="columnwidth-description">Email</th>
<th>Account</th>
<th>Signed up</th>
<th>Number of invalid attempts</th>
</tr>
</thead>
<tbody>
<tr>
<td>devtest</td>
<td>Account</td>
<td>true</td>
<td>0</td>
</tr>
<tr>
<td>test#testing.com</td>
<td>Account</td>
<td>true</td>
<td>1</td>
</tr>
search for: xpath=//body/div[2]/div/div[2]/div[2]/div/div/table/tbody/tr[1]/td[1]
If you need to verify that last table row contains certain text you can use the Page Should Contain Element keyword and provide an xpath locator which will find the last table row containing your text:
Page Should Contain Element xpath=//table[#class="fw-table"]//tr[last()]//td[contains(text(),'bottomline')]
This question might be a little specific but the test program im writing uses XPath to find the data i need in HTML. This piece of HTML(found here) is what im trying to parse.
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="textSm" align="right">1. </td> <!-- Location of the number is here -->
<td align="left" nowrap>
P Sandoval <!-- Player location is here of the number is here -->
</td>
</tr>
</table>
My goal is to find the name of the person by using the number that corresponds to him to find him. This requires me to find a node by the specific text contained in "td class="textSm" align="right">1. </td>" and then find the sibling of that node "<td align="left" nowrap>" then find the child of that sibling "P Sandoval" to get the desired result. I was wondering what kind of query I could use to find this. Any help is very much appreciated.
Use:
table/tr/td[starts-with(., '1.')]/following-sibling::td/a
This assumes that the context (current node) against which the XPath expression above is evaluated, is the parent of table.
//tr[td = "1"]/td[2]/a
For all TRs which have a TD equal to '1', give from the second child TD the A element.