Disclaimer: I don't usually use tables for layouts but they seem to be the best options for html emails. Believe me, playing with divs
in emails sucks even worse. I'm looking for the best workaround, I
don't have much restraints as to how to design...
I'm almost there but I'm having a problem with the following code:
<table border=1 width="600px">
<tbody>
<tr height="140px">
<td width="210px"></td>
<td width="180px"></td>
<td width="210px"></td>
</tr>
<tr height="200px">
<td colspan="3"></td>
</tr>
<tr height="100px">
<td colspan="3"></td>
</tr>
<tr height="300px">
<td width="300px"></td>
<td></td>
</tr>
</tbody>
</table>
jsfiddle
My specific problem is with the last to cells, that I would like them to divide the space of the table by 50% each.
As you can see I modified the width of the last <td> to 300px (half of the table), but that also modifies the width of the first cell, which is an undesired result, I want the first three td to keep that 210px, 180px, 210px proportion.
Just in case to make it even more clear here is a sketch:
If you must use a table - and you really shoudldn't unless you are displaing tabular data - then the solution here, to my mind, is to make the top row one cell and to nest another table within it, of as many cells width as is needed. So:
<table>
<tr><td colspan="2">
<table><tr>
<td width="210"></td>
<td width="180"></td>
<td width="210"></td>
</tr></table>
</td></tr>
<tr><td colspan="2"></td></tr>
<tr><td colspan="2"></td></tr>
<tr><td width="50%"></td><td width="50%"></td></tr>
</table>
You can't do this with one table. The columns will always line-up. If this is for a layout for some other content, than you really need to look at div-based layouts.
If you have to use tables:
<table border=1 width="600px">
<tbody>
<tr height="140px">
<td width="210px"></td>
<td width="180px"></td>
<td width="210px"></td>
</tr>
<tr height="200px">
<td colspan="3"></td>
</tr>
<tr height="100px">
<td colspan="3"></td>
</tr>
<tr height="300px">
<td colspan="3">
<table>
<tr>
<td width="300"></td>
<td width="300"></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Create a table where each column represents each possible division and then use colspans liberally. So you have possible breaks at 210, 300, 490, & 600 for a total of 4 columns.
Then you'd want the first row to span 1, 2, 1, all of the full length to span 4, and then the half and half to span 2 and 2.
DIVs will be better solution here. Are you sure you need a table here? Maybe, divs?
Related
I'm having trouble replicating this table. I'm confused with the rowspan and colspan. I would really appreciate it if someone helps.
Click here to view image of the table
Here you go:
<table>
<tr>
<td colspan="7">The Error Rate on Different Forms</td>
</tr>
<tr>
<td rowspan="2">Form name</td>
<td rowspan="2">A</td>
<td rowspan="2">B</td>
<td rowspan="2">Total Fields (X = A x B)</td>
<td rowspan="2">Fields with errors (Y)</td>
<td colspan="2">Error rate* (Y/X) x 100 (%)</td>
</tr>
<tr>
<td>X/Y</td>
<td>%age</td>
</tr>
<tr>
<td colspan="7">High Risk Errors</td>
</tr>
<!-- normal tr td -->
<tr>
<td colspan="7">Low Risk Error</td>
</tr>
<!-- normal tr td -->
</table>
I have FullCalendar in my project:
https://www.primefaces.org/primereact/#/fullcalendar
I have 2 events at one day, I found first event by this code:
//tbody//td[count(//thead//td[#data-date='2019-08-06']/preceding-sibling::*)+1]
And I need to find second or more events.
<table>
<thead>
<tr>
<td data-date="2019-08-05"></td>
<td data-date="2019-08-06"></td>
<td data-date="2019-08-07"></td>
<td data-date="2019-08-08"></td> //find index of this element
<td data-date="2019-08-09"></td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2"></td>
<td rowspan="2" class="rrrr">event1 2019-08-06</td>
<td class="rrrr">event1 2019-08-07</td>
<td class="rrrr">event1 2019-08-08</td> //find this element by found index
<td rowspan="2"></td>
</tr>
<tr>
<td class="rrrr">event2 2019-08-07</td>
<td class="rrrr">event2 2019-08-08</td> //find this element by found index
</tr>
</tbody>
UPD
How work //div[#class='fc-content-skeleton'][.//td[#data-date='2019-09-03']]//tbody/tr/td[count(//thead//td[#data-date='2019-09-03']/preceding-sibling::*)+1] at second day
I would use the below xpath to get all the events and then iterate them. So, you don't have to worry even if the events' count change between the dates.
//div[#class='fc-content-skeleton'][.//td[#data-date='2017-02-12']]//tbody/tr/td[count(//thead//td[#data-date='2017-02-12']/preceding-sibling::*)+1]
Screenshot:
If you want to access any specific event then you can do it using the index as shown below. (wrapped entire xpath in () and then provide the index in []).
(//div[#class='fc-content-skeleton'][.//td[#data-date='2017-02-12']]//tbody/tr/td[count(//thead//td[#data-date='2017-02-12']/preceding-sibling::*)+1])[2]
I am trying to identify the second table using HTMLAgilityPack
<center>
<table>
<tr>
<td>0-A</td> <td> | </td>
<td>B</td> <td> | </td>
<td>C</td> <td> | </td>
</tr>
</table>
</center>
<br><br>
<TABLE DIR=LTR BORDER>
<TR>
<TD DIR=LTR ALIGN=RIGHT><b>A</b></TD>
<TD DIR=LTR ALIGN=LEFT><b>B</b></TD>
<TD DIR=LTR ALIGN=LEFT><b>C</b></TD>
</TR>
</TABLE>
I have tried
Dim table = doc.DocumentNode.SelectSingleNode("//table[2]")
and that does not work. I have tried it as a capital and that does not work. If I put "//table[1]" I do find the first table. Is there a different way that I should do this? I'm doing this in VB.net
Additional information when I do
For Each x_table As HtmlNode In doc.DocumentNode.SelectNodes("//table")
it finds two tables and I can skip the first and work on the second, but is that the way it was designed to work?
<table>
<tr> <td rowspan="2">1</td> <td>2</td> </tr>
<tr> <td rowspan="2">3</td> </tr>
<tr> <td>4</td> </tr>
</table>
seemingly only displays two rows:
The reason for hiding the second row [1 3] is, that the cells with text 1 and 3 are reduced in height. Is there a way to ensure, that the second row is visible in the display (not only in DOM)?
The problem gets clearer, if you look at the same table with an additional column:
<table>
<tr> <td rowspan="2">1</td> <td>2</td> <td>0</td> </tr>
<tr> <td rowspan="2">3</td> <td>0</td> </tr>
<tr> <td>4</td> <td>0</td> </tr>
</table>
which is displayed like:
You can add a height property to the row:
<table border=1>
<tr>
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr style="height: 1.5em">
<td rowspan="2">3</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>
One suboptimal option could be to add an empty column:
<table>
<tr> <td rowspan="2">1</td> <td>2</td> <td class="void"></td> </tr>
<tr> <td rowspan="2">3</td> <td class="void"></td> </tr>
<tr> <td>4</td> <td class="void"></td> </tr>
</table>
CSS:
table,td {border:1px solid}
.void {height:1em;padding:0;border:0}
However, the spacing between columns leads to unnecessary space for the added column:
As this problem could be solved with padding-left for TD and a cellspacing of 0 for the table, this solution would not be general enough, so I'm still waiting for a good idea.
I am a fairly new web developer, just needed quick help with some view code.
I was looping through an object in my controller called "products". I was displaying all the data of each item fine before I wanted to organize it in a table.
Could anyone see the problem with my code? I'm a very weak front end designer, back end is my niche, so it could be a very simple error.
<tr ng-repeat="product in Ctrl.products">
<td><img ng-src= "{{product.image}}"></td>
<td>
<tr>
<td>Name:</td><td>{{product.name}}</td>
</tr>
<tr>
<td>Price:</td><td>{{product.price}}</td>
</tr>
<tr>
{{product.description}}
</tr>
</td>
</tr>
You can't insert a TR inside a TD. You need to insert a full table inside the TD to achieve what you want.
<table>
<tr>
<td>
<table><tr><td>...</td></tr></table>
</td>
</tr>
</table>
You can use rowspan properties:
<table>
<tbody ng-repeat="product in Ctrl.products">
<tr>
<td rowspan="2"><img ng-src= "{{product.image}}"></td>
<td>Name:</td><td>{{product.name}}</td>
<td rowspan="2">{{product.description}}</td>
</tr>
<tr>
<td>Price:</td><td>{{product.price}}</td>
</tr>
</tbody>
</table>