I would like to have an entire table row clickable, without using javascript. The Internets tell me this isn't possible with HTML4, but I'm using HTML5, so I'm hopeful.
However, the obvious doesn't work:
<table>
<a href="foo">
<tr>
<td>…</td>
<td>…</td>
</tr>
</a>
</table>
Firebug reveals that Firefox pulls the <tr/> element out of the <a/> wrapper when computing the element tree, and puts an empty <a/> before the <table/> like this:
<table>
…
</table>
This looks to me like what I'm trying is either not allowed by the standard, or there's a bug in Firefox (and Chromium, which showed the same behaviour). I'm guessing the former, and indeed, the HTML5 specification tells us that <td/> can't be used within an <a/> element, but only within other table-elements: The tr element.
Any other hints on how I could achieve clickable table rows using HTML5?
Apparently, this hasn’t changed in HTML5, so we’re still left with the mentioned workarounds.
You can have the clickable row span the number of columns you need and put the content I that one row
<table>
<tr>
<td>col 1</td>
<td>col 2</td>
</tr>
<tr >
<td colspan="2">
<a href="foo">
Clickable stuff. If you need table columns here, you can nest a second table here
</a>
</td>
</tr>
</table>
Related
I have a very complex dynamic table that I need to output to pdf in laravel 5.6. The project I inherited had Dompdf installed and is already rendering all other content. Therefore, I use it as well for compatibility.
My issue is I have a table to render consisting of 13 columns and undefined number of rows, where intermittently a column may span 13 columns for a heading or a row may span several rows at any given time or a colspan within the rowspan that spans 11 columns from the 3rd row. No html is hardcoded except the <table>, <thead>, <th> and <tbody> tags. The html within the tbody tag is dynamically generated depending on the array data.
Everything looks great in the browser and when I view() the pdf blade as well as ctrl + p it creates a nice pdf, although for some reason rowspan cells spanning to the next page does not carry over markup and content. As soon as I try to stream() the pdf the table becomes warped and looks like a toppled building built by Picasso.
Here is links to pdf's, the one I ctrl + p lost its colour due to me removing names.
File to view pdf printed with ctrl + p
Pdf streamed with Dompdf
Image of viewing pdf in browser
Image of pdf when streaming via Dompdf:
Html sample rendered in browser:
<tr style="background-color: #5b8969;">
<td rowspan="2" style="background-color: #F8C293; color: black;">Spray 4</td>
<td>Pollinate</td>
<td>7-10 days later</td>
<td>BENOMYL WP 25KG </td>
<td>benomyl 500g/kg</td>
<td> </td>
<td>1000</td>
<td>2.00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Full bloom</td>
<td>Black Spot</td>
<td>WETCIT DUO 20L </td>
<td>borax 10g/orange oil 50g/l</td>
<td> </td>
<td>1000</td>
<td>25.00</td>
<td>100.0000</td>
<td>120.0000L</td>
<td>2500.0000</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="13" style="background-color: #9fb5d3;" class="h3 font-weight-bold">ANOTHER ONE</td>
</tr>
<tr>
<td rowspan="7" style="background-color: #F8C293; color: black;">Spray 7</td>
<td>20 cm</td>
<td>African Armyworm</td>
<td>CERATO 250 EC 5L </td>
<td>pyraclostrobin 250g/l</td>
<td> </td>
<td>1000</td>
<td>2.00</td>
<td>10.0000</td>
<td></td>
<td>20.0000</td>
<td></td>
<td></td>
</tr>
Can someone please help and give me a clue on how to output such a complex table with Dompdf? As I would really want to keep on using only one PDF rendering library in this project.
Otherwise I am open to suggestions to use another pdf library that can handle rowspan that span pages and this complex layout?
Update
Based on a comment by Don't panic (he suggested validating html and fill empty td tags with ), that he subsequently deleted.
I re-wrote the HTML as a template into my pdf.blade.php view. Now, I only output the values in a loop in my view. Firstly, it becomes easier to maintain and to leave off the validation he suggested. I also filled every empty <td> tag with a hardcoded ' '. This is to more easily see why certain rows end where they should and others not. The result is sadly still the same, a warped table. But it does seem to be a rowspan issue not colspan. The 'rowspan' rows stack after another. So maybe missing a td tr.
Solved rowspan stacking issue
Two weeks of testing and only problem was it was not outputting certain rows' opening tags, which lead to rows not knowing when to begin. Now only problem left is rowspan across pages.
Update on update
So I have really tried everything I can to get DomPdf to do what it is suppose to do, which is rendering pdf's. I have read a bit more and found that this library has a long standing issue of not being able to render rowspan accross pages. Therefore, on to the next rendering library wkhtlmpdf or I could logically divide rowspans to stop at end of page and start again on new page. Will have to check my watch on this one.
I have browsed through a few answers here on how to turn a HTML table row into a usable link. I could only find people aiming to do this -
<tr>
<td width="15%">Test3</td>
<td><b>Test1</b></td>
<td>Test2</td>
</tr>
Although that does work, it is obviously all separate links and not really what I am looking for. Call me fussy, but I am really trying to aim for something that works similar to the privileges page here.
That is, the entire table row is a link, and no matter where you click, it will redirect. I'm not sure if I would need to use a HTML Table or some kind of List group? Any help would be great!
this solution is really the only way you can do this with HTML properly
<tr>
<td width="15%">Test3</td>
<td><b>Test1</b></td>
<td>Test2</td>
</tr>
Any other solution involves changing the table CSS
I suggest adding the href tag after the like this:
<tr>
<a href="https://google.com">
<td width="15%">Test3</a></td>
<td><b>Test1</b></td>
<td>Test2</td>
</a>
</tr>
This will make all the links clickable with the same URL. However, it wont look 100% like the privileges page since it has no style. Once you add CSS you should be able to achieve exactly what you want.
I'm trying to program a javascript timeline, in which you click on the left column revealing something in the right column. I suppose there are easier ways to do this, but the HTML below looks really really neat.
So the usual way rowspan works is that you have a td that you want to extend down a few rows to complete the table.
<tr>
<td>1942</td>
<td rowspan=2>Something happened</td>
</tr>
<tr>
<td>2017</td>
</tr>
However, what if I want to rowspan upwards, so that the below timeline item fills both rows?
<tr>
<td>1942</td>
</tr>
<tr>
<td>2017</td>
<td rowspan=2>Something else happened</td>
</tr>
I know I can just move them all to the top row and rowspan from there, but I really want to have this nice, easy-to-edit format, with dates and rows right next to each other.
(An idea I had was that if you think of rowspan as analogous to css width and height, there might be something analogous to css left and top (like "table-row"?) you could set, other than actually moving the td's to the tr you want. I don't think that exists, though.)
(also, does anyone know if negative rowspan is defined?)
No, rowspan always works “downwards”. HTML 4 does not explicitly say this, but it is definitely implied, and there is no way to change it. HTML5 makes it explicit, in its boringly detailed (but necessary for implementors) Processing model for tables.
I know this is an old question, but I was looking for this myself and this is the first result on google. After a bit of tweaking, I’ve managed to find a solution:
<table>
<thead>
<tr>
<td>Column 1/<td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan=2>A1</td>
<!--This cell must be hidden; otherwise you will see a gap at the top of the second column between the header and body-->
<td style=“padding:0px;” />
</tr>
<tr>
<td rowspan=3>A</td>
</tr>
<tr>
<td>A2</td>
</tr>
<tr>
<td>A3</td>
</tr>
</tbody>
</table>
You might have to experiment a bit if you want to have a hierarchy deeper than 2 columns, but I’m confident it’s possible.
Is this code correct?
<table>
<tr>
<td>...</td>
</tr>
<tr>
<div>...</div>
</tr>
<tr>
<td>...</td>
</tr>
</table>
don't know for semantic (and W3C rules). What can you say about?
No it is not valid. tr elements can only contain th and td elements. From the HTML4 specification:
<!ELEMENT TR - O (TH|TD)+ -- table row -->
<!ATTLIST TR -- table row --
%attrs; -- %coreattrs, %i18n, %events --
%cellhalign; -- horizontal alignment in cells --
%cellvalign; -- vertical alignment in cells --
>
Not only is it not valid, but it doesn't work! This mark-up
<table>
<tr>
<td>The First Row</td>
</tr>
<tr>
<div>The Second Row</div>
</tr>
<tr>
<td>The Third Row</td>
</tr>
</table>
Produces this displayed
The Second Row
The First Row
The Third Row
The div is ejected entirely from the table and placed before it in the DOM
see http://jsfiddle.net/ELzs3/1/
No, you should not really use a div inside a table because it is a block level element. You can override the behaviour with CSS, but it will not validate with W3C if that is your goal.
No you should not use a <div> inside of a <tr>. You could use it inside <td> where as the table is a properly nested table, although this may not be best practice. You can actually override display setting of a div or any element. You could actually make a <div>(which defaults to block) display as a table-cell and vice versa.
Let's say your table row has 5 columns in general and you want your div to occupy the full width of the table. The following should do the trick.
<tr>
<td colspan=5>
<div class="some-class">
<p>Hey</p>
</div>
</td>
</tr>
This will work in quirks mode, but the browser which is compatible with standard mode will not work depend upon your doctype.
Avoiding quirks mode is one of the keys to successfully producing cross-browser compatible web content
Some modern browsers have two rendering modes. Quirk mode renders an HTML document like older browsers used to do it, e.g. Netscape 4, Internet Explorer 4 and 5. Standard mode renders a page according to W3C recommendations. Depending on the document type declaration present in the HTML document, the browser will switch into either quirk mode or standard mode. If there is no document type declaration present, the browser will switch into quirk mode.
http://www.w3.org/TR/REC-html32#dtd
JavaScript should not behave differently; however, the DOM objects that JavaScript operates on may have different behaviors.
I would like to be able to place an empty tag anywhere in my document as a marker that can be addressed by jQuery. However, it is important that the XHTML still validates.
To give you a bit of background as to what I'm doing: I've compared the current and previous versions of a particular document and I'm placing markers in the html where the differences are. I'm then intending to use jQuery to highlight the parent block-level elements when highlightchanges=true is in the URL's query string.
At the moment I'm using <span> tags but it occurred to me that this sort of thing wouldn't validate:
<table>
<tr>
<td>Old row</td>
</tr>
<span class="diff"></span><tr>
<td>Just added</td>
</tr>
</table>
So is there a tag I can use anywhere? Meta tag maybe?
Thanks for your help!
Iain
Edit: On the advice of codeka, I may look for a better difference engine and I may have found one that is attuned to finding differences in XHTML: http://www.rohland.co.za/index.php/2009/10/31/csharp-html-diff-algorithm/
You can use HTML comments and this plugin (or this one).
Can you not just modify the class of elements that have changed?
<p class="diff other-class">Something changed</p>
<table>
<tr>
<td>Old row</td>
</tr>
<tr class="diff">
<td>Just added</td>
</tr>
</table>