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
Related
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.
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/
The two tables are inside one div (please see code below for an cut out of the code from bottom table), I would like to make the first column of the bottom div invisible....any ideas? thanks for replies
<table align="center" class="detailstable" style="width:100%">
<tr>
<th style="width:70%;"></th>
<th style="text-align:left;">Summary</th>
<th style="text-align:right;"></th>
</tr>
<tr>
<th style="width:70%;"></th>
<td style="text-align:left; width:100px;">Labour</td>
<th style="text-align:right; width:100px;"><%: this.FormatMoney(LabourTotal)%></th>
</tr>
</table>
if you want to make it look like its 'merged' with the cell that contains the total value, use CSS 'border-right-style' on the desired cell, for example:
<th style="width:70%; border-right-style:none;"></th>
Don't create the unwanted column, and instead position the second (now two column wide) table using the style. I would probably have removed the width from the second table and replaced it with float:right to make it align to the right...
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
I'm trying to space my HTML table headers using the width property and it's asif they are being ignored completely.
The 'Company Type' header is being split over two lines and so too is the Employment type? I do not have any table css in my css file. Which properties can I use to get each of the headers left-aligned and the next header along to start WIDTH pixels from the beginning of the previous header?
<thead style='float:left;'>
<tr>
<th style='width:270px;text-align:left;'>Company</th> <th style='width:150px;text-align:left;'>Company Type</th> <th style='width:80px;text-align:left;'>Employment Type</th>
</tr>
</thead>
<thead style='text-align:left;'>
<tr>
<th style='width:270px;'>Company</th>
<th style='width:150px;text-align:left;'>Company Type</th>
<th style='width:80px;text-align:left;'>Employment Type</th>
</tr>
</thead>
Try this and make sure that you have given width to all the header elements and total width does not exceed the table width.
I've never reliably got th and td width to work; not 100% sure they're meant to.
I usually just put a div inside the cell, and give that a width. Alternatively, add padding left and right to the th and td.
In a tableless way you could achieve that by this:
<div style="width:270px;float:left;">
Company
</div>
<div style="width:150px;float:left;">
Company Type
</div>
<div style="width:80px;float:left;">
Employment Type
</div>
Of course, you can style this up easily to your preference, and I'd keep the styles in a separate css file.
You could try 'nowrap' - but it isnt supported in HTML5
<th style='width:270px;text-align:left;'>Company</th>
<th style='width:150px;text-align:left;' nowrap>Company Type</th>
<th style='width:80px;text-align:left;' nowrap>Employment Type</th>