Semantic of nested tables and table header - html

I have a table where elements can have child elements with the very same attributes, like:
ITEM ATTRIBUTE 1 ATTRIBUTE 2
item value value
sub value value
sub value value
item value value
From this I've created a markup like this:
<table>
<thead>
<tr>
<th>ITEM</th>
<th>ATTRIBUTE 1</th>
<th>ATTRIBUTE 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>item</td>
<td>value</td>
<td>value</td>
</tr>
<tr>
<td colspan=3>
<table>
<tbody>
<tr>
<td>sub</td>
<td>value</td>
<td>value</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>item</td>
<td>value</td>
<td>value</td>
</tr>
</tbody>
</table>
My questions are now:
Is this the best semantic solution?
Is another approach better suited? If so, which is the recommended way?
Is the table header in charge for both tables or do I have to create a new one (maybe with visibility: hidden for the nested table?

Is this the best semantic solution?
Not really. While the act of nesting an element A within another element B can be used to indicate that A is a child of B, that isn't what you're doing here: you're nesting the table within a completely different row, so there's no implication of a parent-child relationship between A and B.
By creating a cell that spans all the columns in the table and then building another table inside that with the same number of columns, you're also effectively saying "these are some other columns, that don't relate to the ones in the outer table".
You can see the implied (lack of) relationship between the columns by adding a border to the cells in your example above:
Obviously you can fix that with CSS, but the unstyled rendering of a piece of HTML is often a good guide to its semantics.
Is another approach better suited? If so, which is the recommended way?
There's no standard way to represent hierarchical relationships between rows of a table in HTML. Cribbing from an answer I gave to a similar question, though, you can do it with extra classes, ids and data- attributes:
<table>
<thead>
<tr>
<th>ITEM</th>
<th>ATTRIBUTE 1</th>
<th>ATTRIBUTE 2</th>
</tr>
</thead>
<tbody>
<tr id=100>
<td>item</td>
<td>value</td>
<td>value</td>
</tr>
<tr id=110 data-parent=100 class=level-1>
<td>sub</td>
<td>value</td>
<td>value</td>
</tr>
<tr id=200>
<td>item</td>
<td>value</td>
<td>value</td>
</tr>
</tbody>
</table>
The parent-child relationship won't be visible in an unstyled rendering (there's no other way you could make it so without adding extra content, as far as I can see), but there are enough hooks to add the CSS required:
.level-1 > td:first-child {
padding-left: 1em;
}
... which results in this:
With a little javascript, you could also use the id and data-parent attributes to set things up so that e.g. hovering over a row causes its parent to be highlighted.
Is the table header in charge for both tables, or do I have to create a new one?
In your proposed solution, creating a single cell that spans all columns and then building another table inside it means that there's no implied relationship between the header cells and those of your "child" row. Obviously my suggested solution above doesn't have that problem.

This is W3C's recommendation:
At the current time, those who want to ensure consistent support across Assistive
Technologies for tables where the headers are not in the first row/column may want
to use the technique for complex tables H43: Using id and headers attributes to
associate data cells with header cells in data tables. For simple tables that have
headers in the first column or row we recommend the use of the th and td elements.
you can lock at this post: Best way to construct a semantic html table
hope that will help you to get your answer

Talking about semantics requires us to have more time than to find an answer for your question.
But for a whole point, this link should help you. That page contains all the information you may be interested in. Interestingly unlike normal 'declarative' spec w3c writes, it has 'suggestive' writing about the question in this context. You may wish to read right from the start.

I think putting the children in a separate table is the wrong way to go. Nested tables are not like nested lists; they don't carry that same semantic hierarchy. It seems everything should be within the same table if it all lists the same information.
For example, if your table had the headers
REGION POPULATION AREA
then you could have item1 = Earth, item2 = France, item3 = Paris... and it wouldn't really matter if France were a child of Earth or if Paris were a child of France; you'd still be better off keeping it all in one table and not trying to do a parent/child relationship other than in CSS styling.
If your table is really not comprehensible without someone knowing that parent/child relationship, could you give an example of the table data so I can better understand how to structure it?

