How to create a responsive HTML table

Key Takeaways

since I started this YouTube channel almost seven years ago which is kind of crazy to think about there have been people requesting I make this video uh getting into tables is something that I've sort of avoided and put off for a really long time probably because I started creating websites using tables as layouts and I just have this like aversion to using them but sometimes we need a table on our website there's still good reasons to use them but we live in a world where we need responsive tables and tables are created before responsiveness was a thing so it can be a little bit of a challenge we're going to tackle that today by looking at a very simple solution and then one that's slightly more complicated but that is probably the type of thing that you're looking for when you're thinking of a responsive table so with that in mind let's dive right into the code and take a look at what we're going to be doing or what we're starting with which is not very much I I have an H1 here on my page um in my CSS I don't have anything related to tables so we're really starting from zero and we're going to work our way up and of course that means the very first thing that we want is a table we want to throw a table in here and then one thing that you don't see too often is actually a caption and caption is an interesting part of our table because it's something that you might not have seen before and that's because their their purpose is to be used with tables and it's basically to give your table a name now it took me a little while to come up with a something that I want to make a table around but we're going to do the last 14 world champions and 14 might seem like a very arbitrary number and it definitely is but I'll explain my thinking on that one as we go through this a little bit um one thing that we'll notice with tables is like when I first put this in here it does not look very good and that's because we don't have any content in our table yet tables do require some fixing up to make them look decent but uh you know don't worry too much about how they look until you actually have all the content that's going to be in there now before we get to the content the caption does need no matter where you want to put this caption I've seen somewhere it's placed at the bottom rather than being at the top there's ways of moving it around but because the title I'm going to leave mine on the top but no matter where it's positioned it does have to be the first child of the table that's one of the requirements for the caption so just to let you know and again just think of the caption like the title for the table itself um and I want to we're going to be talking a little bit about accessibility as far as our table goes as well because I do think that's important and it's why I'm actually using a table rather than just throwing a bunch of divs and using display grid on it and so we're going to sort of circle back around to that in a little bit but because we're actually using a table rather than just some divs it's a little weird to organize and it's one of the things I've never liked about tables but the first thing we need is table rows which we do with the TR table row uh nice and straightforward and I'm gonna have one that's gonna be my headings across the top and then all the regular data under that now I'm actually going to need 15 in all but let's do a TR here and we'll do times 14 since I already have one at the top um so this first one is going to be for my headings and then we have all the rest of the data coming in there don't worry I won't make you sit through me doing them all but starting with this first one that we have right here what I'm going to do is let's do eth and that's for table heading so it's like the heading of each one of my columns and I'm going to need six of them so I'm just using emit here to quickly put in six like that and now like if I hit save nothing Nothing's Gonna Change yet but let me bring in some content here and I'll see you in just a second and okay there we go so I'm gonna have my name my polls podiums wins career points championships if you know nothing about Formula One don't worry too much about it uh the content here isn't terribly important but you see those all came across here they're automatically bold and now my title or captions actually stretching across the top it's no longer squished away so the content will play an important sort of role in what we're doing here um so with that set up we sort of had just have to do the same thing for each of the next things along the way here so instead of th I'm going to use ATD and once again times six and for this I just need to bring in the information for each one of the people that I'm going to be talking about so here is the first one which is Max verstappen we're just putting these in chronological order and he was the first or the most recent Champion um and so we have the name then we have the polls the podiums the wins career points and how many championships he has won so far in his career and one thing I want to look at with this before we get to the responsiveness of it is just working with tables is kind of weird because like I have an 80 here and what's the 80 and like we look at it here it makes sense but when you look at it here it's a little bit awkward so two choices are one thing I sometimes do is just use comments and I do like name and then I'd come here and I do uh what would this one be polls and so on and so forth and the advantage of doing it this way you sort of set one up and then you just copy and paste when you're setting everything up right so if you come in the next row you paste you know what everything has to be so if you like that better just to stay more organized and when you're looking at a big table this can really be a lifesaver the other alternative instead of doing that is to use a data attribute and this can come back to help us a little bit later when we get to the slightly more complex solution that I'm going to look at uh so we could say like data cell is equal to and I put name and we just do that for all of them so I'm just going to middle click down here and drag and do data with data cell is equal to and then I can bring in all of them so I do my polls I do my podiums and so on and so forth uh for all of these either one is completely fine or if you don't mind just looking at something like this and you can keep track of what is what then that's great but I really find either having the comments or having the data attribute here can be really helpful and because we are going to be using as I said I can use this I'll show an alternative solution if you don't use the data attributes when we get to the more complex solution but I'm going to go ahead and fill them all out using the data attributes and I'll see you in just a second all right so we got everything in place here and we have all of them all the way down to Art and Center here and the reason I went here is because I was originally going to stop at my favorite driver who is Nigel Mansell growing up because my dad is British but then you know Ironton was the one just before him I figured we'd stopped there instead of rounding up to 15. um so yeah that's why we're stopping at 14 drivers because that's I think you know we got to my favorite and I said I can't exclude uh Cena so we went with including him as well um and just a side note randomly I just realized I definitely made a mistake here with Alonzo I'm not going to worry about it too much here and if you're just wondering what the points um the point systems have changed over the years so in the old days it was lower Point scales anyway let's not worry too much about the organization because there's probably other mistakes in here as I was copying and pasting all this information from Wikipedia um and let's jump into actually styling It Up by jumping on over to our CSS but before we get into the CSS here I just want to say that the responsive side of this and some of the styling in here was heavily inspired by a blog post by Adrian roselli that goes into a lot more detail than I'm gonna go here we're gonna go into a very simple approach we're actually going to use something that Adrian created to help a little bit later on in this and we'll be sharing that link and all the links to that stuff is in the description it goes into more detail more edge cases and extra sort of styling if you have longer text and other stuff so if you're looking for something that's a little bit more detailed or robust definitely check out the link to that article down below and with that let's get started on this so the very first thing we're going to do here is I'm going to stay just stable style my table and on here I'm going to start just by giving it a white background color because I want to show you something interesting so background white and what's really interesting here is if we take a look even though my caption is inside of the table there notice how it doesn't actually get that background color super weird right so this is important to know if you're giving like your table a dark background color just make sure that um you know because here I would do like color black then if I wanted to do this and then I can't read my title or my caption anymore because it got the color black but it did not get the background of white so you want to you know whether it's doing the caption here or separately setting the background or whatever it is I'm going to style my caption separately anyway but I just want to throw that out there as something to watch out for so let's get rid of that for now and I'm definitely not going to go with a black background or white background I should say so we can get rid of that and get rid of that and we can come in here just with a dark color that stands out a little bit from the background and while we're here I think a little bit of padding will also help out and so we can you know get something that's decent looking now I'm gonna choose my th and my TD just because uh TD we're going to come back to these in a second but for now I'm also going to give these a color of white just because I want to show you that we do get like this weird spacing in between this is just from the old days of this little default borders that come with tables so on here we're also going to add in a border collapse of collapse which gets rid of all of those because in general you don't want them and you're going to be bringing in your own Borders or other stuff if you want them and that border thing was always a nightmare so just border collapse collapse saves saves us a lot of trouble there and by doing the Border collapse though you might have noticed that the padding also disappears and this is a bit of a shame but that's okay we're gonna fix things up uh and to do that what we can do is we can select our TDS but we also want the THS actually so th and TD and we can give these all a padding of one rim and that basically gives us that padding around but it also spaces these out which does look a little bit nicer and in general for the caption that's up here we sort of want that as well so we can say caption uh and include that so it just spaces things and the reason I like doing that is because then if I come down on here to my caption and on that we can do a text align left because it just tends to look a little bit nicer depends on what you want though but now the left align there will match this and you'll notice that these are also not Tech aligned left can't speak right now so we can do our th is also get the left alignment just because I think it's a little bit better than mixing alignments which can be a little bit strange and now what we want to do is I'm going to move my face down because we're going to take a little bit more room up here because we want to make this responsive uh so I am just going to give this a width of 100 and that is the first step in making something responsive because you can see it will actually smoosh and stretch and it's just limited by the the wrapper that I have it inside of here and if you've never seen a wrapper or container type thing done like this I'll link to a video either a card or a link in the description but it's a little bit off topic for what we're doing now basically it's a Max width of 900 pixels we have on here um but you can see it's working but of course we're not responsive when we get to here everything looks terrible we are going to fix that up but I am going to style things up to look a little bit nicer here and we'll start with our caption itself uh where we can just give this a background and um let's just do an hsl because hsl is the easiest to work with in my opinion zero percent zero percent to make it completely black just to separate it a little bit from the background there and it is a title so it's a bit weird that the font size is so small on these so we can make the font size bigger and the font weight can also be bold I've got a spell weight properly but we'll get there in the end and just you know maybe a text trance transform of uh uppercase on that as well and then we get the last 14 world champions perfect now we've given this a different background color so we might as well give this one A different background color as well and because the padding is on the th and not on anything else we can just take our th and give that a background color I think it's the easiest way to work so here we can say the th and I'm going to give actually we're going to be doing the same thing uh we'll use some hsl so I'll just copy and paste and the next trick with this though is if we just come here and because I'm using the space separated syntax which you might not be used to um just instead of comma separating everything no commas but you put a forward slash if you want opacity and I can come in with a 0.5 here or whatever and you can see it darkens it up because we're just having some Darkness without going all the way to Black and it's overlaying on top of this and we can take that same type of thing because you know if you're looking at this 91 and you're I guess you could get to Michael Schumacher there or whatever but it's hard to sort of track your way around and again I did switch these two around Alonso definitely doesn't have 2000 wins but it's okay uh we're just in Demo World here so um yeah making it easier to read we will do a TR and then we can just do n of type there it is nth of type and 2N so selecting every second one and we can use this exact same trick on there but maybe 8.05 just to make it this really light difference or a 0.1 I don't like my zebra patterns to be really obvious like too big because if this was going to like you know that I find that actually it's easier I guess to follow along with the eye but just that high contrast is really annoying to look at so I tend to like being pretty subtle just enough to help you out it is a very low contrast change so we do have to be aware of that but I think personally going too high just makes it really hard on the eyes as well so something subtle like that for me works well and with that done we're actually ready to make this responsive now I did say we'd have two different ways that we can solve this the first one being the simple one and the second one being a little bit more complex though I don't find it too bad but we'll start with the very simple one which is actually to come up and here I have my table so let's select the whole table so we'll start there and go all the way down and select the whole thing I'm going to do a control shift key to get my command palette up here and then I'm gonna do Emmett and I want to actually let's do Wrap there it is rap with abbreviation and I'm going to say dot table container the reason I'm doing that is if we come all the way back up it just puts a div around it called table container we're gonna remove this for the second solution but basically we just do table container and Max width is 100 and then we can do an overflow overflow X of uh scroll and this isn't perfect and I I mean you can see the scroll bar that's coming up but when we get to here because that's overflowing we get our scroll bar and we can just scroll on over for stuff now the issue with this is I have to scroll down to get to the scroll bar which is not ideal uh right so we have to do that you don't want to do that and I'm pretty sure you can see it but just there's the scroll bar right there so we don't want to be doing something where we have to scroll down to get to it uh and usually if you're at narrower viewports that does happen but that's by far like this is the simplest possible solution and of course you could do this as an auto as well with auto there's no scroll bar that you know that one that was already sort of hiding there but then if I shrink this down then it will appear so maybe you'll like that one better so if you're going to do it that way and you want the No Frills very simple solution or you have a very small table that needs a little bit of side scrolling that's sort of the simple way to do it but we're going to delete that and we're going to come back here we'll get rid of that table container as well and we're going to look at a more uh involves solution it's really not that bad but it works really really well and one thing with this I am going to take a desktop first approach which normally I always advocate for the path of least resistance which means write the least amount of code possible to make things work and that tends to usually be mobile first because when you're writing stuff most things are mobile you know you put all your base Styles and things just work on the phone and then you add complexity later tables are a desktop first thing they work on desktop they don't work on mobile so because of that we're adding the complexity at Mobile screen sizes so for me it makes more sense to just add that complexity now instead of making that the default and then overwriting it back to what the defaults were in the first place so I know people always get mad at me when I do a Max with uh media query but just why we're doing it uh right there and I'm going to do maybe I don't know 650 pixels maybe depends on your table and what media queries you're using and everything but we're gonna go with that and we're going to be doing a few different things and this is where it would be you know sometimes you'll even see like placing a display grid or whatever to try and style things from the very beginning um we're just going to sort of default to stacking everything and this does have a consequence that I'll talk about in a second but what we can do is a TD and actually we might actually go to grid after or we will but I'm going to do a display of block for the moment um just so we can see what happens and here we can do an inspect and people always ask me about this when I use it so in your Dev tools you can just click this if you're in Firefox it's on this side um and I forget where it is in Safari you just click that and then you get responsiveness basically you know your responsive mode and by doing that when we get to these small screen sizes you can see that you know what's happening right there which is they're becoming display blocks so they're all stacking on top of each other now at the moment this looks really awkward so what we're actually going to do is we're going to come up here I'm going to see th and we're going to do a display of none and that fixes a lot of the problems and basically we had a whole bunch of columns and then we had these that were fitting into the First Column it was being kind of awkward and taking those these and like how you know this doesn't make sense going across the top anymore anyway so we can just turn them off at this screen size and now we have a response table this is going to work we have the last 14 world champions Max verstappen but then we just get these random information that we don't actually know what it is which is not very convenient and this is actually where having the data cells here helps not only is it make it easier to do what you're looking at when you're here looking at a 23 just like here the 23 doesn't make any sense um but you know so if I wanted to fix that thing with Alonso when I came down if I didn't have my points and my wins here this would actually be kind of weird so we can just take this put it here take the 32 put it there and I know exactly what I want to do and just the ordering everything it makes it a little bit easier to understand or if we have the comments there as well and it means we can link into it because with CSS there's a really awesome thing we can do and I'm going to include this inside the media query because I don't want this to happen at sizes bigger than 650. but we can do this really cool thing where we're going to say on the TD we're going to go on the after TD after and this is where on the content property you can access attributes by doing att-r this is a value or a function that is supposed to be able to be used in lots of other ways as well so right now it's limited to the content property if ever we get this in other places it's going to be fantastic but even just having it here is great because I can just put in here data cell and hit save and that information comes in and I did it as the after I should have done this as my before on this there we go because if not it was Max or sappin then name on the other side so we're getting it before there now it doesn't look fantastic uh everything's a little mixed up and hard to read so let's also give this a font weight of 700 to make it bold so it sort of serves more of a purpose we can also come here and I can add some string text so I'm going to do a colon and a space so we get name and then we get the space there it would be kind of nice if they were starting with capital letters so we can also do a text transform on these transform of uh capitalize which is not one I use very often but there we go it works really well and so right away you can see we have those lining up across the top and then when we get to the smaller size we see them here and we can read it a little better the spacing and everything is a little weird so here we could come and change our padding to like 8.5 REM one REM just to sort of bring things a little bit closer together and I think it just you know maybe a 0.75 whatever you want you could play around with your spacing you could increase the spacing between them as well but just something to make it a little bit better you could even use some viewport units or something in here to space things but anyway you sort of get the idea of how this is coming together and it becomes a little bit more readable and if you actually if you do want more space here what we could do is we could just say TD uh first child is going to be padding pop could be one REM and then we could duplicate that line and say that the last child is a pot and bottom and of course these could be logical Properties or something but then you could just sort of you know give yourself a bit more room so each one is grouped a little bit more as well that looks a little better I think now I did also mention that maybe you didn't want to take this approach with these data attributes and if that's the case what I'm going to do here is I'm going to strip these ones the first row off here and give an alternative just to show you and I'm just taking these ones off just to show you that it doesn't work uh and this is you know if you just have something like this or maybe for whatever reason you don't have control over the markup instead of doing it like we had it before with our content on the before um basically you just have to do this for each one of them so we don't have this anymore so we could actually keep that just like this so the styling of everything is okay uh and then we just want to do TD uh TD and uh type and I'm just going to choose the first one and then my content would be name and that would bring in except this should also be my or sorry there we go and then the name comes in and then I could duplicate that this one would be polls I think it was and this would be my nth of type 2 and then the next one that wasn't poles I don't know what that one was oh me it is yes polls this is podiums here podiums and so on and that's my third one and we could bring it in that way and you can see by doing it this way it's doing it on all of them I don't have to go on like every single one one and put in the data cell so part of it depends on how you want to work if you like the data attributes it's one way but of course if ever this had to become you know pull positions uh it's you know just updating one little thing here this also comes do you want the content coming from the CSS or do you prefer the content in the HTML and that type of thing I'm going to go back to you know I'm gonna undo all of this just to go back to what we had but it it really just depends on uh which way around you prefer working at the end of the day or where you have the control over things depending on if you're in a CMS where maybe you don't have the data attributes you can play with whatever it is giving you the different options that you do have right there so we sort of get this and it's already off to a good start and one more thing before we get into fixing the accessibility of this because we actually broke it when we did our display block here and we're gonna switch this actually from a display block to a display grid which basically just forces everything to be stacked the reason I'm doing this is because then we can use a grid template columns template columns and you can do something like I don't know 15 CH and then Auto which should be fine and I'm doing 15 CH characters this is I think 14 or 15 letters long so it sort of just balances it out so if you prefer that and of course again you don't we could go back to this just being block if you like it like this you could leave it like that if you like it a little bit more organized depends on the type of content you're doing we could do that and having a gap on here maybe that would be too much but having a small gap on here could also be useful just to make sure nothing gets too close to one another um and we can have our content like that and so it's not looking fantastic by any means but it's definitely looking better it's responsive now it works here we get the small screen sizes it Stacks until we get to like really small sizes where you might run into more issues but we're getting you know we're pushing the limits a little bit of what we'd want to do there but having it like this I'm pretty happy with except for that issue of this display grid actually or if we use display block as well it strips the accessibility away and all the semantics away I should say of using a table because all of these are no longer going to be data tabled the browser sees them as just regular Block Level content and it doesn't have any meaning to it anymore and so you're going well Kevin I could have just used Grid or whatever from the beginning and then not worried about it but we should use the right elements for the right things whether that's tables for tables links for links buttons for buttons headings to view headings we should be using the right things and luckily I mentioned Adrian helped it out a little bit before I'm going to cheat a little bit just by coming down here and doing this instead of a separate um JS file but we can obviously do this as your own JS file and so that's where this amazing blog post for Adrian roselli comes in um this isn't the blog post where I talked about earlier this is one where it's just looking at functions that area roles to your tables and lists I'm not a big fan of copy pasta in general I think we should know what we're doing but uh so I'm going to leave this here so you can give it a bit more reading and I would definitely encourage that you read the longer post about building them out and again that goes into like other edge cases and other things print Styles a lot of really good stuff that you can add but what I'm going to do is take his for the roles and I'm just going to come here we can definitely have this as its own script tag um right so you're just linking to it instead of using an actual script tag here but I'm just going to paste it in the bottom here just to go really fast and basically what it's doing is it's running through our page and it's bringing the semantics back in for our TRS our TDS it's looking at all of these different things our caption that we have at the top the table and other elements that are part of tables that you might be using and if we come and take a look it's adding the roll in so roll is row row is roll is cell uh the table roll is table so even if we strip away the semantics when we do a display block this will bring that back in and it prevents the semantics of our table from falling apart which is really good and the other nice thing with it and actually look it even came in with the tea body and so it's it's trying to organize things for us and make sure that it is actually semantic which is fantastic and this is why we wouldn't want to start with a grid in the first place we used a grid with a whole bunch of divs actually manually coming in and doing this would sort of be a bit of a nightmare so yeah that's how we can get set up like this and have everything working so I'm pretty happy with the end result I hope you're pretty happy with the end result of course more styling can come into this table in general but just as something that works at different screen sizes there's no big issues that come up and I think it's fairly simple to set up so there we have it and if you do struggle with responsiveness in general and not just putting tables together I have a video right here with a lot of simple tips on making your life easier to deal with making responsive websites and with that I would really like to thank my enablers of awesome Johnny Michael Simon and Tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your corn on the internet just a little bit more awesome