I'm doing some accessibility work and had a request to augment our current tables to add attributes of scope="col" and scope="row to existing code. I was looking at some documentation here:
https://www.w3.org/TR/WCAG20-TECHS/H63.html
and this has me now mixing th and td tags within a tr. Is this allowed/correct?
Yes, that's perfectly valid from an HTML perspective and it creates a better accessible experience for assistive technology users because the tech knows whether a cell is a table header and specifically knows if it's a row or column header.
For column headers, you typically have all the <th scope="col"> elements in the same <tr> (although you don't have to) because you are defining the column headers.
<tr>
<th scope="col">col1</th>
<th scope="col">col2th>
<th scope="col">col3</th>
</tr>
For row headers, that's where you'd typically mix <th> and <td> elements in the same <tr>. You have to decide which cell in a row should be the "label" for that row. It's often the first cell in the row so the first element in the <tr> would be a <th scope="row"> and all the remaining elements would be <td>.
<tr>
<th scope="row">row1 label</th>
<td>data cell 2</td>
<td>data cell 3</td>
</tr>
<tr>
<th scope="row">row2 label</th>
<td>data cell 2</td>
<td>data cell 3</td>
</tr>
But it doesn't have to be the first cell in the row. I've seen examples (and written some myself) where the 3rd or 4th cell in the row should be the label, in which case my <tr> would have a few <td> elements and then the <th scope="row"> and then the remaining <td> elements.
<tr>
<td>data cell 1</td>
<td>data cell 2</td>
<th scope="row">row1 label</th>
<td>data cell 4</td>
</tr>
<tr>
<td>data cell 1</td>
<td>data cell 2</td>
<th scope="row">row2 label</th>
<td>data cell 4</td>
</tr>
Just make sure you always use the same cell in the row as the label for each row. (Ignoring grouped row labels for now, which is more complicated). That is, if the 3rd cell in the <tr> is a <th>, then make sure the 3rd cell for all the rows is a <th>.
Note that some screen readers might not announce the row header (<th scope="row">) for any data cells to the left of the header if the row header is not the first cell in the row. That's a bug with the screen reader.
Related
In below html code when i focus on any button. All 3 button are read instead of just focused one.
<table>
<tr>
<th >Column 1</th>
<th >Column2</th>
<th >
<button>Button1</button>
<button>Button2</button>
<button>Button3</button>
</th>
</tr>
<tr>
<td>Row1</td>
<td>Row2</td>
<td>Row3
<div>
<button>Button1</button>
<button>Button2</button>
<button>Button3</button>
</div>
</td>
</tr>
</table>
Is this JAWS issue. or am i missing something in my code.
Say I have the following table:
<table>
<thead>
<th>ID</th>
<th colspan="2">Full Name</th>
</thead>
<tbody>
<tr>
<td>123</td>
<td>Rasmus</td>
<td>Lerdorf</td>
</tr>
</tbody>
</table>
The first and last names are in two separate cells for formatting and readability reasons. By default, datatables ignores the colspan'd Full Name header cell, and won't make it toggle the sorting.
Is there a way to force datatables to explicitly make either of the columns in the table body sortable? For example, I want to sort by the last name only.
I searched, but only found several year old hacks and workarounds (e.g. creating empty columns etc.)
DataTables support rowspan and colspan in table header but only if there is one th cell for each column.
For example
<table>
<thead>
<tr>
<th rowspan="2">ID</th>
<th colspan="2">Full Name</th>
</tr>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>123</td>
<td>Rasmus</td>
<td>Lerdorf</td>
</tr>
</tbody>
</table>
I have two tables that are semantically different, so they should be kept separate, IMHO. However, I'd like to align their columns. Browsing SO I found that column widths in a table can be controlled by setting w--classes in the thead. This worked fine for the 2nd table (which was the ine I started with). But when I added the first table on top of it, desaster struck - not only do their columns not align, even the relation of column-widths does not seem to correspond to the w--values.
Fiddle here.
theadof table1:
<thead class="bg-secondary">
<tr>
<th class="w-8">Model Name</th>
<th class="w-8">Y</th>
<th class="w-15">S</th>
<th class="w-15">R<sup>2</sup>(%)</th>
<th class="w-15">R<sup>2</sup>-Adj (%)</th>
<th class="w-39"> </th>
</tr>
</thead>
and table2:
<thead class="bg-secondary">
<tr>
<th class="w-8">Var</th>
<th class="w-8">Include</th>
<th class="w-15">Expression</th>
<th class="w-15">Coefficient</th>
<th class="w-15">StdErr</th>
<th class="w-15">T</th>
<th class="w-15">P</th>
<th class="w-9"> </th>
</tr>
</thead>
There is no w-8,w-15 etc... in Bootstrap 4.
The width sizing classes are w-25, w-50, w-75, w-100 and w-auto.
Refer to the docs: http://getbootstrap.com/docs/4.1/utilities/sizing/
Having a semantics issue. I have a basic table with a standard header and footer. Each row contains an order, beneath each row I need to display another table, that will contain a break down of costs relating to that order. Additionally, these inner tables will be displayed with a jQuery accordion to hide and show when required (but I'm just concentrating on the HTML for now)
How can I semantically approach this in HTML?
<table>
<thead>
<th>Package number</th>
<th>Date placed</th>
<th>Placed by</th>
<th>Total cost</th>
</thead>
<tr>
<td>1</td>
<td>Weds</td>
<td>Jonno</td>
<td>£15</td>
</tr>
<tr>
<td colspan="4">
<table>
<thead>
<th>Part number</th>
<th>Description</th>
<th>Qty shipped</th>
<th>Weight</th>
</thead>
<tbody>
<td>18293</td>
<td>Blah blah blah</td>
<td>72</td>
<td>20Kg</td>
</tbody>
</table>
</td>
</tr>
<tr>
<td>2</td>
<td>Thurs</td>
<td>Jonno</td>
<td>£1</td>
</tr>
<tr>
<td>3</td>
<td>Fri</td>
<td>Jonno</td>
<td>£7</td>
</tr>
</table>
Here's a fiddle: http://jsfiddle.net/yuW7f/ - The problem here is that the row containing the inner table, is totally unrelated to the order row
If you are looking for a parent element you can use to group related rows, you can use <tbody> elements. A table can have multiple <tbody> elements:
<table>
<thead>
<tr>
<th>Package number</th>
<th>Date placed</th>
<th>Placed by</th>
<th>Total cost</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Weds</td>
<td>Jonno</td>
<td>£15</td>
</tr>
<tr>
<td colspan="4">
<table>
<thead>
<tr>
<th>Part number</th>
<th>Description</th>
<th>Qty shipped</th>
<th>Weight</th>
</tr>
</thead>
<tbody>
<tr>
<td>18293</td>
<td>Blah blah blah</td>
<td>72</td>
<td>20Kg</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tr>
<td>2</td>
<td>Thurs</td>
<td>Jonno</td>
<td>£1</td>
</tr>
<tr>
<td>3</td>
<td>Fri</td>
<td>Jonno</td>
<td>£7</td>
</tr>
</table>
Whether or not that makes your code more semantically correct is debatable. You could also give your rows classes to indicate whether the row is a summary row or a detail row, or attributes to indicate relationships to other rows. Semantically, it seems fine as it is to me.
By the way, you are missing some <tr> elements. A <tbody>, <thead>, or <tfoot> element does not replace a <tr> element.
Disclaimer: I don't usually use tables for layouts but they seem to be the best options for html emails. Believe me, playing with divs
in emails sucks even worse. I'm looking for the best workaround, I
don't have much restraints as to how to design...
I'm almost there but I'm having a problem with the following code:
<table border=1 width="600px">
<tbody>
<tr height="140px">
<td width="210px"></td>
<td width="180px"></td>
<td width="210px"></td>
</tr>
<tr height="200px">
<td colspan="3"></td>
</tr>
<tr height="100px">
<td colspan="3"></td>
</tr>
<tr height="300px">
<td width="300px"></td>
<td></td>
</tr>
</tbody>
</table>
jsfiddle
My specific problem is with the last to cells, that I would like them to divide the space of the table by 50% each.
As you can see I modified the width of the last <td> to 300px (half of the table), but that also modifies the width of the first cell, which is an undesired result, I want the first three td to keep that 210px, 180px, 210px proportion.
Just in case to make it even more clear here is a sketch:
If you must use a table - and you really shoudldn't unless you are displaing tabular data - then the solution here, to my mind, is to make the top row one cell and to nest another table within it, of as many cells width as is needed. So:
<table>
<tr><td colspan="2">
<table><tr>
<td width="210"></td>
<td width="180"></td>
<td width="210"></td>
</tr></table>
</td></tr>
<tr><td colspan="2"></td></tr>
<tr><td colspan="2"></td></tr>
<tr><td width="50%"></td><td width="50%"></td></tr>
</table>
You can't do this with one table. The columns will always line-up. If this is for a layout for some other content, than you really need to look at div-based layouts.
If you have to use tables:
<table border=1 width="600px">
<tbody>
<tr height="140px">
<td width="210px"></td>
<td width="180px"></td>
<td width="210px"></td>
</tr>
<tr height="200px">
<td colspan="3"></td>
</tr>
<tr height="100px">
<td colspan="3"></td>
</tr>
<tr height="300px">
<td colspan="3">
<table>
<tr>
<td width="300"></td>
<td width="300"></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Create a table where each column represents each possible division and then use colspans liberally. So you have possible breaks at 210, 300, 490, & 600 for a total of 4 columns.
Then you'd want the first row to span 1, 2, 1, all of the full length to span 4, and then the half and half to span 2 and 2.
DIVs will be better solution here. Are you sure you need a table here? Maybe, divs?