How to create a responsive HTML table

Подписаться 914 тыс.

Просмотров 205 тыс.

0% 0

Sometimes, using a table is the best option, but making them responsive isn’t very fun. Luckily, it doesn’t have to be that hard!
We do need to be careful though, because when we change the display property of the different elements in a table, it will strip them semantics away, but there’s a nice and pretty simple fix for that as well 🙂.
🔗 Links
✅ Adrian Roselli’s in-depth article on responsive, accessible tables: adrianroselli.com/2017/11/a-r...
✅ Adrians JS Scripts to add aria to tables (and lists): adrianroselli.com/2018/05/fun...
⌚ Timestamps
00:00 - Introduction
00:46 - Setting up the table
07:00 - My main source of info for this
07:31 - Basic CSS to get the table looking better
10:19 - Very simple responsiveness
11:07 - More CSS styles to improve the look
13:30 - The easiest way to make it responsive with a table-container
15:31 - A more robust solution
20:55 - Alternative to data-attributes
22:50 - Using grid to improve the layout inside cells a little
24:10 - Fixing the accessibility at small screen sizes
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RU-vid channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Опубликовано:

4 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 316

@Astroplatypus Год назад

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.

@mityukov Год назад

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

@404-UsernameNotFound Год назад

table tr:first-of-type { position: sticky; top: 0; }

@daguttt Год назад

@@404-UsernameNotFound This doesn't work as-is

@marklnz Год назад

Regardless of the need for a sticky header, thead and tbody are surely the correct way to define a table semantically?

@orlandosfilmwerks Год назад

This is exactly what I was looking for for the last 2 years! THANK YOU!

@BenjaminEmm Год назад

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!

@benjaminmosnier Год назад

I have known the era of « layout with table » too. CSS was not the same during the Jurassic !

@precisionchoker Год назад

I once had to design some email templates and I was grateful for modern CSS

@LastRoseStudios Год назад

@@precisionchoker That's why I avoid doing email templates

@ClaudioBrogliato Год назад

I feel you. Still a pain nowadays with email templates.

@bojancenikol Год назад

I was there Gandalf, 2000 years ago

@evanevan5096 Год назад

@@precisionchoker😊

@chriswinslow Год назад

What a fabulous tutorial on tables. I’m really grateful for this. Thanks for working your CSS magic Kevin.

@leoschuler Год назад

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

@dealloc Год назад

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 Год назад

@@deallocWhat do you mean by not accessible?

@dealloc Год назад

@@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.

@wayneswildworld Год назад

@@dealloc aaaah I understand! thanks for taking the time to respond!

@gabydewilde Год назад

@@wayneswildworld cant use the clipboard either

@andygordon6880 12 дней назад

What a brilliant tutorial. Hits the mark perfectly and easy to follow. Thank you.

@m.neiss001 Год назад

This is absolutely amazing! Been needing this and am so glad you decided to cover it -- thank you so much!!

@fave1201 Год назад

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.

@evil-cheetah Год назад

Kevin, thank you for what you do! You taught us a lot for past few years! I felt in love with css and built my thinking process on how to build responsive layouts! Thank you very much! However, community demands part 2.

@cedrictheveneau9141 Год назад

As someone who still does newsletters the old fashion way (coding them myself, using tables), I love the fact you’ve adresses this subject !

@vladimirmijatovic4171 Год назад

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!

@tobiasfedder1390 Год назад

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.

@StephenBolger Год назад

I have been looking for a simple approach like this. I was struggling a little with creating a responsive solution for data that was best put in a table, while keeping it accessible. I really like these solutions.

@IanZamojc Год назад

Another approach that is more mobile-first is to start with a and style it with table attributes on larger screen sizes. Unfortunately, you still need a bit of extra markup to do the table heading.

@knghtbrd Год назад

Oh THANK YOU KEVIN! I've struggled a bit with this because at some point you do just need to break the table into stacks or grids or something and the way tables work is just WEIRD. The question was what to do with it once you decide you've gotta break from table to something else, and what precisely that something else should be. Grid is obviously the solution, and while you used it to simply stack everything, you could come up with more complex layouts at a couple different screen sizes to account for e.g. desktop, tablet, and phone. I had an idea what doing this right might look like, I just needed to see the pieces assembled, so thank you for doing that!

@maziasty Год назад

Rico and Vettle real GOATs.

@RobBulmahn Год назад

You really should use and elements within the table around the respective sections.

@bobwightman1054 Год назад

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.

@_LtLIGMA_ Год назад

You are single handedly getting my through my Diploma. Thank god you exist my friend!

@vivekkumar-pc1xy 10 месяцев назад

Your all videos are worth to add in my youtube library for future references

@alvarojflores Год назад

Thank you, Kevin! You're like Joda CSS master. Be healthy and successful!

