Creating Accordion Table with Materializecss - html

I am attempting in vain to recreate this question except using materalize css to do so.
Materalizecss Collapsible looks like it should be easy to implement into a table format although I'm not sure how to do it.
If anyone could provide a work example that would be great.
I've attempted to create a very small Jsfiddle example to no avail also.
<table class="striped">
<thead>
<tr>
<th data-field="id">Name</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
<tbody class="collapsible" data-collapsible="accordion">
<tr class="collapsible-header">
<td>Alvin</td>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr class="collapsible-body">
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
</tbody>
</table>

This is old but in-case anyone else is wondering.
MaterializeCSS 0.97.7 is looking for:
(> li > .collapsible-header)
(> li > .collapsible-body)
Not sure how to get the headers to line up but here's what I did for my test: https://jsfiddle.net/1cq8wd4p/

Related

Create a search bar to search value from table in HTML

I am trying to create a search bar to search values from tables.
Below is my html table code. But I don't know how to create a search bar in html to search values. Please see picture what I am trying to achieve. Thank you
<!DOCTYPE html>
<html>
<body>
<h1>Customer Data</h1>
<table border="1">
<tr>
<th>Customer ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Phone</th>
<th>Email</th>
<th>Address</th>
<th>Zip</th>
<th>Date of Birth</th>
</tr>
<tr>
<td>C1121</td>
<td>James</td>
<td>Bill</d>
<td> Male </td>
<td>123456789</td>
<td>J#gmail.com</td>
<td></td>
<td> </td>
<td>09/02/1999</td>
</tr>
<tr>
<td>C54</td>
<td>Sarah</td>
<td>Sean</d>
<td> Female </td>
<td></td>
<td></td>
<td>abc street</td>
<td>00000</td>
<td>01/26/1992</td>
</tr>
</table>
</body>
</html>
You will need to use JavaScript to add filtering functionality via your search input. Unfortunately, there is no way to do what you want via HTML alone.
Here is a great link that details how to created a Filter/Search for HTML elements with some straightforward JavaScript and no additional libraries. It seems to be exactly what you are looking for, though you will have to make some slight changes since you are wanting to filter table elements, and your rows are not associated with each other, which will make your solution more complex. But it's a good place to start.

Accessible Table with Sub Headings / Category Separation

