As described in this and this answers, we can use HTML tags in Markdown to create tables with cells spanning multiple rows or columns. Suppose I want to make the following table (rendered by Visual Studio Code with extension "Markdown All in One"):
Desired Effect
But the problem for the second answer is that the rowspan/colspan of the first column/row will be rendered with a additional column/row in the front, as in the following example (does not work on StackOverflow, but works in VSCode; a work-around is to add an empty column/row, as suggested by the first comment in that answer, but this is still not perfect):
||Letter|Typesetting|Result|
|-|-|-|-|
|<td rowspan=4>a |Normal|a
||Italic|*a*|
||Bold|**a**|
||Math|$a$
Result:
Table constructed using method in Answer 2
Then we can use the HTML tags, as described by the first answer:
<table>
<thead>
<tr> <th>Letter <th>Typesetting <th>Result
</thead>
<tbody>
<tr> <td rowspan=4>a <td>Normal <td>a
<tr> <td>Italic <td>*a*
<tr> <td>Bold <td>**a**
<tr> <td>Math <td>$a$
</tbody>
</table>
But then Markdown formatting will be lost:
Table constructed using method in Answer 1
Is there any way to overcome this problem, i.e. using HTML tags to achieve rowspan/colspan without loss of Markdown text formatting?
Related
why jupyter notebook cannot display html 'table', but other html elements are okay, and how can I solve this problem?
below is my source code and my result
source code
<table style="width:20%">
<tr>
<td> **L1** </td>
<td> 1.1 </td>
</tr>
</table>
result
<tr>
<td> **L1** </td>
<td> 1.1 </td>
</tr>
it only removes tag <table> and does nothing else.
That's interesting, because the table (created by pasting your code) comes out just fine for me:
From my personal experience, I can definitely say that Markdown in jupyter notebooks is somehow volatile/unpredictable when it comes to HTML. For example, I myself have been looking for a fix for Jupyter just arbitrarily doing line breaks in the table header (esp. in formulas) and I have found this fix, but it doesn't work for me at all.
I know this is not particularly helpful, but at least it demonstrates that the table not being rendered correctly in your case was either some unexpected behaviour or some bug which maybe, or maybe not, has been fixed in the course of the last year.
You can also add the magic command before the table tag, which worked for me.
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.
This question already has answers here:
How to prevent text in a table cell from wrapping
(5 answers)
Closed 4 years ago.
On my Docusaurus page, I have markup like this that renders the following screenshot:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td><code>organizationName</code></td>
<td>The GitHub user or organization that owns the repository. In the case of Docusaurus, that would be the "facebook" GitHub organization.</td>
</tr>
<tr>
<td><code>projectName</code></td>
<td>The name of the GitHub repository for your project. For example, Docusaurus is hosted at https://github.com/facebook/docusaurus, so our project name in this case would be "docusaurus".</td>
</tr>
</table>
Note that the first table column are wrapped. I prefer them to not be wrapped so that it is easier to read. How do I make the <code> block level such that it does not wrap?
There are two ways of doing it, each with its own tradeoffs but both produce the same result.
1. Use <pre>
Insert <pre> into the <code>. Note that this is not the standard way of writing HTML. According to the spec, the <code> should be inside <pre> instead. This works for a Docusaurus site.
<td><code>organizationName</code></td>
would instead be written as:
<td><code><pre>organizationName</pre></code></td>
2. Add custom CSS targeting <code> [RECOMMENDED]
Add the CSS
code.block {
white-space: nowrap;
}
and do:
<td><code class="block">organizationName</code></td>
The second way is cleaner and what I settled on. Since I only faced the problem when <code> was used as the first column in a table, I used the following CSS, which is also what Bootstrap website uses.
table td:first-child > code {
white-space: nowrap;
}
The benefit of doing the above is that I can use Markdown syntax for my table and I do not have to add custom classes to it:
| `organizationName` | The GitHub user ... |
Final Result
The html table coding structure looks something like the code shown below
<table>
<tr>
<td>Text</td>
<td>input text field</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>submit butto</td>
</tr>
</table>
How to create such table structure in flex which has above given row and column format in flex application with the option of colspann and rowspan alternate too?
There are a lot of ways. I would probably start by looking into the Form layout container. That is great for a two column layout, although it gives you little control over the first column which is primarily used for
You could also, in theory, create something like this by using embedded containers, but I do not think I would recommend that approach because I suspect you'll end up with a lot of unnecessary containers.
You could also write your own layout class. More info on layouts here. This is the most powerful/flexible approach, but probably also the most time consuming.
I'm using gwt in my web app and I have a html panel which contains a <table>. I've chosen to do this instead of flextable due to some annoying issues when styling it as being unable to do <tbody valign="top">.
I wanted to know if it's possible to wrap a html table
<table>
<thead>
<tr>
<th>Name</th>
<th>Path</th>
<th>Type</th>
</tr>
</thead>
</table>
In a class like Flextable so I can easily control rows and columns through Java?
Something like
Label.wrap("id");
but for tables.
You can also format your data in FlexTable.
You can use flexTable.getRowFormatter(), flexTable.getColumnFormatter() or flexTable.getColumnFormatter().
You can apply alignment, style to rows, columns and cells using above FlexTable attributes.
Please provide a standalone test case if you are facing any problems with FlexTable.