Related

How to correctly handle table with rows which serves as list opening listed objects by WCAG

I have a list of books displayed as table and javascript code which handles highlight on its rows. When I click some row I can select it, by doubleclick or enter it will open new tab with that book details.
I am wondering how it will be correctly coded by WCAG standards? To be usable by screen readers, e.g. NVDA?
I looked at WCAG standards but I can't find this type of usage.
<table>
<tr>
<th>Author</th>
<th>Name</th>
<th>ISBN</th>
<th>Year</th>
<th>Number of Pages</th>
</tr>
<tr>
<td>John</td>
<td>How to be awesome</td>
<td>456987</td>
<td>1950</td>
<td>1</td>
</tr>
<tr>
<td>James</td>
<td>Two is Two too</td>
<td>654654</td>
<td>2010</td>
<td>520</td>
</tr>
</table>
Right now opening of detail and row focus is handled by JavaScript, user can move through rows using arrows up/down and open detail by Enter.
Should I:
1) add tabIndex to ?
2) add element to row?
3) do not modify table at all and try to edit JS so it can be used by screen reader too?
4) add element to row?
5) anything else?
You should follow the grid pattern as defined in the "WAI-ARIA Authoring Practices 1.1". A grid is a table that you can interact with.
Also note in your code sample, you should have a <th scope="row"> for each row of data. That will help when a screen reader user navigates vertically down a column. It's up to you to decide which cell makes the most sense as a row header. My first choice would be the book name.

Minimally invasive frozen HTML table header row?