EDIT: To the person who tagged this as having nothing to do with ADA. This question has everything to do with ADA. I have tons of websites with tables formatted like that which I am trying to figure out how to make them understandable to someone using a screen reader.
Hello I am trying to figure out a way to make a table which has subheadings / separator rows to announce the proper headings when being read by a screen reader.
The first table works as I would like, announcing the rowgroup's TH and then the column heading. However the second table doesn't announce as I was hoping. For example, Jill announces "Field Techs, Name, Jill" Instead of "Office, Name, Jill" as I had expected.
I've tried scope="col" and scope="colgroup" but neither helped. Is this even possible? or just a badly structured table?
Thank you for reading and any help/advice you may offer!
table thead, table th { background:#d3d3d3; }
table { margin-bottom:40px; }
<!-- This table's headings seem to work properly -->
<table width="100%" cellspacing="0" cellpadding="4" >
<thead>
<tr>
<td> </td>
<th id="name_col" scope="col" width="50%">Name</th>
<th id="position_col" scope="col" width="50%">Position</th>
</tr>
</thead>
<tbody>
<tr>
<th id="office_row" scope="rowgroup" rowspan="2">Office</th>
<td headers="office_row name_col">Jill</td>
<td headers="office_row position_col">Office Manager</td>
</tr>
<tr>
<td headers="office_row name_col">Robert</td>
<td headers="office_row position_col">Project Manager</td>
</tr>
<tr>
<th id="field_row" scope="rowgroup" rowspan="2">Field Techs</th>
<td headers="field_row name_col">Jason</td>
<td headers="field_row position_col">Tech</td>
</tr>
<tr>
<td headers="field_row name_col">Mike</td>
<td headers="field_row position_col">Tech</td>
</tr>
</tbody>
</table>
<!-- This table's headings don't announce correctly. Jill announces "Field Techs, Name, Jill"-->
<table width="100%" cellspacing="0" cellpadding="4" >
<thead>
<tr>
<th id="name_col" scope="col" width="50%">Name</th>
<th id="position_col" scope="col" width="50%">Position</th>
</tr>
<tr>
<th id="office_group" colspan="2">Office</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="office_group name_col">Jill</td>
<td headers="office_group position_col">Office Manager</td>
</tr>
<tr>
<td headers="office_group name_col">Robert</td>
<td headers="office_group position_col">Project Manager</td>
</tr>
</tbody>
<thead>
<tr>
<th id="field_group" colspan="2">Field Techs</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="field_group name_col">Jason</td>
<td headers="field_group position_col">Tech</td>
</tr>
<tr>
<td headers="field_group name_col">Mike</td>
<td headers="field_group position_col">Tech</td>
</tr>
</tbody>
</table>
table can only have zero or one thead element (see documentation).
Permitted contents : An optional caption element, followed by zero or more colgroup elements, followed by an optional thead element
By having multiple thead elements only the last one is considered by your browser and your screenreader. You can use ARIA attributes and roles to handle multiple separated heading lines (using for instance aria-labelledby attribute to specify the heading).
One example from WCAG:
ARIA9: Using aria-labelledby to concatenate a label from several text nodes
You are using both the scope method and header/id's method in one table, which will create problems. Also, as others have pointed out, you're using multiple <th> and <tbody> elements, which isn't good either.
I've prepared some code samples here on how to correctly code this table using both the scope method and header/id's method:
https://jsfiddle.net/oody1b8x/
It's worth noting that <th> and <tbody> are not accessibility-related elements, even though they appear to be. These are essentially only used when printing. It lets the printer know that the header rows can be repeated on the next page if the table requires pagination.
Also -- don't use ARIA for this purpose; it will only create more problems. The native HTML semantics are perfectly capable of communicating how this data is structured.

How can I make a HTML table with headers in one vertical column?

I want to make a HTML file that has the headers in one vertical column, and the data in the column to the right. There will only be 2 columns in total. I've looked at the html docs and seen stuff about scope, but I'm not entirely sure how to use it in this context. Example:
The HTML is pretty straightforward, just be sure to use the [scope] attribute to specify the correct orientation of the table.
<table>
<tbody>
<tr>
<th scope="row">City</th>
<td>$city</td>
</tr>
<tr>
<th scope="row">Latitude</th>
<td>$latitude</td>
</tr>
<tr>
<th scope="row">Longitude</th>
<td>$longitude</td>
</tr>
<tr>
<th scope="row">Country</th>
<td>$country</td>
</tr>
</tbody>
</table>
From the docs for the [scope] attribute:
The row state means the header cell applies to some of the subsequent cells in the same row(s).
You can create the tables with elements proceeded by elements like so:
<table>
<tr>
<th scope="row">Category 1</th><td>data1</td>
</tr>
<tr>
<th scope="row">Category 2</th><td>data2</td>
</tr>
<tr>
<th scope="row">Category 3</th><td>data3</td>
</tr>
Here is an example of it in action:
vertical headers

HTML Tables - can I have an additional tbody before the thead?

I need add to some elements on top of a table in line with the columns of the said table.
This table contains a <thead> (which is required due to jquery.tablesorter plugin). I assumed that if I put another <tbody> on top of the <thead> I would be able to keep these elements in line with the rest of the columns, but both chrome and firefox render every <tbody> below the <thead>.
Example:
<table>
<tbody>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
</tbody>
<thead>
<tr>
<th>head</th><th>head</th><th>head</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td><td>2</td><td>2</td>
</tr>
<tr>
<td>3</td><td>3</td><td>3</td>
</tr>
<tr>
<td>4</td><td>4</td><td>4</td>
</tr>
</tbody>
</table>
Although I understand this, I still need to find a way to have these elements stay in line with specific columns.
You can use multiple rows in <thead> like this:-
<table>
<thead>
<tr> <td>1</td> <td>1</td> </tr>
<tr> <td>head</td> <td>head</td> </tr>
</thead>
</table>
I recommend that you use an id (#) marker to identify that part that you want the js to work off and have the js use that id.
With that, have the thead first and the tbody last.
The variations you are describing may work - in the browser you using now, on the OS you are ok - and may be compliant a certain version of the HTML spec- but putting things in an unusual order is (in my expereince) just the kind of thing to not work, or work the same, everywhere and to eventually be the cause of much frustration, especially as the site grows in complexity.
One solution is to use another table inside one tr, in your thead. Althought, this is a totally ugly solution.
You can also place a div above your table using CSS.
Correct table structure is:
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
<thead> will always be on the top and <tfoot> will always be at the bottom.
Using jQuery you can swap <thead> and <tbody> content by:
$(document).ready(function() {
$('#myTrigger').click(function() {
var top = $('thead').html();
var mid = $('tbody').html();
$('thead').html(mid);
$('tbody').html(top);
});
});

split html table

i have a html table which looks like this:
<table>
<thead>
<tr>
<th >title1</th>
<th >title2</th>
<th >title3</th>
<th >title4</th>
<th >title5</th>
<th >title6</th>
<th >title7</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
...
<td>data7</td>
</tr>
</tbody>
the issue I am having is that I only have around 300px to put all this information in, I was wondering if there was some way that I can tell the table to split if it reaches the end of 300px limit. is this even possible ? or shall i just go back to using divs ?
I'm not sure what 'splitting' is, but a good alternative would be to wrap the table in a container with overflow-x: auto set. That will make it scrollable.
Live Example