I'm using a extension for Firefox to check for 508 compliance issues.
I'm getting the following two errors which I have been unable to resolve on each report:
Fail: Data tables must use th elements to indicate header cells for the first cell in all the columns or rows.
Fail: For complex data tables, the td elements must have headers attributes that point to associated th header ids.
The addon highlights the following table cell for both errors but I can't find anything wrong with it:
<table cellpadding="5" width="100%" style ="text-align:right" class ="ecoRow" summary="Budget History" title="Budget History">
<tr> <th id="date_range" colspan="7" style="text-align:center;">From #params.start_date# To #params.end_date#</th></tr>
What to do?
I'm using this firefox extension and ran into this same issue today.
It appears that the tool wants to see some text inside the element.
Other dev on the team replaced plain text header labels with buttons and anchors. anchors were passing with the tool, but buttons weren't. We already had the scope defined and all the closing tags (I checked).
Results may differ, but this fixed our issue.
Note that the passing lines have actual text between tags.
Fail: <th><input type="button" text="blah"></input></th>
Fail: <th><img url="blah.jpg"></img></th>
Pass: <th>blah</th>
Pass: <th><span>blah</span></th>
Pass: <th>blah</th>
I see several things about the table that can be improved (inline styles, lack of <tbody>, etc), but header identification is not one of them. Then again, I can't see the entire table. But it looks like the plugin evidently doesn't understand a colspan. Try adding a scope="col" to the header.
For an alternative plugin, try the WAVE toolbar: http://wave.webaim.org/toolbar
UPDATE: Now that I see the table via the pastbin link in the comment, I see some serious problems. First and foremost, there's no closing table tag. You have some rows wider than others. You have an empty row that has has been inserted for display purposes. Don't do that, use CSS.
Related
I am using the tint template in R Markdown for an HTML rendering. I don't think that this issue is specific to R or R Markdown, though. I think the fix can be accomplished with CSS or HTML. Although, I would guess that Dirk, Jon, or JJ, Yihui, or Dave could probably tell me how to fix this properly in R Markdown since they authored or contributed to the development of tint.
How can I modify this to prevent the margin notes from affecting the spacing below the table?
I did try setting the table tag with the styles align: left; and float: left; to see if that would work. Neither impacted the spacing at the bottom.
Here is the table footer with the margin note as HTML script:
<tfoot>
<tr>
<td style="padding: 0; " colspan="100%">
<span style="font-style: italic;">Note.</span> <sup></sup> This is the data dictionary based on the data adapted from CFPB (n.d.)<label for="tufte-sn-3" class="margin-toggle sidenote-number">3</label><input type="checkbox" id="tufte-sn-3"
class="margin-toggle"><span class="sidenote"><span class="sidenote-number">3</span> Consumer Financial Protection Bureau. (n.d.) <em>Consumer complaint database API docs</em> [data set and code book]. Office of Civil Rights. Retrieved
April 28, 2021, from https://cfpb.github.io/api/ccdb/index.html</span> and Rozzi (2021).<label for="tufte-sn-4" class="margin-toggle sidenote-number">4</label><input
type="checkbox" id="tufte-sn-4" class="margin-toggle"><span class="sidenote"><span class="sidenote-number">4</span> Rozzi, G. (2021). <em>Data & functions for working with US zip codes</em>. GitHub. https://github.com/gavinrozzi/zipcodeR/</span>
</td>
</tr>
</tfoot>
I realize it's not all that pretty. While I will likely modify the HTML directly, I didn't write it. It was generated through the use of R Markdown. I typically find that tables can be far less painful, for how often I'm using it, to adjust in the script.
When I render the HTML, there's this huge gap between the table and the next line of text. This is what's happening in the HTML when I run the script:
However, when I use the margin outside of the table, I don't have this problem. (Don't mind the writing; it's definitely not proofread.) If you look, you can see that the second margin note in this image is not impacting the next <p></p>.
Please let me know if there is other information I could provide to get help faster.
It may not be right, but it works. I took the footer off the table and added a block with the footer content. Issue solved. I don't know why I didn't think of that sooner. (sigh)
I am making a report template that is required for my school project. Inside the report, I need to display all the cars and their respective details. As you can see from the code below, I am using spring expression language to perform loop on return data and it works as intended.
<div>
<table>
<tbody>
$foreach{car: entity.cars}
<tr>
<td>${car.name}</td>
<td>${car.color}</td>
<td>${car.model}</td>
</tr>
$end{}
</tbody>
</table>
</div>
However, when I switch between Source and WYSISYG, the whole expression will be omitted from the table element and become like this:
<div> $foreach{car: entity.cars} $end{}
<table>
<tbody>
<tr>
<td>${car.name}</td>
<td>${car.color}</td>
<td>${car.model}</td>
</tr>
</tbody>
</table>
</div>
I have read the documentation from CKEditor and found out there's a feature called 'ACF'. It helps us to discards invalid, useless HTML tags and attributes so the editor remains "clean" during runtime.
I already tried
config.allowedContent = true;
I am not particularly sure whether my problem is caused by the 'ACF' feature. If it does, how can I configure it so that the editor will ignore the expression and leave it as it is?
EDIT
I tested the code above with another rich text editor (RTE) out there. Unfortunately, it turns out all of them return the same result. I believe it is illegal to put such an expression between the table elements in an RTE. How should I modify my code so that it is syntactically correct in an RTE?
I just got a workaround for this issue. I noticed the editor will not remove SPEL if I specifically tell it not to do so in the 'config.js' file.
You can achieve this by configuring protectedSource. For more details, please check this link:
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-protectedSource
I am creating a custom report that is inserted inside a body of an email content in the form of html. My report generates a table with 3 rows and multiple columns. In 1 of the columns the value is determined dynamically via an environment variable (something like this: $CHILD2_BUILD_RESULT) in Jenkins (either SUCCESS or FAILURE). I want to change the font color of this text placed inside depending on the value. Green if it is SUCCESS , Red if it is FAILURE.
My current code (below) is hard-coded and displays green irrespective of the status.
Is this possible just by using CSS or CSS conditional formatting or handlebars without jquery or javascript
<tr>
<td>Test Result</td>
<td style="color: green;"> <strong>$CHILD1_BUILD_RESULT </strong> </td>
<td style="color: green;"> <strong>$CHILD2_BUILD_RESULT </strong> </td>
</tr>
The fact that the rendered HTML is going into an email is knee-capping you a bit here. There are lots of neat tricks you could do with selectors, but emails require that all CSS be inlined -- which means no selectors.
Your best option is to modify the process that builds the final email output and define two new environment variables: CHILD1_BUILD_RESULT_COLOR and CHILD2_BUILD_RESULT_COLOR. These would contain the string values "green" or "red" (depending on the value of CHILD1_BUILD_RESULT and CHILD2_BUILD_RESULT).
I know you were probably hoping for a more elegant solution, but CSS in email is very limited and has always been a pain point for designers and developers.
I came up with a solution by adding a class to the tag. I named the class as the jenkins environment variable that would store wither SUCCESS or FAILURE then I styles 2 .SUCCESS & .FAILURE as needed inline. This could display the output they I wanted to in email.
Intellisense has macro for making new table:
Yet when I try to create new row, it forces the <strong> tag:
I actually have to press Esc, otherwise the <strong> is inserted if I type >. I have similar problems with <th>, where <math> is inserted instead.
Is there a way to add HTML element to known elements of intellisense?
VS should totally know about these elements. It sounds like the HTML schema has somehow been corrupted. You can try to delete the HTML schema cache and see if that fixes the problem. To do this, go to %AppData%\Microsoft\Visual Studio\15.0_<InstanceID>\ and remove (or rename) the GeneratedSchemas folder.
I'm generating HTML code for regular tables:
<table cellpadding="0" cellpadding="0">
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<tr>
</table>
After generation, I open the HTML file in a browser (Firefox) and copy and paste into blank Google Doc, BUT Google Docs translates the table without borders borders and default format.
There is a way to format the HTML table to meed the Google Docs requirements?
Or there is a way to format a lot of tables of a Google Doc using a macro ? (I mean table borders and single linespacing)
The first thing I notice is the <table> has cellpadding="0" declared on it, twice.
“Do not use [cellpadding or cellspacing], as [they have] been deprecated. The element should be styled using CSS.” —MDN web docs
See this other StackOverflow question for how to set cellpadding and cellspacing in CSS.
This actually addresses your problem, as adding a border-collapse property to your table style will cause allow a table to paste into a Google Doc as a table… if you set it to separate.
Or if you add padding to your td (and th if you have them),
I created this Google Doc, Paste <table> into Docs, with some examples of how different styles effect how a table will paste into a Doc, with those styles noted.
Hope this helps!
I should also note, this was written with copying/pasting taking place in Chrome; different browsers will produce different results. I've also found how much is selected can effect how the table pastes in. My best advice is to experiment based on the look of your table and your desired result.