It's probably worth including the thead and tbody. A sticky thead is great for big tables and/or small screens.
ปีที่แล้ว +7
I thought the same with the sticky thead. I think that github does it when viewen large files and it's very usefull. Also tbody tag I always asumed that browser puts it if you forget it, but maybe was just my imagination.
Arghhh... Those sticky headers are a bitch to implement. Especially, if you're table is horizontally scrollable. Would love to see a couple of decent solutions for this
Pretty neat skill to have. You will have to work with tables at some point in your FE job if you're working for companies. Also worth to learn about how to make the sticky thead or footer when scrolling. Just another tutorial idea 😁
what i like to do on small sizes is to split (visually) the table rows, so they transform from table rows to self contained blocks/entities from a UI perspective
Thx, for this tutorial. Is there a codepen or sth. similar with the source code of the final table? I am asking, because I try to figure out, if this is compatible with filters for multiple columns.
instead of using the data-cell attribute, I would advocate for the use of headers attribute, which accepts a space separated values of the ids of the s that describes the cell. not only it can be used in the attr() function but with a small css/javascript you could add some cool functionalities to highlights specific cells of the same headers. on complex tables, it is common to have row and column headers, even group headers for a particular set of rows and columns, for those scenarios, and are also a good addition to the table markup
Not only that but it also makes it more accessible. Data attributes and "content" properties are not accessible as they are not part of the markup. While some assistive technologies may announce content in before/after psuedo elements it's best not to rely on this because it depends on the tool and user's settings. Given that before and after are mostly used for decorative purposes, these are often disabled by default, if at all.
@@wayneswildworld As in screen readers does not read data-attributes and often not decorative content on pseudo elements. They are not visible in the accessibility tree.
Narrower viewports usually (though not always) are on mobile, which has a touch interface, and so the scrollbar at the bottom is less of an issue. Also, the thead and tbody would be good to add (browsers will probably add it in anyways, but it's better to specify it yourself so you can better troubleshoot things). For example the table headers (first row) got lumped into the tbody
FYI, in HTML5 browser adds TBODY automatically. Neither THEAD nor TFOOT is added automatically. In HTML4 and older nothing is added (so TR is direct child of TABLE).
Interesting usecase for data attributes. I do question why use a script to add roles rather than add them in the HTML though? In most situations, we aren't going to write tables by hand - we have some framework running a loop over some data to generate this output. Whether it's PHP, React, Vue, we will probably only write one row and repeat it with a loop. So it's not a lot of extra work to add the role attributes too. Of course, it's pretty unfortunate that CSS would change the semantics - that seems like the wrong approach for the standard to have taken. If it's a table, it's a table. The styles shouldn't take that away, and we shouldn't be forced to add more bloat to our markup to put it back.
I’m building a sports website (including F1) for my portfolio right now and I’m having a little trouble with the tables so this video is quite relevant to my interests 👍🏽
This is awesome. Shopify unfortunately does not seem to support the "content" element. Does anyone know of a workaround? I'm not looking forwarding to adding headings to every single td and then hiding them for desktop view.
You can set up the table and all the data attributes with this emmet snippet: table>caption{The last 14 world F1 champions}+tr>th*6^tr*14>td[data-cell=name]+td[data-cell=poles]+td[data-cell=podiums]+td[data-cell=wins]+td[data-cell="career points"]+td[data-cell=championships]
A great intro to responsive tables and a lot simpler than I imagined. As for adding data-cell="column heading", I generate most of my tables either through PHP or Javascript so that's pretty easy to add to the template, in this case a JS template string: `${data[field]}` The site is multi-lingual, hence the curLang[field] item.
Kevin what if we used grids for table layout? I think we could have much better control of everything. Position sticky will work + resize columns option.
The accessibility fix should probably be done at compile/transpile time rather then at runtime. To make sure that the role (and other accessibility features) is added before JS is loaded.
@@najmantube Nataniel is suggesting to NOT use js to add the role. All the JS is doing is adding aria attributes, you can do this by hand when writing the HTML if you need to, or by adding it in with PHP or NodeJS on the server, etc.
The complete and proper nesting would be table caption colgroup thead (max 1) tfoot (max 1) tbody (1-n times) Yes *tfoot* comes before any tbody groups. The browser will still render it at the bottom. This is to support paged media rendering where the footer is repeated on every page
@@Silverflame1 it WILL work in all browsers 'cos that's how it was defined for ages and this falls into the "don't break the internet" category of backwards compatibility. Browsers have also always accepted a different ordering. I outlines the reason why it should come before tbody esp. for very long tables. Browsers will eventually reorder elements and also insert empty ones missing to complete the DOM.
Thank you for the video. Shouldn't we put the table header row in a thead tag and the table data rows under a tbody tag? Is there any major difference between your approach and this?
Nice one..... Not all web sites are "commercial sales" sites.. (cards etc)... some sites we create internally are for management to review preformance etc , and tables are a big part of those... tho' bootstrap does have useful utilis for these
If you display:none the ths at smaller screen sizes, will a screenreader be able to read the data-cell content and associate it with the related td? If a screenreader can't read the td::before content string (and I'm fairly certain that it can't) then maybe a better idea would be to use .sr-only type css eg. @media max-width 650px: td: before ... content="Wins" etc, td: display: grid, etc. and th: position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(0); border: 0;
@@chunich No, I don't think so. That's why I think the solution would be to hide the th's with screenreader-only CSS. They would then be available for SEO.
Nice and simple explanation! Looks like a jump cut edited out the formatting of the before container width at the 20:56 mark. Things went from in-line to column formatting.
There is ZERO reason to be using tables in 2023. None whatsoever. Period. Tables are just plain awful and cause all sorts of problems. With grid and flex, they are 100% obsolete. If you're still using tables, you suck at your job.
My initial guess in the first few seconds was 14th was going to be Villeneuve... so well happy your favourite turned out to be Mansell! 😁👍 BTW.... "Rico"?! 🤣🤣🤣
A video about responsive . Kevin, you are a hero. You could have mentioned the scope attribute also, but it is explained well in Adrian's blog posts. Thank you.
Very helpful, thank you! Could you further use the media query to have the right side of each row on mobile have an 'id' block which takes up the full height of the row?
Wouldn't it be better (more accessible) to use use AXIS attribs instead of semantic-less DATA-CELL attribs to label the cell's column? You can still use "content:attr(axis)" the same, but with less typing and more meaning...
6:40 Just a comment but back in the old days, if I were to do something like this, I would probably put it all into Excel and then convert the .xls to .htm so that I could view it beforehand and fix any mistakes in Excel before pasting them into my page. I tried this with today's Excel and it is a bit messy compared to 20 years ago but it is still possible to use Excel to create it then copy that to your page and clean it up if you want. BTW, after 20 years of not programming, I'm getting the itch to get back into it. Having fun with it for now. lol edit: I just tried this method out and it seems to still work pretty well as long as Excel skills are good. If they don't know Excel, I'd just write it out long hand instead. You don't get a nice clean result as we did 20 years ago, but an experienced person may find it helpful to use Excel for a table like this. As an aside: A simple Excel script can be written to make it even easier to turn an Excel table into a simple/basic HTML table.
Love or hate them, tables have their place in web design. I started designing sites with tables and this was before css files existed, all styles were tagged with each element. Fun times. Back then one didn't have to worry about responsiveness so it was easy to churn websites out at a high rate.
Honestly, html tables haven't changed much from the 90's. They should be responsive out of the box now. CSS should just tell it what fonts and colors to use.
To have different styles for header and body using THEAD and TBODY is the way to go. And for filling in data in the table, orgtbl-mode ftw. Years ago I did a quick and dirty video showcasing it: th-cam.com/video/EQAd41VAXWo/w-d-xo.html
Hello! What if the columns and rows are inverted? I can't find any solution to display one column underneath one another instead rows like u did in your example.
I can remember one GP of Monaco where Senna managed to keep Mansell behind himself in an inferior car for all of the final laps... Sorry. I always will be a Senna Fanboy ;-)
Your solution is great. I usually use the overflow one because most of the time data presented in tables is viewed on larger devices but now that I know that it's as easy and straight forward as this, I don't have to rely on a UI framework to handle tables. Thank you.
What is a solution for a sticky header with horizontal scrolling of the table content? This is my biggest problem and i cant find a good solution. I also found the page of Roselli but there is no solution for this. Why do we need this javascript instead of writing the roles in the template itself?
I was thinking you were going to do a sticky header and a sticky first column.. that way you could scroll the content inside without losing context of the headers and first column…
Your video couldn't have arrived at a better time: I'm just finishing an API whose data needs to be displayed in a table. Your video helped me a lot. Thank you so much!
Hmm it sucks that in order to have the single column table thing you either have to repeat the name of the columns in all rows or you have to pollute the css. In a web development perspective the former is more convenient. It's easier to have dynamic columns handled that way than to generate the css for it.
Oh no, I didn't even notice when editing it! Browser fixed it for me since it will close unclosed tags for most things when it renders the page... Or at least I'm guessing it did and that's why I didn't notice
hi kevin! just a comment: be careful when you hide the row header completely, remember that tables are a matrix of crossed data (columns / rows), so each row cell needs the column reference, so by hiding it, that cell loses the reference, hence the SR is not gonna announce it, even if you add the data-cell attribute the user is gonna hear it, but they are actually inside a table, so they are gonna navigate it as such, expecting the columns to be there and heard as they navigate each row cell from left to right or viceversa the best way for this to work is to override all CSS from the thead (so it's not using any spacing/colors) and use a span to wrap its content with the famous "sr-only"/"visually-hidden" class only for smaller resolutions, that way the column headers are still semantically present but not visible; then inside each cell, use another span with the column's name (also only for small resolutions) and aria-hidden="true" attr to avoid SRs. Now the SR user is going to navigate through a table and visually it's going to look like a "list" more complex, yes, but this way you are covering all type of users and assistive technologies in a more semantic way
That's interesting. But I wonder if it's limited to a single header table. How will it work on tables with irregular heading? Also, the table is one of the few that is allowed to have a side scroll according to WCAG SC 1.4.10.
Very interesting. Allthough I don't make websites anymore, I'm still following your channel on TH-cam. Keep on with the good work. Just a small remark, you didn't copy the name of Sebastian Vettel very well in your video :) But that's just because I can't find something else to complain about :)
It's probably worth including the thead and tbody. A sticky thead is great for big tables and/or small screens.
I thought the same with the sticky thead. I think that github does it when viewen large files and it's very usefull. Also tbody tag I always asumed that browser puts it if you forget it, but maybe was just my imagination.
Arghhh... Those sticky headers are a bitch to implement. Especially, if you're table is horizontally scrollable. Would love to see a couple of decent solutions for this
table tr:first-of-type {
position: sticky;
top: 0;
}
@@404-UsernameNotFound This doesn't work as-is
Regardless of the need for a sticky header, thead and tbody are surely the correct way to define a table semantically?
Thank you for this valuable video! Kevin, it is the best solution for my project!
Pretty neat skill to have. You will have to work with tables at some point in your FE job if you're working for companies. Also worth to learn about how to make the sticky thead or footer when scrolling. Just another tutorial idea 😁
what i like to do on small sizes is to split (visually) the table rows, so they transform from table rows to self contained blocks/entities from a UI perspective
Thx, for this tutorial.
Is there a codepen or sth. similar with the source code of the final table?
I am asking, because I try to figure out, if this is compatible with filters for multiple columns.
We're not using thead? I was wondering if that was part of accessibility or just declarative if your header has multiple rows?
This is exactly what I was looking for for the last 2 years! THANK YOU!
instead of using the data-cell attribute, I would advocate for the use of headers attribute, which accepts a space separated values of the ids of the s that describes the cell. not only it can be used in the attr() function but with a small css/javascript you could add some cool functionalities to highlights specific cells of the same headers. on complex tables, it is common to have row and column headers, even group headers for a particular set of rows and columns, for those scenarios, and are also a good addition to the table markup
Not only that but it also makes it more accessible. Data attributes and "content" properties are not accessible as they are not part of the markup. While some assistive technologies may announce content in before/after psuedo elements it's best not to rely on this because it depends on the tool and user's settings. Given that before and after are mostly used for decorative purposes, these are often disabled by default, if at all.
@@deallocWhat do you mean by not accessible?
@@wayneswildworld As in screen readers does not read data-attributes and often not decorative content on pseudo elements. They are not visible in the accessibility tree.
@@dealloc aaaah I understand! thanks for taking the time to respond!
@@wayneswildworld cant use the clipboard either
I have known the era of « layout with table » too. CSS was not the same during the Jurassic !
I once had to design some email templates and I was grateful for modern CSS
@@precisionchoker That's why I avoid doing email templates
I feel you. Still a pain nowadays with email templates.
I was there Gandalf, 2000 years ago
@@precisionchoker😊
Narrower viewports usually (though not always) are on mobile, which has a touch interface, and so the scrollbar at the bottom is less of an issue. Also, the thead and tbody would be good to add (browsers will probably add it in anyways, but it's better to specify it yourself so you can better troubleshoot things). For example the table headers (first row) got lumped into the tbody
Also with mouse and keyboard Shift+mouse scroll scrolls horizontally
Exactly
FYI, in HTML5 browser adds TBODY automatically. Neither THEAD nor TFOOT is added automatically. In HTML4 and older nothing is added (so TR is direct child of TABLE).
Interesting usecase for data attributes. I do question why use a script to add roles rather than add them in the HTML though? In most situations, we aren't going to write tables by hand - we have some framework running a loop over some data to generate this output. Whether it's PHP, React, Vue, we will probably only write one row and repeat it with a loop. So it's not a lot of extra work to add the role attributes too. Of course, it's pretty unfortunate that CSS would change the semantics - that seems like the wrong approach for the standard to have taken. If it's a table, it's a table. The styles shouldn't take that away, and we shouldn't be forced to add more bloat to our markup to put it back.
I’m building a sports website (including F1) for my portfolio right now and I’m having a little trouble with the tables so this video is quite relevant to my interests 👍🏽
You taught me CSS and now I'm one of the best in the whole University..
Thank you Kevin
What a fabulous tutorial on tables. I’m really grateful for this. Thanks for working your CSS magic Kevin.
Kevin providing the knowledge once again! You're a life saver sometimes with the videos you create. They always seem to come at just the right time!
Ah yes, my favourite F1 driver Rico Rosberg.
PS. Another awesome video Kev, keep rocking ❤️
Rico and Vettle real GOATs.
You really should use and elements within the table around the respective sections.
This is awesome. Shopify unfortunately does not seem to support the "content" element. Does anyone know of a workaround? I'm not looking forwarding to adding headings to every single td and then hiding them for desktop view.
You can set up the table and all the data attributes with this emmet snippet:
table>caption{The last 14 world F1 champions}+tr>th*6^tr*14>td[data-cell=name]+td[data-cell=poles]+td[data-cell=podiums]+td[data-cell=wins]+td[data-cell="career points"]+td[data-cell=championships]
Thank you, Kevin! You're like Joda CSS master. Be healthy and successful!
A great intro to responsive tables and a lot simpler than I imagined.
As for adding data-cell="column heading", I generate most of my tables either through PHP or Javascript so that's pretty easy to add to the template, in this case a JS template string:
`${data[field]}`
The site is multi-lingual, hence the curLang[field] item.
Kevin what if we used grids for table layout? I think we could have much better control of everything. Position sticky will work + resize columns option.
Thank you for making room for Ayrton Senna 🇧🇷🇧🇷🇧🇷
The accessibility fix should probably be done at compile/transpile time rather then at runtime. To make sure that the role (and other accessibility features) is added before JS is loaded.
How can the role etc get added before the JS is loaded if we're using JS to add the role etc?
@@najmantube Nataniel is suggesting to NOT use js to add the role. All the JS is doing is adding aria attributes, you can do this by hand when writing the HTML if you need to, or by adding it in with PHP or NodeJS on the server, etc.
@@TheNeonRaven Yes thanks, got it (see my previous comment).
The complete and proper nesting would be
table
caption
colgroup
thead (max 1)
tfoot (max 1)
tbody (1-n times)
Yes *tfoot* comes before any tbody groups. The browser will still render it at the bottom. This is to support paged media rendering where the footer is repeated on every page
Both developer mozilla and w3school mention that tfoot needs to come after tbody. It might still work for some browsers but it is not recommended.
@@Silverflame1 it WILL work in all browsers 'cos that's how it was defined for ages and this falls into the "don't break the internet" category of backwards compatibility.
Browsers have also always accepted a different ordering.
I outlines the reason why it should come before tbody esp. for very long tables. Browsers will eventually reorder elements and also insert empty ones missing to complete the DOM.
Thank you for the video. Shouldn't we put the table header row in a thead tag and the table data rows under a tbody tag? Is there any major difference between your approach and this?
Nice one..... Not all web sites are "commercial sales" sites.. (cards etc)... some sites we create internally are for management to review preformance etc , and tables are a big part of those... tho' bootstrap does have useful utilis for these
Man, the TH-cam video compression algorithm is really wreaking havoc on those zebra lines, the border between the two colors is really fuzzy for me
This helps alot , Thanks @kevin
WOW. This is a gold mine. Thanks a lot Kevin. Am sure you will receive a lot of love because this has been a wish for many people.
Its time we rethink what a browser, a page, a document, an app, are. It all started out as an analogy of a newspaper. Time to upgrade the analogy.
If you display:none the ths at smaller screen sizes, will a screenreader be able to read the data-cell content and associate it with the related td? If a screenreader can't read the td::before content string (and I'm fairly certain that it can't) then maybe a better idea would be to use .sr-only type css eg. @media max-width 650px: td: before ... content="Wins" etc, td: display: grid, etc. and th:
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(0);
border: 0;
Good point on screen reader. I also was thinking of SEO is able to pick up the names from css content?
@@chunich No, I don't think so. That's why I think the solution would be to hide the th's with screenreader-only CSS. They would then be available for SEO.
I would say that using data attribute for the pseudo class content is the better option especially if you have a multi-lingual site.
Nice and simple explanation! Looks like a jump cut edited out the formatting of the before container width at the 20:56 mark. Things went from in-line to column formatting.
There is ZERO reason to be using tables in 2023. None whatsoever. Period. Tables are just plain awful and cause all sorts of problems. With grid and flex, they are 100% obsolete. If you're still using tables, you suck at your job.
My initial guess in the first few seconds was 14th was going to be Villeneuve... so well happy your favourite turned out to be Mansell! 😁👍
BTW.... "Rico"?! 🤣🤣🤣
A video about responsive . Kevin, you are a hero. You could have mentioned the scope attribute also, but it is explained well in Adrian's blog posts. Thank you.
Very helpful, thank you! Could you further use the media query to have the right side of each row on mobile have an 'id' block which takes up the full height of the row?
Wouldn't it be better (more accessible) to use use AXIS attribs instead of semantic-less DATA-CELL attribs to label the cell's column? You can still use "content:attr(axis)" the same, but with less typing and more meaning...
6:40 Just a comment but back in the old days, if I were to do something like this, I would probably put it all into Excel and then convert the .xls to .htm so that I could view it beforehand and fix any mistakes in Excel before pasting them into my page. I tried this with today's Excel and it is a bit messy compared to 20 years ago but it is still possible to use Excel to create it then copy that to your page and clean it up if you want.
BTW, after 20 years of not programming, I'm getting the itch to get back into it. Having fun with it for now. lol
edit: I just tried this method out and it seems to still work pretty well as long as Excel skills are good. If they don't know Excel, I'd just write it out long hand instead. You don't get a nice clean result as we did 20 years ago, but an experienced person may find it helpful to use Excel for a table like this.
As an aside: A simple Excel script can be written to make it even easier to turn an Excel table into a simple/basic HTML table.
Love or hate them, tables have their place in web design. I started designing sites with tables and this was before css files existed, all styles were tagged with each element. Fun times. Back then one didn't have to worry about responsiveness so it was easy to churn websites out at a high rate.
Honestly, html tables haven't changed much from the 90's. They should be responsive out of the box now. CSS should just tell it what fonts and colors to use.
To have different styles for header and body using THEAD and TBODY is the way to go.
And for filling in data in the table, orgtbl-mode ftw. Years ago I did a quick and dirty video showcasing it: th-cam.com/video/EQAd41VAXWo/w-d-xo.html
this video is awesome (liked and subscribed :)
..but would you mind explaining, how to turn this into a mobile first design?
Hello! What if the columns and rows are inverted? I can't find any solution to display one column underneath one another instead rows like u did in your example.
20:55 - 21:00 Suddenly there's perfect spacing there but no explanation as to how that was accomplished. Anyone know how that was done?
Using overflow wont work when using grid. The grid item will just grow to fit the table. Im probably doing something wrong.
Already 3 championship titles for Max :) so you need to update your video :)
I can remember one GP of Monaco where Senna managed to keep Mansell behind himself in an inferior car for all of the final laps... Sorry. I always will be a Senna Fanboy ;-)
Collapsing tables should be standard for every CMS since like decade ago...
Great video!
You made a mistake @27:15 you accidently removed the end tag for table not the div.
Your solution is great. I usually use the overflow one because most of the time data presented in tables is viewed on larger devices but now that I know that it's as easy and straight forward as this, I don't have to rely on a UI framework to handle tables. Thank you.
This video is exactly what I was looking for. Thank you!!
This is great, cause I am just about to create table in NextJs app that I am actually working on in my youtube channel so thanks a lot Kevin 👍
What is a solution for a sticky header with horizontal scrolling of the table content? This is my biggest problem and i cant find a good solution. I also found the page of Roselli but there is no solution for this. Why do we need this javascript instead of writing the roles in the template itself?
Omg, I’d almost managed to forget the days of table layout and single pixel transparent gifs everywhere
A man absolutely is not familiar with JS.
To assign roles you have to create small config and not to multiple "for" loops, because it is anti-pattern.
I was thinking you were going to do a sticky header and a sticky first column.. that way you could scroll the content inside without losing context of the headers and first column…
I think we can re do it with the subgrid property.
I don't know if I watch too many of your videos, but that felt really weird to not hear "Hello my friend and friends" from the outset..
Hi Kevin, great video, where is the link to the video which deals with the wrapper (10m40s) ?
Here's how I implemented responsive tables on our platform: th-cam.com/video/ehEvqEi3Wts/w-d-xo.html
Your video couldn't have arrived at a better time: I'm just finishing an API whose data needs to be displayed in a table. Your video helped me a lot. Thank you so much!
20 min in the video , all i have to say is tooo manyyyy wayyyyy many ads poping every 3min 😮💨😮💨😮💨
Hmm it sucks that in order to have the single column table thing you either have to repeat the name of the columns in all rows or you have to pollute the css. In a web development perspective the former is more convenient. It's easier to have dynamic columns handled that way than to generate the css for it.
Why not use Chatgpt to generate the content instead of manually copy pasting from wikipedia?
Now, try to add vertical scroll into the body only, so header stays always visible. Would be nice to see how this could be achieved ;)
well, side scrolling on mobile works from any position... just sayin
Oh... It is strange that semantic engines rely on "after css" display properties rather than on actual tags...
I also like to use the thead, tbody and tfoot. Gives a bit more flexibility for styling.
How would add the ability to sort in the table and also add or remove columns by selecting them. Also would be cool if we made the columns movable
Geat till now, but as quick note, @ 15:21 you delete , but 15:27 you delete the ending tag for table insteal of the ending tag for div.
Oh no, I didn't even notice when editing it!
Browser fixed it for me since it will close unclosed tags for most things when it renders the page... Or at least I'm guessing it did and that's why I didn't notice
Thanks for this video! Very helpful 💪
By the way, i've made a new JS Code for Table Aria Labels. Check it if you want!
function AddTablesAriaLabels() {
const tablesAriaLabels = document.querySelectorAll('table');
const captionsAriaLabels = document.querySelectorAll('caption');
const rowGroups = document.querySelectorAll('thead, tbody, tfoot');
const columns = document.querySelectorAll('th');
const rows = document.querySelectorAll('tr');
const cells = document.querySelectorAll('td');
if (tablesAriaLabels) {
tablesAriaLabels.forEach(tableAriaLabel => {
tableAriaLabel.setAttribute('scope','table');
});
}
if (captionsAriaLabels) {
captionsAriaLabels.forEach(captionAriaLabel => {
captionAriaLabel.setAttribute('scope','caption');
});
}
if (rowGroups) {
rowGroups.forEach(rowGroup => {
rowGroup.setAttribute('scope','rowgroup');
});
}
if (columns) {
columns.forEach(column => {
column.setAttribute('scope','col');
});
}
if (rows) {
rows.forEach(row => {
row.setAttribute('scope','row');
row.children[0].setAttribute('role','rowheader');
});
}
if (cells) {
cells.forEach(cell => {
cell.setAttribute('scope','cell');
});
}
}
awesome tutorial. but what about "content: attr(data-cell)" is it crossbrowser solution ?
~_~ Why did youtube unsuscribe me ... glad to be back though.
hi kevin! just a comment: be careful when you hide the row header completely, remember that tables are a matrix of crossed data (columns / rows), so each row cell needs the column reference, so by hiding it, that cell loses the reference, hence the SR is not gonna announce it, even if you add the data-cell attribute the user is gonna hear it, but they are actually inside a table, so they are gonna navigate it as such, expecting the columns to be there and heard as they navigate each row cell from left to right or viceversa
the best way for this to work is to override all CSS from the thead (so it's not using any spacing/colors) and use a span to wrap its content with the famous "sr-only"/"visually-hidden" class only for smaller resolutions, that way the column headers are still semantically present but not visible; then inside each cell, use another span with the column's name (also only for small resolutions) and aria-hidden="true" attr to avoid SRs. Now the SR user is going to navigate through a table and visually it's going to look like a "list"
more complex, yes, but this way you are covering all type of users and assistive technologies in a more semantic way
You should make video about it.
can you include images as content inside td and use flex to crated cards like layout on mobile where each row gets converted to cards.
That's interesting. But I wonder if it's limited to a single header table. How will it work on tables with irregular heading? Also, the table is one of the few that is allowed to have a side scroll according to WCAG SC 1.4.10.
Thank you alot, so simple but very effective solution.
You deleted instead of !
usecase of data-cell was great. but how about col-span or row-spanned tables??
Sebastian Vettle, Rico Rosberg? Never heard of em
I never knew about using attributes in css, that's really cool
what are some good examples of responsive tables anyone could point me to ?
13:30 is when the guy starts the responsiveness. Why it takes so long, don't know 😅
Wow, i didn't know you are into F1. That's great.
This really helped me beef up my final, thank you!!
Tables are still very much relevant for data listing.
nth-of-type(2n) you can change it using either odd or even
Really inspired by this video. Thanks.
I'm stealing this for my open source project
Rico "Bobby" Rosberg was undeniable, quite "suave". Definitely my favorite champion!
Very interesting. Allthough I don't make websites anymore, I'm still following your channel on TH-cam. Keep on with the good work.
Just a small remark, you didn't copy the name of Sebastian Vettel very well in your video :)
But that's just because I can't find something else to complain about :)
I probably typed his name for some reason and made a new of it 😅
I've never seen border-collapse before, that's interesting
You get a like just for using a F1 Table 👍🏼
How can I position the caption at the top of the table? in my case it is always at the bottom.
This is absolutely amazing! Been needing this and am so glad you decided to cover it -- thank you so much!!
th-cam.com/video/czZ1PvNW5hk/w-d-xo.html YOU DELETED TABLE END TAG INSTEAD OF DIV
I wish I had this technique for pass project