I am using GraphViz to make a tabular structure. I was using the record style, but the boxes weren't lining up. Given the answer to this question, I thought I'd use the HTML style instead. However, I can't seem to properly nest tables. Here's my dot code:
digraph test {
graph [ratio=fill];
node [label="\N", fontsize=15, shape=plaintext];
graph [bb="0,0,352,154"];
arset [label=<
<TABLE ALIGN="LEFT">
<TR>
<TD>Top left</TD>
<TD>
<TABLE>
<TR><TD>Row 1</TD></TR>
<TR><TD>Row 2</TD></TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>Bottom Left</TD>
<TD>
<TABLE>
<TR><TD>Row 1</TD></TR>
<TR><TD>Row 2</TD></TR>
</TABLE>
</TD>
</TR>
</TABLE>
>, ];
}
And here's the output:
So many extra lines! Can anyone help me figure out how to properly make a nested table? On the flip side, an answer to the linked question detailing how to get cells to align using the record display would suffice.
I've added BORDER="0" to inner tables
digraph test {
graph [ratio=fill];
node [label="\N", fontsize=15, shape=plaintext];
graph [bb="0,0,352,154"];
arset [label=<
<TABLE ALIGN="LEFT">
<TR>
<TD>Top left</TD>
<TD>
<TABLE BORDER="0">
<TR><TD>Row 1</TD></TR>
<TR><TD>Row 2</TD></TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>Bottom Left</TD>
<TD>
<TABLE BORDER="0">
<TR><TD>Row 1</TD></TR>
<TR><TD>Row 2</TD></TR>
</TABLE>
</TD>
</TR>
</TABLE>
>, ];
}
and here is the result
You can find here many other options to control HTML layout
Instead of this :
<TD>
<TABLE BORDER="0">
<TR><TD>Row 1</TD></TR>
<TR><TD>Row 2</TD></TR>
</TABLE>
</TD>
You can do this also :
<TD COLSPAN="2">Row 1<BR/>Row 2</TD>
Related
I've inherited a web application from about 2005 that has lots of table-styling in it, see https://jsfiddle.net/6t7r1fma
<table style="height:50px">
<tr style="height:100%">
<td style="height:100%">
<div style="overflow-y:scroll;height:100%">
<table style="table-layout:fixed">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
The issue is that I want the inner table to be as large as I want, but contained in the overflow div which can be scrolled vertically. It works in Chrome but not in Firefox (less important) and IE (more important). What's happening is that the overflow div is taking the height of the child table instead of the parent table, and the result is that the inner table is displayed in its entirety.
Any thoughts? Rewriting the HTML is not really an option, so hopefully there's a CSS solution.
Unfortunately, the way tables work can be summed up by: they size themselves around content. The only solution you have is to pass the max-height from the outer table onto the <div> inside its cell.
If you'd rather do that dynamically, without changing your markup (which would be the right way to go), you could:
hide the contents of your table entirely, using CSS and let the cell get normal size
on page load (after the table was added to DOM and rendered), get the height of the parent <table> and place it as max-height on the <div> contained in your <td>. Of course, this can only be done in javascript.
Besides the above, the only other option you have is placing the max-height on the div inside the td directly (which is what the solutions below do using javascript).
Note I added an id on general principles, to contain it, but as long as you know what you're doing, and this doesn't affect anything else, you don't really need it. Proof of concept:
var divs = document.querySelectorAll('#fix>tbody>tr>td>div');
[].forEach.call(divs, function(div){
div.style.maxHeight = div.parentNode.clientHeight + 'px';
div.style.display = 'block';
})
#fix>tbody>tr>td>div {display: none;}
<table style="height:50px" id="fix" cellpadding="0" cellspacing="0">
<tr style="height:100%">
<td style="height:100%">
<div style="overflow-y:scroll;height:100%">
<table style="table-layout:fixed">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
If you're already loading jQuery in the project, you should probably use this instead (haven't tested, but it should include IE8, which the above doesn't):
$('#fix>tbody>tr>td>div').each(function(){
$(this).css({
"max-height":$(this).parent().height() + 'px',
display:"block"
});
})
#fix>tbody>tr>td>div {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="height:50px" id="fix" cellpadding="0" cellspacing="0">
<tr style="height:100%">
<td style="height:100%">
<div style="overflow-y:scroll;height:100%">
<table style="table-layout:fixed">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Note that due to user agent default styles, table elements might be rendered in different browsers with small spacing (cellpadding and cellspacing) (usually 1-2px) and those will be deducted from the available height. You could prevent this behavior by setting both cellpadding and cellspacing to 0 on the parent <table> (like I did) or by resetting user agent default styles for <table> elements.
Can you add a display block to the parent table and it's table body, table rows and table cells? This works in Firefox and IE 11 (not sure how far back you have to go.)
https://jsfiddle.net/fwuzqo3o/
<table style="height:50px; display: block;">
<tbody style="height: 100%; display: block;">
<tr style="height:100%; display: block;">
<td style="height:100%; display: block;">
<div style="overflow-y:scroll;height:100%">
<table style="table-layout:fixed">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
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
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.
I have a table which has spanned rows. When I create an h ref the link is only clickable on the one line I would like to have the link clickable anywhere on that cell.
I've tried the following:
<table>
<tr><td rowspan=2><a style='display:block; width:100%; height:100%;' href='#'</td><td>Cell 2</td><td>Cell 3</td></tr>
<tr><td>Cell 4</td><td>Cell 5</td></tr>
</table>
<table>
<tr><td rowspan=2><a style='display:inline-block; width:100%; height:100%;' href='#'</td><td>Cell 2</td><td>Cell 3</td></tr>
<tr><td>Cell 4</td><td>Cell 5</td></tr>
</table>
Is there a way of getting the link to span both rows?
your html syntax seems incorrect as your tag isn't properly ended. You could try this:
<table>
<tr>
<td rowspan="2">
<a style="display:block; width:100%; height:100%;" href="#">Text in your big cell 1</a>
</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>
As you can see, you will better see such problems with nicer indentation ;-)
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>