@abiiranathan Год назад

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.

@adijain Год назад

Ah yes, my favourite F1 driver Rico Rosberg. PS. Another awesome video Kev, keep rocking ❤️

@magnoid 2 месяца назад

Kevin, this is Awesome. I'm so glad I found your channel! Loving pretty much every video you put out!

@shawnweddle3002 Год назад

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 👍🏽

@leoMC4384 Год назад

Great content as always. I remember that in this full stack MERN project I developed, I had to implement responsive tables as a functional reusable React component. I had like 4 or 5 tables in that website. I remember I used a base code from Codepen but I had to change several things in it as well and add others. It drove me nuts but I got it done. It was worth it. 👍

@Like_a_lion_744 Год назад

Thank you so much Kevin! This is exactly what I needed, I left a comment on some previous video asking for this topic. Much appreciated!

@TobyDawes Год назад

I know this is an HTML table tutorial, but I certainly love the F1 aspect, and historically "Our Nige" is my favorite driver too!

@CirTap Год назад

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

@deniskravchuk707 Год назад

It's Amazing! So simple and so workable. Thank you!

@joshespinoza3349 Год назад

just implemented this into our ticket-tracking system and people love it!

@TheTiffanyAching Год назад

Holy timely, Batman! I just started looking into this yesterday.

@RaveKev Год назад

I know this "trick" from the default OutSystems Styles. Tables behave there like this too. I'm not thaaaat happy with the table result, but i think that's all you can expect from an easy and fast responsive approach. Great that you made it public!

@Made2hack Год назад

Rico "Bobby" Rosberg was undeniable, quite "suave". Definitely my favorite champion!

@musahkamara 11 месяцев назад

Thanks so much, now I can complete my responsive table project.

@blocSonic 5 месяцев назад

Terrific ideas beyond the container overflow-x trick, which is what I have usually gone to. Thanks!

@LastRoseStudios Год назад

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

@Ekitchi0 Год назад

Also with mouse and keyboard Shift+mouse scroll scrolls horizontally

@Warface Год назад

Exactly

@mina86 10 месяцев назад

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).

@ayodejiikujuni1233 Год назад

Love this so much Kevin... Always had to run to grid when to deal with it.. Thank you so much

@dreamer5959 Год назад

I never knew about using attributes in css, that's really cool

@tarunchaudhary3958 Год назад

I like it that you choose F1. It made the video a lot more interesting 😊

@PhilKerrigan Год назад

thanks so much for making this video - great solution for a responsive table.

@glencoventon2523 Год назад

This is awesome and very helpful. Thanks Kevin keep up the great work.

@PresidenteHollanda Год назад

To me you are a CSS magician, all those commands you do out of your head. I make a lot of use of Bootstrap, but that reacts sometimes so weird. More and more i think i have to go back to basic CSS. Very good info on making a table responsive, thank you for sharing.

@gabrielferrin 7 месяцев назад

Great video! Thanks!

@flashbond Год назад

I love the way that your brain works.

@nathymangaYT Год назад

Didn't know the semantic could break with CSS. I mean, of course I knew that a display : none would eventually prevent screen readers to describe an element, but I was not aware that a display block on a table,tr,td,... element would change its semantic. Thanks a lot !

@EdwardSmith-nq9wy 6 месяцев назад

This really helped me beef up my final, thank you!!

@AREACREWBMX Год назад

Finally. This IS not a video, THIS IS THE VIDEO!

@luiscosta2385 Год назад

your videos are awsome!!! learning a ton with them! Thank you kind sir

@pinnaclewd Год назад

Fantastic fix for responsive table...the bain of my life!

@lawrencepsteele Год назад

Before my recent retirement, my team supported a LOT of HR-data related intranet sites where the output was tabular. We used the data-attribute method and it worked quite well. One thing with the display-grid method (which we did not use) is that it handles even narrower layouts since a single header/data element combo take up a single column, which would reduce the overflow seen around <a href="#" class="seekto" data-time="1435">23:55</a>.

@user-os8kr9rj9j Год назад

thank you veryy much ,it's delivered at the right time ,i need it now ,thx mate

@_the_one_1 Год назад

Wow I didn't know that! Awesome! Thank you!

@nashidmifzal79 Год назад

Oh man!! Responsive tables can't b more simple 😎, awesome 👍

@TKomoski Год назад

I've always had problems with tables, but this helps Kevin thanks

@carloautor Год назад

Always great content!

@sergei_sg 8 месяцев назад

Thank you, Kevin! This is a great solution!

@NeoMatrix1990 Год назад

Amazing! Thanks!

@BrianClincy Год назад

We're not using thead? I was wondering if that was part of accessibility or just declarative if your header has multiple rows?

@stephanemo2135 Год назад

Fantastic ! A big thank-you

@ewomer100 Год назад

