We would like to build HTML tables in builder and I know the subject of HTML/CSS editing has been brought up ad nauseam by me but a co-worker had a question. Will there be a way to build 508 compliant tables that can be read with screen readers? Simply embedding an image of a table does not carry the table data along with it, and alt text solution describing the table seems arduous.
Solved! Go to Solution.
Hi Bryan -- We don't have adding tables on our short term roadmap, but we have discussed it. Can you provide a little more information about the tables your colleague wants to add? Does the table have numeric information or text? How many rows/columns would the table typically have? What formatting options would be desired for the table (row shading/color, text size, etc)?
Currently, you can embed a web-based spreadsheet or even just a simple HTML page with just a table hosted on a web server or web hosting service.
Owen
Hi Bryan -- We don't have adding tables on our short term roadmap, but we have discussed it. Can you provide a little more information about the tables your colleague wants to add? Does the table have numeric information or text? How many rows/columns would the table typically have? What formatting options would be desired for the table (row shading/color, text size, etc)?
Currently, you can embed a web-based spreadsheet or even just a simple HTML page with just a table hosted on a web server or web hosting service.
Owen
Table specs,
We do not have the ability to host so embedding with an iFrame isn't doable. Thanks for the response Owen!
Thanks for the requirements, Bryan. Can you also please provide a few examples of what the table would be used for? What specific info might appear in the table, and what role would it play in the story? If you have any links to classic stories or other articles that have this type of info, that would be helpful. This info will help us understand how this feature would be used.
We are moving towards going digital with our reports on forests in various states (examples Minnesota Forests 2013 and Forests of Minnesota, 2017). Within these reports there are standard tables like these,
or,
These tables also need to be in the new reports. I was able to build a sample table in Journal by editing the source code but like you've said before, that isn't possible. I can paste the code here if that will help but the Journal I use to test ideas and concepts isn't public.
I can't off the top of my head of any classic story maps that utilized that technology. The conversation came up because my colleague was having a meeting with our publication shop about the ability to use HTML tables due to a recent push to increase the accessibility of our apps. As you can see it can prove quite cumbersome to try and describe these tables with alt-text.
This is helpful and exactly what I was looking for. Thanks for taking the time to provide this additional info. I will document this supporting info along with this feature request.
For giggles did you want the table code I used to make an HTML table in Journal?
Couldn't hurt. 🙂
Here is the table,
Common name | Number (million trees)a | Net Volume (million ft3)b | Aboveground biomass (thousand tons)a | Average annual net growth (thousand ft3)b | Average annual mortality (thousand ft3)b | Average annual harvest removals (thousand ft3)b |
White oak (Quercus alba) | 49.5 | 1,021.7 | 28,418.8 | 12,498.7 | 7,615.2 | 3,941.3 |
Silver maple (Acer saccharinum) | 64.6 | 886.2 | 18,570.5 | 19,965.3 | 15,536.4 | 527.2 |
Black oak (Quercus velutina) | 36.3 | 636.2 | 17,726.3 | 6,994.0 | 12,107.8 | 4,403.2 |
Northern red oak (Quercus rubra) | 20.9 | 436.3 | 12,372.0 | 1,793.6 | 12,126.4 | 2,095.0 |
Eastern cottonwood (Populus deltoides) | 12.6 | 408.0 | 7,503.8 | 11,856.6 | 4,670.7 | 930.5 |
Black walnut (Juglans nigra) | 48.5 | 348.7 | 8,728.5 | 13,840.4 | 3,075.5 | 652.5 |
Shagbark hickory (Carya ovata) | 73.5 | 345.2 | 11,503.6 | 6,260.7 | 2,841.3 | 2,443.3 |
Green ash (Fraxinus pennsylvanica) | 93.9 | 342.4 | 9,348.5 | 5,652.8 | 7,323.9 | 2,161.7 |
Sugar maple (Acer saccharum) | 127.6 | 339.2 | 10,441.9 | 8,765.5 | 1,324.0 | 2,995.9 |
American sycamore (Platanus occidentalis) | 11.5 | 329.3 | 6,805.5 | 7,119.7 | 2,390.2 | -- |
Hackberry (Celtis occidentalis) | 145.0 | 317.9 | 8,705.1 | 12,730.9 | 2,980.1 | 569.4 |
Pignut hickory (Carya glabra) | 35.9 | 310.8 | 10,080.6 | 5,369.7 | 2,340.5 | 1,084.3 |
Table 2.—Number, volume, biomass, growth, mortality, and removals of live trees on forest land by species for the top 12 tree species by net volume, Illinois, 2017
Here is the code. When I put this in Journal I get row shading and bolded headers but here it doesn't look like it is applied. But nevertheless here it is,
<style id="Forests_of_Illinois_2017_6203_Styles" type="text/css"><!--table
{mso-displayed-decimal-separator:"\.";
mso-displayed-thousand-separator:"\,";}
.sectionsWrapper{
overflow:hidden;
}
#Table2{
overflow-x:scroll;
overflow-y:hidden;
}
.font56203
{color:windowtext;
font-size:8.0pt;
font-weight:700;
font-style:normal;
text-decoration:none;
font-family:Arial, sans-serif;
mso-font-charset:0;}
.font66203
{color:windowtext;
font-size:8.0pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:Arial, sans-serif;
mso-font-charset:0;}
.font76203
{color:windowtext;
font-size:8.0pt;
font-weight:400;
font-style:italic;
text-decoration:none;
font-family:Arial, sans-serif;
mso-font-charset:0;}
.font86203
{color:windowtext;
font-size:8.0pt;
font-weight:700;
font-style:normal;
text-decoration:none;
font-family:Arial, sans-serif;
mso-font-charset:0;}
.xl656203
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:windowtext;
font-size:8.0pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:Arial, sans-serif;
mso-font-charset:0;
mso-number-format:General;
text-align:left;
vertical-align:bottom;
background:whitesmoke;
mso-pattern:black none;
white-space:normal;}
.xl666203
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:windowtext;
font-size:8.0pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:Arial, sans-serif;
mso-font-charset:0;
mso-number-format:General;
text-align:left;
vertical-align:bottom;
mso-background-source:auto;
mso-pattern:auto;
white-space:normal;}
.xl676203
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:black;
font-size:8.0pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:Arial, sans-serif;
mso-font-charset:0;
mso-number-format:"0\.0";
text-align:center;
vertical-align:middle;
background:whitesmoke;
mso-pattern:black none;
white-space:nowrap;
mso-text-control:shrinktofit;}
.xl686203
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:black;
font-size:8.0pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:Arial, sans-serif;
mso-font-charset:0;
mso-number-format:"\#\,\#\#0\.0";
text-align:center;
vertical-align:middle;
background:whitesmoke;
mso-pattern:black none;
white-space:nowrap;
mso-text-control:shrinktofit;}
.xl696203
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:black;
font-size:8.0pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:Arial, sans-serif;
mso-font-charset:0;
mso-number-format:"0\.0";
text-align:center;
vertical-align:middle;
mso-background-source:auto;
mso-pattern:auto;
white-space:nowrap;
mso-text-control:shrinktofit;}
.xl706203
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:black;
font-size:8.0pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:Arial, sans-serif;
mso-font-charset:0;
mso-number-format:"\#\,\#\#0\.0";
text-align:center;
vertical-align:middle;
mso-background-source:auto;
mso-pattern:auto;
white-space:nowrap;
mso-text-control:shrinktofit;}
.xl716203
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:windowtext;
font-size:8.0pt;
font-weight:700;
font-style:normal;
text-decoration:none;
font-family:Arial, sans-serif;
mso-font-charset:0;
mso-number-format:General;
text-align:left;
vertical-align:bottom;
border-top:.5pt solid #E1E1E1;
border-right:none;
border-bottom:none;
border-left:none;
mso-background-source:auto;
mso-pattern:auto;
white-space:normal;}
.xl726203
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:black;
font-size:8.0pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:Arial, sans-serif;
mso-font-charset:0;
mso-number-format:General;
text-align:left;
vertical-align:bottom;
border-top:.5pt solid #E1E1E1;
border-right:none;
border-bottom:none;
border-left:none;
mso-background-source:auto;
mso-pattern:auto;
white-space:normal;}
.xl736203
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:black;
font-size:8.0pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:Arial, sans-serif;
mso-font-charset:0;
mso-number-format:General;
text-align:left;
vertical-align:bottom;
mso-background-source:auto;
mso-pattern:auto;
white-space:nowrap;}
.xl746203
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:windowtext;
font-size:8.0pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:Arial, sans-serif;
mso-font-charset:0;
mso-number-format:General;
text-align:center;
vertical-align:middle;
mso-background-source:auto;
mso-pattern:auto;
white-space:normal;}
-->
</style>
<div id="Table2">
<table border="0" cellpadding="0" cellspacing="0" class="xl736203" width="721">
<tbody>
<tr height="45">
<td class="xl716203" height="45" width="143">Common name</td>
<td class="xl726203" width="87">Number (million trees)<sup>a</sup></td>
<td class="xl716203" width="92">Net Volume (million ft<sup>3</sup>)<sup>b</sup></td>
<td class="xl716203" width="104">Aboveground<br />
biomass (thousand tons)<sup>a</sup></td>
<td class="xl716203" width="93">Average annual<br />
net growth<br />
(thousand ft<sup>3</sup>)<sup>b</sup></td>
<td class="xl716203" width="93">Average annual<br />
mortality<br />
(thousand ft<sup>3</sup>)<sup>b</sup></td>
<td class="xl726203" width="109">Average annual harvest removals (thousand ft<sup>3</sup>)<sup>b</sup></td>
</tr>
<tr height="30">
<td class="xl656203" height="30" width="143">White oak<br />
(Quercus alba)</td>
<td class="xl676203">49.5</td>
<td class="xl686203">1,021.7</td>
<td class="xl686203">28,418.8</td>
<td class="xl686203">12,498.7</td>
<td class="xl686203">7,615.2</td>
<td class="xl686203">3,941.3</td>
</tr>
<tr height="30">
<td class="xl666203" height="30" width="143">Silver maple<br />
(Acer saccharinum)</td>
<td class="xl696203">64.6</td>
<td class="xl696203">886.2</td>
<td class="xl706203">18,570.5</td>
<td class="xl706203">19,965.3</td>
<td class="xl706203">15,536.4</td>
<td class="xl696203">527.2</td>
</tr>
<tr height="30">
<td class="xl656203" height="30" width="143">Black oak<br />
(Quercus velutina)</td>
<td class="xl676203">36.3</td>
<td class="xl676203">636.2</td>
<td class="xl686203">17,726.3</td>
<td class="xl686203">6,994.0</td>
<td class="xl686203">12,107.8</td>
<td class="xl686203">4,403.2</td>
</tr>
<tr height="30">
<td class="xl666203" height="30" width="143">Northern red oak<br />
(Quercus rubra)</td>
<td class="xl696203">20.9</td>
<td class="xl696203">436.3</td>
<td class="xl706203">12,372.0</td>
<td class="xl706203">1,793.6</td>
<td class="xl706203">12,126.4</td>
<td class="xl706203">2,095.0</td>
</tr>
<tr height="30">
<td class="xl656203" height="30" width="143">Eastern cottonwood<br />
(Populus deltoides)</td>
<td class="xl676203">12.6</td>
<td class="xl676203">408.0</td>
<td class="xl686203">7,503.8</td>
<td class="xl686203">11,856.6</td>
<td class="xl686203">4,670.7</td>
<td class="xl676203">930.5</td>
</tr>
<tr height="30">
<td class="xl666203" height="30" width="143">Black walnut<br />
(Juglans nigra)</td>
<td class="xl696203">48.5</td>
<td class="xl696203">348.7</td>
<td class="xl706203">8,728.5</td>
<td class="xl706203">13,840.4</td>
<td class="xl706203">3,075.5</td>
<td class="xl696203">652.5</td>
</tr>
<tr height="30">
<td class="xl656203" height="30" width="143">Shagbark hickory<br />
(Carya ovata)</td>
<td class="xl676203">73.5</td>
<td class="xl676203">345.2</td>
<td class="xl686203">11,503.6</td>
<td class="xl686203">6,260.7</td>
<td class="xl686203">2,841.3</td>
<td class="xl686203">2,443.3</td>
</tr>
<tr height="30">
<td class="xl666203" height="30" width="143">Green ash<br />
(Fraxinus pennsylvanica)</td>
<td class="xl696203">93.9</td>
<td class="xl696203">342.4</td>
<td class="xl706203">9,348.5</td>
<td class="xl706203">5,652.8</td>
<td class="xl706203">7,323.9</td>
<td class="xl706203">2,161.7</td>
</tr>
<tr height="30">
<td class="xl656203" height="30" width="143">Sugar maple<br />
(Acer saccharum)</td>
<td class="xl676203">127.6</td>
<td class="xl676203">339.2</td>
<td class="xl686203">10,441.9</td>
<td class="xl686203">8,765.5</td>
<td class="xl686203">1,324.0</td>
<td class="xl686203">2,995.9</td>
</tr>
<tr height="30">
<td class="xl666203" height="30" width="143">American sycamore<br />
(Platanus occidentalis)</td>
<td class="xl696203">11.5</td>
<td class="xl696203">329.3</td>
<td class="xl706203">6,805.5</td>
<td class="xl706203">7,119.7</td>
<td class="xl706203">2,390.2</td>
<td class="xl746203" width="109">--</td>
</tr>
<tr height="30">
<td class="xl656203" height="30" width="143">Hackberry<br />
(Celtis occidentalis)</td>
<td class="xl676203">145.0</td>
<td class="xl676203">317.9</td>
<td class="xl686203">8,705.1</td>
<td class="xl686203">12,730.9</td>
<td class="xl686203">2,980.1</td>
<td class="xl676203">569.4</td>
</tr>
<tr height="30">
<td class="xl666203" height="30" width="143">Pignut hickory<br />
(Carya glabra)</td>
<td class="xl696203">35.9</td>
<td class="xl696203">310.8</td>
<td class="xl706203">10,080.6</td>
<td class="xl706203">5,369.7</td>
<td class="xl706203">2,340.5</td>
<td class="xl706203">1,084.3</td>
</tr>
<!--[if supportMisalignedColumns]-->
<tr height="0">
<td width="143"> </td>
<td width="87"> </td>
<td width="92"> </td>
<td width="104"> </td>
<td width="93"> </td>
<td width="93"> </td>
<td width="109"> </td>
</tr>
<!--[endif]-->
</tbody>
</table>
</div>
<p><span style="color:#2F4F4F"><span style="font-size:12px">Table 2.—Number, volume, biomass, growth, mortality, and removals of live trees on forest land by species for the top 12 tree species by net volume, Illinois, 2017</span></span></p>
Hi @OwenGeo
This thread is about 1,5 yeras old and there's is still no way to add a simple table with just a few columns. Is there any plans on adding support for tables soon?
We really need this, to embed a separat page for just a simple table with 2-3 columns and 5-10 rows isn't really a good option specially when the small-screen-mode doesn't embed content but just links to it.