I'm trying to build a design in app which appears to be tabular data, but does not have a header row. I've attached an image of the design below:
I've tried to follow the normal markup examples all over the internet, but almost every example expects a header row.
I am building my table such: (with styling left off)
<table>
<tr>
<th scope="row">Main Value</th>
<td></td>
<td>100.21 g</td>
</tr>
<tr>
<th scope="row">Sub Category 1</th>
<td>58 %</td>
<td>58.15 g</td>
</tr>
<tr>
<th scope="row">Sub Category 2</th>
<td>42 %</td>
<td>42.08 g</td>
</tr>
<tr>
<th scope="row">Additional Value</th>
<td></td>
<td>71 g</td>
</tr>
</table>
I'd probably move on but then I start to get really bad results using Voice Over on a Mac.
For example, when I'm over Row 2, column 3, I get the heading for row 3 announced:
Maybe this is a bug?
Maybe these shouldn't be tables or should be composite of multiple tables?
I'd love any ideas for how to get Voice Over to read these well, or any information on how to semantically structure this kind of data.
Data tables always have two axis of information. They always must have an header row and an header column at least.
Otherwise, if you can't easily put header rows and columns to label things, even only mentally, semantically speaking, it's not really a data table, even if it visually looks like one, and a more appropriate markup is needed, such as a simple list or a definition list, or just simple text presented in a grid layout.
In your example, it indeed looks like a real data table, with two piece of information in each row which are always the same across rows. That's even the base definition of a data table: a collection of items for which you always have the same set of properties repeated.
IF we take the row "subcategory 1" as an example, what are these two values "58%" and "58.15g" ?
I need to find what they represent somewhere, and this information should be present in the header row.
The data might be so obvious for you that you don't need that header row, but it is probably not so obvious for your readers, screen reader users or not by the way.
So, my recommendation is to add it, and to make it visible on screen. It will also help perfectly sighted users to understand the data.
Beyond just understanding the data, it's also the opportunity to add filtering and sorting, and why not column and/or row reordering, very useful if the table is big.
Just a side note on colspan/rowspan: as a screen reader user myself, I think that, in most of the cases, it's better to have empty cells rather than colspan/rowspan.
They often make the navigation much harder for nothing, and it might oblige you to compexify the markup quite a lot to make everything announced correctly. A simple visually hidden "-" can help explicitly telling that the cell is empty or has no meaningful value, if it isn't clear enough.
A good usecase for rowspan/colspan is when you have several header rows or columns, in order to create groups. Quick example: a first header row with "morning", "afternoon", "evening" and "night", and a second header row with hours from 00 to 23.
Otherwise, it's often a bad idea to use colspan/rowspan inside the data themselves.
Related
i know how to search for a value programmatically and redraw the DataTable so that it shows only rows containing the given value.
I do that like so:
this.api().search('8000').draw();
But now i have the need to do the same but not use a value this time, but show only the row with the given id.
Each row in the DataTable has an id like so:
<tr id="198">
<td>8000</td><td>turnover</td>
</tr>
I know the index of the row with id 198 via:
var rowIndex = this.api().row('#198');
But how to get the DataTable to only show the row with that index?
Via Google i saw people that would place the id in a separate column and use search for that, but i think there must be a more efficient and better way as every row already has an id and i know the index of the row that i want to show.
Maybe it's simple but I googled a long time, tried lots but none of 'em worked.
Any help or pointers are greatly appreciated, many thanks.
I found that DataTables now supports colspan and rowspan. but to use it better, I needed to duplicate same data thrice. What I need to make is something as image below, and I can't find whether DataTables supports splitting a row into multiple rows.
The image shows how I modify each set of data. It means, there will be 5 columns for each data, and it will be split into 3 lines.
Even the question was about duplicating, if there's other way to make a row/set of row for each data with same shape as image, than please explain.
Ok, I found very wierd trick.
I just made display:none to original table, and only showed child row table.
Not like original table, child row was free to custom the format.
The answer of other question on the link was useful.
https://stackoverflow.com/a/72745607/10780764
I have an HTML data table that I am trying to make accessible. It works well enough with NVDA and Jaws. But the context of the data is such that it makes more sense to be read column by column rather than row by row as screen readers default to.
Is there a way to make sure the table is read column by column?
You don’t have to do anything, except marking it up correctly (i.e., what the headers are, and possibly what their scope is).
Just like sighted users don’t read the whole content strictly from left-to-right, top-to-bottom, screen reader users don’t let the page read out to them from the beginning to the end -- all users scan the content and jump on the page.
Inside a table, screen readers typically allow moving from cell to cell, to beginnings and ends of columns and rows, etc. See for example the commands for reading tables with JAWS.
If you think it’s not easily understood how the data is organized, consider adding a description in the caption element, e.g., something like "The first row gives the dates, each column contains the data for a day".
Is it possible to create a table in SQL with the following requirements.
I have a table X with two cols, (primary key, value)
Every time, I add a new value to the above table, I create a new table with the name value.
So if there are 10 rows in table X, then we need to have 10 tables with names in the values field.
Let me try to explain the situation.
I have a category A and I need to define it.
The subsets of A can include {a1, a2, a3, ..... until infinity}
All the subsets have a different definition but are uniquely identified a property B.
B can be directly A, or a subset A with the definition holding true. I am not sure how to design it. I am using postgresql
So I am taking cues from a_horse_with_no_name and think that this can be a table structure.
Table A
<table border="1">
<td> primary_key </td>
<td> B1 </td>
<td> B2 </td>
<td> hstore - attribute </td>
</table>
Now what store should act like is similar to a tree.
hstore - attribute -> { a1 : {c1,c2,c3...}, a2 :{d1,d2,d3..}, .... }
C and D are structures here with multiple or single values. So if I am to use an hstore, is it possible to use something like a 2d array or something similar. It seems that it is possible from the following link.
http://www.postgresql.org/docs/9.0/static/hstore.html
I think this is certainly a better approach. Can you please check and comment.
and so on..
No, you can not do this. And should not.
edit: So, if you want subsets of a super set where all items are similar, you should create a column called 'parent_id' and reference the super set in that column.
Sounds like a bad idea, but yes, you can do that. Might need to get a bit creative to do it depending on what SQL you are using. You will most likely have to make a stored procedure, that creates a new table with it taking a name parameter. Then you can create a trigger on insert to call stored procedure, so every time a new value is inserted a table is created.
this practice is not nice to me. I think you should try another way solve your problem.
I am using webhierarchicaldatagrid control of infragistics, In that I have 3 bands.
In lowest level band one of the column does not show up its value. When I do Inspect Element
I see as
<td val="Actual Value"></td>
But Other Columns which show there value properly are shown up as:
<td val="Actual Value">Actual Value</td>
I am not able to figure out why Infragistics is not putting "Actual Value" under tag. I did not find anything about this issue on Infragistics forum. Please help guys, I am a bit stuck here.
I have fixed it, I was using two columns which were holding hidden fields. When I introduced those two hidden fields somewhere in between other columns, It started showing up values of all the columns.