When a content creator is out of touch about what type of audience he has, go back and fix that table. First, you messed up the table, then you didn't fix it, third you told us not to worry about it, but worst of all, you told us about it, NOW, that is all I'm looking at. We need you to post a video of the table fixed, thank you.

@ewomer100 Год назад

Oh thank God, you fixed it at 18:15

@user-hb5dt2bi6n 10 месяцев назад

Awesome video, very helpful. The data-cell attribute approach works for me because I create tables dynamically in code.

@nelsonnguyen2738 Год назад

Thank you alot, so simple but very effective solution.

@24Ippo 6 месяцев назад

I've been struggling with CSS and every video you made has clarified every issue i have with. Now i can make decent web sites that doesn't look as they were made for Netscape

@historynerd6630 Год назад

great and very helpful ... as always

@mrspade404 Год назад

Nice and simple explanation! Looks like a jump cut edited out the formatting of the before container width at the <a href="#" class="seekto" data-time="1256">20:56</a> mark. Things went from in-line to column formatting.

@scyfox. Год назад

I had the trouble of working with tables and found a nice solution. Switching were possible from rows to columns, and placing the thread rows at first

@KelseyThornton Год назад

Tables are the bane of modern CSS - This allows us to still use tables (for tabular data - maybe from anohter source), and still be responsive Great video!

@homevids Год назад

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.

@user-pm4vd6ij8i Год назад

Really inspired by this video. Thanks.

@kleberkibe Год назад

Friend, that was great. Thanks !!!!

@gamertag8721 Год назад

Make it responsive given the requirement, if you are building a B2B web app, where tables have large number of columns, and scroll horizontally even on computer screens, this might not be a solution you are looking for. Ask first, is my data a tabular data, or is it just for presentation, if it is just for presentation, then I don't think it should be a table in the first place. But I should add, that is a case study for corporations, most people won't have that, and this video is precisely what you need

@JoppeKroon Год назад

Love the shout out to Adrian Roselli, he does amazing work on accessibility! On that note, I'm afraid the scrolling solution needs a little more to work properly, as Adrian also points out in "Under-engineered responsive tables". 1. It needs to be focusable otherwise you can't scroll by keyboard. Firefox does this automatically but other browsers do not. 2. It needs an accessible name so screen readers can tell the user what it is that has taken focus. 3. It needs a role so that the accessible name will be accepted.

@karansawant5121 Год назад

your highness sir!❤

@wayneswildworld Год назад

Absolutely god tier video

@kiddhkane Год назад

Another great video.

@securefolder4548 Год назад

Finally someone said use right element for the right purpose

@LevitskiSRGE Год назад

Very nice!

@Zakum Год назад

Great video Kevin!

@user-ev2kr3hv6r 8 месяцев назад

Thank you for this valuable video! Kevin, it is the best solution for my project!

@mkajiwala1 Год назад

Superb, you are really master.

@brunoritter3486 Год назад

As a brazilian, thank you for adding Senna!

@LastRoseStudios Год назад

Someone else mentioned that data attributes are great for dealing with multiple languages, which I 100% agree with, Another good reason for that approach, vs the css version is if you have merged cells. The css version will mess things up vs the data-attribute version which won't.

@lmd4881 9 месяцев назад

as always its fantastic!! :)

@frontend_ko 2 месяца назад

wow... very practical tips

@sthernito Год назад

I remember doing this for a client 10 years ago, data attributes where not a thing, but :before and after were starting to be used, it was not as clean as this but content did the work.

@ghostpants8172 Год назад

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 😁

@tatianaagapkina8658 Год назад

This video has levelled up my approach to tables responsiveness. Thank you so much, Kevin!

@churchers Год назад

Omg, I’d almost managed to forget the days of table layout and single pixel transparent gifs everywhere

@ol1175 4 месяца назад

Thanks a lot!

@404-UsernameNotFound Год назад

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]

@NoFakeCoding 29 дней назад

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 👍

@bmehder Год назад

You forgot the GOAT - Latifi. I actually had a tough time tackling a responsive table about a month ago. And, sometime you just gotta use a table. I just implemented this solution. Thank you for doing this video. Also, I think Fernando changed his name to Alonstroll.

@ldburn Год назад

Interesting indeed. I'd have put in thead and tbody as others have mentioned but overall it is tidy. Couple of styling bits you did that I'm going to implement just to save space but also give general breathing room 🙂 I've hated tables for years but they do have their uses. I think they're the only thing I generally come across that is "desktop first" design. Still a pain though 😂

@wisdomelue Год назад

great turorial

@QwDragon Год назад

I hope somewhen we'll be able to use accessability attributes in css. table { role: table; display: grid; } Very simple, clear and doesn't need any scripts.

@amrsayed74 Год назад

Awesome ♥♥♥

@sudoscientist255 Год назад

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?