I am trying to create a table in HTML that does both row and column spanning. I've nailed most of it, but the upper right has two blank rows that I would like to span. Here's what I have so far (it's a confusion matrix--that's an understatement):
<table>
<tr>
<th colspan="2"></th>
<th colspan="2">Class</th>
</tr>
<tr>
<th colspan="2"></th>
<td>Loyal</td>
<td>Churn</td>
</tr>
<tr>
<th rowspan="2">Pred. class</th>
<td>Predicted loyal</td>
<td>TN</td>
<td>FN</td>
</tr>
<tr>
<td>Predicted churn</td>
<td>FP</td>
<td>TP</td>
</tr>
</table>
Is that possible? Thanks for any assistance.
You mean the upper left right?
<table>
<tr>
<th colspan="2" rowspan="2"></th>
<th colspan="2">Class</th>
</tr>
<tr>
<td>Loyal</td>
<td>Churn</td>
</tr>
<tr>
<th rowspan="2">Pred. class</th>
<td>Predicted loyal</td>
<td>TN</td>
<td>FN</td>
</tr>
<tr>
<td>Predicted churn</td>
<td>FP</td>
<td>TP</td>
</tr>
</table>
http://jsfiddle.net/j0Ln2uwm/
Related
A table on my site has been flagged by an accessibility plugin (aXe). After some tinkering, it ended up saying that I had to fix the following two things:
<th> elements should only be used when there is a single row and
single column of headers
Table has cells whose rowspan attribute is not equal to 1
How can I reasonably build a table with nested levels of information without violating at least one of those?
My table code is:
<table>
<tbody>
<tr>
<th scope="col" rowspan="2">Type Of</th>
<th scope="col" colspan="2">Blue</th>
<th scope="col" colspan="2">Green</th>
</tr>
<tr>
<td scope="col" class="centered">Light Blue</td>
<td scope="col" class="centered">Dark Blue</td>
<td scope="col" class="centered">Light Green</td>
<td scope="col" class="centered">Dark Green</td>
</tr>
<tr>
<th scope="row">Type 1</th>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">N</td>
</tr>
<tr>
<th scope="row">Type 2</th>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">N</td>
</tr>
<tr>
<th scope="row">Type 3</th>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">N</td>
</tr>
</tbody>
</table>
Accessibility tools are free to invent their own rules, but this tool is wrong saying you should remove table headers th when you use rowspan or colspan. It's totally wrong. Check that you have the last version of this tool : this is an awful advice.
In your case, you can use the following technique to mark column headers:
H43: Using id and headers attributes to associate data cells with header cells in data tables
Your have one problem in your example:
Your headers in your second line are not marked as column headers (th) (and headers attribute should only reference th with id).
You markup should be something like:
<table>
<thead>
<tr>
<th rowspan="2" id="typeof">Type Of</th>
<th colspan="2" id="blue">Blue</th>
<th colspan="2" id="green">Green</th>
</tr>
<tr>
<th id="lightblue">Light</th>
<th id="darkblue">Dark</th>
<th id="lightgreen">Light</th>
<th id="darkgreen">Dark</th>
</tr>
</thead>
<tbody>
<tr>
<th id="type1" headers="typeof">Type 1</th>
<td headers="type1 lightblue" title="Yes">Y</td>
<td headers="type1 darkblue" title="Yes">Y</td>
<td headers="type1 lightgreen" title="Yes">Y</td>
<td headers="type1 darkgreen" title="No">N</td>
</tr>
<tr>
<th id="type2" headers="typeof">Type 2</th>
<td headers="type2 lightblue" title="Yes">Y</td>
<td headers="type2 darkblue" title="Yes">Y</td>
<td headers="type2 lightgreen" title="Yes">Y</td>
<td headers="type2 darkgreen" title="No">N</td>
</tr>
<tr>
<th id="type3" headers="typeof">Type 3</th>
<td headers="type3 lightblue" title="Yes">Y</td>
<td headers="type3 darkblue" title="Yes">Y</td>
<td headers="type3 lightgreen" title="Yes">Y</td>
<td headers="type3 darkgreen" title="No">N</td>
</tr>
</tbody>
</table>
Also, I added a title attribute in order to add a speakable alternative for screen readers (you could have used aria-label but title adds a tooltip for other people, except it is not keyboard friendly). Better choice would be to have here a full word.
I'm not sure what tool you are using, but have you tried using col and colgroup elements? There is some basic information here from W3C about irregular headers in data tables.
Also, I put together a quick JSFiddle based on your table if you want to look at that: https://jsfiddle.net/dngvc84o/
I am not really sure if there is a way to do this, and as of now I am thinking I will just make a separate element with absolute positioning and place it in the proper position.
This is what I would like to do with the table... Is it even possible? Right now I have the table that you can see part of to the right, but I was just trying to think of a way to do this.
I have a normal table layout as of now: But take a look at the fiddle: http://jsfiddle.net/W3Tvm/
I guess the main challenge will be trying to keep the border-radius
<table class="overviewTable">
<thead>
<tr>
<th colspan="5">
FAN FREE TERMINALS</th>
</tr>
</thead>
<thead class="posiOverviewPN">
<tr>
<th class="txHeader">
TX4200E</th>
<th class="ksHeader">
KS6700</th>
<th class="ksHeader">
KS7200</th>
<th class="ksHeader">
KS7500</th>
<th class="ksHeader">
KS7700</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img height="68px" src="../posiflex/images/tx-4200.png" width="120px"></td>
<td>
<img height="108px" src="../posiflex/images/ks6700.png" width="120px"></td>
<td>
<img height="109px" src="../posiflex/images/ks7200.png" width="120px"></td>
<td>
<img height="117px" src="../posiflex/images/ks7500.png" width="120px"></td>
<td>
<img height="119px" src="../posiflex/images/ks7700.png" width="120px"></td>
</tr>
</tbody>
</table>
I believe what you are wanting to do is basic table structuring: http://jsfiddle.net/9VULt/
All you need to do is have empty th/td cells:
<table>
<thead>
<tr>
<th><!--empty--></th>
<th>TX42</th>
</tr>
<tr>
<th><!--empty--></th>
<th>image</th>
</tr>
</thead>
<tbody>
<tr>
<td>Advantage</td>
<td>Industrial grade...</td>
</tr>
</tbody>
</table>
I am following the UN's accessibility guidelines to write accessible table.
I have this table. I made what -I think- should be a <th> bold.
This is the HTML:
<table width="100%">
<thead>
<tr>
<th>Year</th>
<th>1991</th>
<th>1995</th>
<th>2000</th>
<th>2002</th>
<th>2007</th>
</tr>
</htead>
<tbody>
<tr>
<th>Indicator 1</th>
<td>3.0</td>
<td>11.0</td>
<td>7.8</td>
<td>4.0</td>
<td>4.7</td>
</tr>
<tr>
<th>Indicator 2</th>
<td>9.0</td>
<td>23.4</td>
<td>19.5</td>
<td>9.4</td>
<td>9.1</td>
</tr>
<tr>
<th>Indicator 3</th>
<td>18.7</td>
<td>32.0</td>
<td>30.0</td>
<td>20.1</td>
<td>21.8</td>
</tr>
</tbody>
</table>
But I am not sure it is accurate. I think this makes more sense:
<table>
<tbody>
<tr>
<th id="year">Year</th>
<td headers="year" id="year-1991">1991</td>
<td headers="year" id="year-1995">1995</td>
<td headers="year" id="year-2000">2000</td>
<td headers="year" id="year-2002">2002</td>
<td headers="year" id="year-2007">2007</td>
</tr>
<tr>
<th id="indicator-1">Indicator 1</th>
<td headers="indicator-1 year-1991">3.0</td>
<td headers="indicator-1 year-1995">11.0</td>
<td headers="indicator-1 year-2000">7.8</td>
<td headers="indicator-1 year-2002">4.0</td>
<td headers="indicator-1 year-2007">4.7</td>
</tr>
<tr>
<th id="indicator-2">Indicator 2</th>
<td headers="indicator-2 year-1991">9.0</td>
<td headers="indicator-2 year-1995">23.4</td>
<td headers="indicator-2 year-2000">19.5</td>
<td headers="indicator-2 year-2002">9.4</td>
<td headers="indicator-2 year-2007">9.1</td>
</tr>
<tr>
<th id="indicator-3">Indicator 3</th>
<td headers="indicator-3 year-1991">18.7</td>
<td headers="indicator-3 year-1995">32.0</td>
<td headers="indicator-3 year-2000">30.0</td>
<td headers="indicator-3 year-2002">20.1</td>
<td headers="indicator-3 year-2007">21.8</td>
</tr>
</tbody>
</table>
What do you think? Does anyone have experience with tables and accessibility? Please provide references if possible. Thanks.
Note: I am aware of the summary attribute but I removed it here for simplicity.
For a table with a simple structure like this, your markup (the first, simple version) is sufficient for accessibility. A table with similar structure appears in HTML and XHTML Techniques for WCAG 2.0, item Using table markup to present tabular information, with no extra markup, just th for header cells.
Special techniques may be need for structurally more complicated tables.
However, a data table should normally have a caption element for accessibility and usability. It helps the user get key information about the table as a whole. Instead of a caption, a heading or just text before the table could be used for the purpose, but they do not associate with the table (at the markup level) the same way.
I found that using the scope attribute makes more sense:
<table width="100%">
<thead>
<tr>
<th scope="col">Year</th>
<th scope="col">1991</th>
<th scope="col">1995</th>
<th scope="col">2000</th>
<th scope="col">2002</th>
<th scope="col">2007</th>
</tr>
</htead>
<tbody>
<tr>
<th scope="row">Indicator 1</th>
<td>3.0</td>
<td>11.0</td>
<td>7.8</td>
<td>4.0</td>
<td>4.7</td>
</tr>
<tr>
<th scope="row">Indicator 2</th>
<td>9.0</td>
<td>23.4</td>
<td>19.5</td>
<td>9.4</td>
<td>9.1</td>
</tr>
<tr>
<th scope="row">Indicator 3</th>
<td>18.7</td>
<td>32.0</td>
<td>30.0</td>
<td>20.1</td>
<td>21.8</td>
</tr>
</tbody>
Reference: Use the th element to specify row and column headers in data tables | 456 Berea St
I am trying to shrink one cell in the table, but it refuses to shring..here is my table.
<table cellspacing="0" style="position: absolute;width: 990px;margin-left: 8px;" align="center">
<thead>
<tr class='no-wrap'>
<th width="20%"></th>
<th width="10%">Our Rating</th>
<th width="10%">Users' Rating</th>
<th width="30%">Review</th>
<th width="30%">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td width="20%"></td>
<td width="10%">Our Rating</td>
<td width="10%">Users' Rating</td>
<td width="30%">Review</th>
<td width="30%">Price</td>
</tr>
</tbody>
</table>
The problem is that the review part doesnt shrink..even when I give it a lower percentage..why is that?
You have incorrect HTML syntax.
You need to wrap your table row elements in tr:
<tbody>
<tr>
<td></td>...
</tr>
</tbody>
Also you have a </th> where you should have a <td> on your 2nd row, 4th cell (Review):
<td width="30%">Review</th>
I have an html table with one of the headers spanning over 2 columns. How can I add sub-headers to each of the 2 columns ?
For e.g. in the attached image, I want the 'Contact' column to have sub-headers 'Phone' and 'Address' for the respective columns.
The same way you would if you were drawing out the table on paper:
<table>
<thead>
<tr>
<th rowspan="2">Name</th>
<th rowspan="2">Email</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<th>Phone</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<!-- your data goes here -->
</tbody>
</table>
You need to have two separate header rows:
<tr>
<th rowspan="2">Name</th>
<th rowspan="2">Email</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<th>Number</th>
<th>Address</th>
</tr>
Add another row and put sub headers in <td /> tags. Maybe give the row a class and style the td text? That way they won't look identical to the real headers, that might cause confusion.
<table>
<tr>
<th>Title 1</th><th>Title 2</th><th colspan="2">Title 3</th>
</tr>
<tr>
<td>content</td><td>content</td><th>subtitle 1</th><th>subtitle 2</th>
</tr>
<tr>
<td>content</td><td>content</td><td>content</td><td>content</td>
</tr>
</table>