There are many different ways to freeze a header row of an html table, but I need something minimally invasive. I'm working in a large and complex system in which the table html is generated through many layers of back-end coding and it will be non-trivial and risky to change the table structure (lots of complex javascript and css depends on the HTML structure remaining as-is and I don't want to break anything). So I'm looking for a way to freeze my html header rows (2 rows need to be frozen, not just 1) by changing/adding only CSS and/or adding attributes to the table or rows in the table. Here's an accurate example of my table:
<table>
<tbody>
<tr>
<th> </th>
<th id="col0">Option ID</th>
<th id="col1">Description</th>
<th id="col2" title="Sort on Description">Description</th>
</tr>
<tr>
<th> </th>
<td title="Filter on Option ID (Text)">
<input type="text" id="f0">
</td>
<td title="Filter on Description (Text)>
<input type="text" id="f1">
</td>
</tr>
<tr>
<td><input type="radio" name="chk0" id="c_01Q0"></td>
<td>0093005</td>
<td>Local pickup & delivery.</td>
</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
</tbody>
</table>
As you can see it's nothing exotic. But as I've searched for solutions I have found a lot of examples like this, which require more structural changes to the HTML than I dare make (I'm mainly just worried about having to surround the table by section and div elements -- and it seems like a lot of CSS just to freeze a header row). The 1st two rows both need to be frozen so that when I scroll down, they remain nicely in-place. The first data row (non-frozen) is the row containing 0093005.
A few objectives/desires:
Brevity is more important than elegance. I'm fine with a hack, in this case.
Don't change the HTML structure if at all possible, though adding attributes to existing elements can be done.
Pure CSS additions/changes without touching the HTML would be ideal, but I suspect the HTML will need to be decorated to some extent, and that is ok.
Use of js or jquery is a last resort only, to be avoided if possible.
Many thanks in advance for everyone's time.

Use a table to create a calendar

So what is the deal with tables? Are they bad for SEO or is that just a myth? I'm creating a calendar for a company to advertise their fund-raising events. As a result, the contents of the calender need to be SEO friendly.
Is there anything wrong with using a table? Google Calendar uses a table, however, those a calendars are private and SEO doesn't enter it.
This calendar is on the front page of a website. It's a big deal. Are tables okay? Or should I try and create one with html?
I'm on bootstrap...is there an existing plugin that works well with it?
Tables are absolutely fine... so long as they are used for tabular data, not for effecting a layout!
They are great for SEO, especially if you take care to markup them up with all the semantic goodness available to you:
<table summary="Interest Rates">
<caption>Interest Rates</caption>
<thead>
<tr>
<th>Account Type</th>
<th>Interest Rate</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Recommended for you: 'Young Saver'</td>
<td>Interest from: 1.6%</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Smart</td>
<td>From 2%</td>
</tr>
<tr>
<td>Young Saver</td>
<td>From 1.6%</td>
</tr>
</tbody>
</table>
ref: http://reference.sitepoint.com/html/tfoot
Note we provide a caption to summarize the table, we demarcate the various areas with a table header, table body and table footer, and we also markup out table header cells with th, not with td for normal data cells.
I don't believe tables are bad for SEO, I don't think a specific code language or element could be bad for SEO. I would say give it a shot in divs first, as that would be the better way to do it.
This link might help you decide!

How to make HTML table cell to flow below other cells in the same row

I have a table in which I need to add another cell per column, and since that column will have a lot of elements on it, the cell content must flow below the other cells in the same row, filling all the available width on the table. This way the columns won't be stretched making it impossible to view its content.
A visual example might help: http://www.asciiflow.com/#Draw9009157520507047228
Edit
After reading all the replies I realize that perhaps I didn't provide enough information. My apologies.
The table I want to modify is the one in http://staging.locamotion.org/projects/pootle/ . Note that this table uses the sorttable JavaScript library for sorting the table.
I have to modify that table to display tagging information for each of the entries. Since every entry can have several tags which can span a lot of space, the new column (necessary to keep working the sorting library) must flow below the other columns to allow showing the tagging stuff which can span to one or more lines due to width constraints (have in mind that this program is used on third world countries will old equipment and low resolution screens).
Someone asked what I've tried. I tried adding an additional row per each entry, which only one cell with colspan attribute, but that way the sorting library doesn't work:
<table class="sortable">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="even">
<td colspan="4">First entry tagging stuff</td>
</tr>
<tr class="odd">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="odd">
<td colspan="4">Second entry tagging stuff</td>
</tr>
<!-- More and more entries -->
</tbody>
</table>
If you have any other idea on how this UI can be achieved while keeping column ordering I would appreciate it.
I want to apologize again, and also thank the people who spent some of their time trying to answer and help me the best they could.
Tables cells are ALWAYS rectangles and cannot "flow" as described in your image.
You would need to nest a table in a DIV and use CSS floats to accomplish what you're looking for.
I don't think that's possible in HTML.
You could create a Div with a left-floated table in it that contains the two cells, and then have the third cell's content as the content of the div (after the table).
<div>
<table><tr><td>First</td><td>Second</td></tr></table>
Third with a lot of content that might actually span under the table but it's not part of the table
</div>
Like so: http://jsfiddle.net/9QS44/
You can merge the cells from 2 rows using rowspan and similarly for the columns using colspan. You can also combine both the rowspan and colspan. Not sure if you will be able to achieve the effect you're trying to get, but this is the only way I know that will get you close. This should also help you out. http://www.htmlcodetutorial.com/tables/index_famsupp_30.html
I agree with previous posters that HTML table cells do not exactly work the way you are wanting. Here's another way to skin the cat:
<style type="text/css" media="screen">
table {
border-collapse:collapse;
border:1px solid #FF0000;
}
table td{
border:1px solid #FF0000;
}
table#child {
width:200px; float:left;
}
table#parent {
width:300px;
}
</style>
<table id="parent">
<tr>
<td>
<table id="child">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>Text that<br />wraps<br /> and wraps.
</td>
</tr>
</table>
Might want to reduce the amount of bottom margin on the child table as well so that the text wraps a little bit closer.
If it were me, I'd explore using divs for this particular need and forget about tables altogether.

How to create HTML table like structure in flex

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.