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>
Related
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.
I use datatable for displaying data and table has 14 columns
but i facing issue in display table header data.It overlapped rather then display in two lines
I create table like this
<table id="tbl" class="table" cellspacing="0" width="100%" style="word-wrap:break-word;
table-layout: fixed;">
<thead>
<tr>
<th>Column Name</th>
</tr>
</thead>
</table>
How can i do it in two lines
<table id="tbl" class="table" cellspacing="0" width="100%" style="word-wrap:break-word;
table-layout: fixed;">
<thead>
<tr>
<th style="word-wrap: break-word;">Column Name</th>
</tr>
</thead>
</table>
overfow:hidden should do the trick ;-)
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/
I have this simple html table
<table id="mytable">
<thead>
<tr>
<th>Name</th>
<th colspan="2">Actions</th>
</tr>
<tr>
<th>Delete</th>
<th>Update</th>
</tr>
</thead>
<tbody>
<tr>
<td>MyName</td>
<td onclick="delete()">X</td>
<td onclick="update()">U</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$('#mytable').DataTable();
});
</script>
If i open this on the browser i get
"Cannot read property 'mData' of undefined".
I don't undestand where is the problem.. I am following the official example: https://datatables.net/examples/basic_init/complex_header.html
Thank you all!
your html have unmatched number of columns, notice the first row of your header has colspan while the second row doesn't.
what you can do is to provide a rowspan.
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Actions</th>
</tr>
<tr>
<th>Delete</th>
<th>Update</th>
</tr>
</thead>
here's a link to the datatables example of complex headers. https://datatables.net/examples/basic_init/complex_header.html
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.