Styling HTML tables with CSS - Web Design/UX Tutorial

hey guys hey gone my name is DOM and in this video we're gonna be learning how to create stylish HTML tables using some very basic CSS so there are many good videos and examples out there of creating these nice-looking tables using CSS and this one here is my own version of that you can of course take this code you can take this example and then tweak it to suit your own needs it's very easy to do so basically we're going to be converting this right here a bare-bones HTML table with no CSS and convert it into this right here so let's go back inside this file and take a look at the text editor so we begin with all of this stuff right here so I've got the HTML table markup I've got the table head and also the table of content so inside here let's first add a class to the table itself let's add a class of content table and the reason for this is because we're going to be adding all the CSS to this class right here that's because sometimes you have other tables on your web page which you don't want this CSS to be applied to for example you may be using a table in your navigation bar or your footer in that case you don't want all of these fancy CSS styles to be applied to those tables only the tables which are readable content by your user in this case it's going to be this one right here so I'm going to somebody go back inside here I go inside the CSS and target the content table class the first thing to do is to add a border collapse of collapse and this basically is one of the most popular CSS properties on tables and basically it's going to be reducing the amount of space between yourselves so I'm going to save this and refresh the browser and pay attention to the spacing between the cells fellows to refresh we get this right here it's a lot smaller a lot tighter and that is the reason for the border property okay back inside here that's also at a margin of 25 PX from zero this ensure to a table has some nice space between the content on the top and bottom okay also a font size of 0.9 am I like to have my font sizes inside tables to be a slight bit smaller than the content surrounding it I think it looks a bit nicer and also it makes tables a lot easier to read or sorry a lot easier to fit on mobile devices due to the limited screen space okay so that's the reason for the font size property right there I'm gonna also add a minimum with our for hydrent px and the reason for this is to ensure the table always looks nice and big no matter what the content inside of it is so of course since it is a minimum width it will expand if needed okay so I'm gonna save this and refresh and we have right here the essential structure I'm ready to go on the parent table we can now begin work on the table heading row okay so back inside here let's target the CSS selector for content table T head TR so we can add a background color have a nice looking green so 0 0 9 8 7 9 you can of course change this to suit your own webpage and also a color of what and a text a line of lips the reason for this is because most browsers including Chrome like to Center the table head columns I think generally it's a good idea to make sure that your columns and content are aligned in the same way so of course if I was to refresh this now we can see we of course have that nice background color but also the table head columns are of course aligned properly with the table content below so that's that right there we can now add some padding between the cells so back inside here let's go and say also actually one more thing sorry you may also want to add the font weight property as being bold this ensures on all browsers of course the the heading columns are bold okay so back down here let's now target the content table th and also a Content table TD so the cells inside the table here and also the table content or table body alright so we're gonna say padding 12 PX 15px okay so of course it makes everything look a lot nicer with that padding right there so I'm gonna save this and refresh and this right here can be considered a completed product so let's add some more styles to make it look even better alright so back inside here let's say content table teen body TR targeting every single table row inside the table body we're gonna add a border bottom I bought a bottom of 1px solid and then a light gray okay so I'm gonna save this and refresh we have this result right here looking quite good and back inside here let's now target the good old classic having every second row a light gray background color so down here now once again begin with this selector so every single TR inside the tab body accepts the odd one so basically end of type even is gonna target every single even row inside our body I'm gonna say background the color are being a very light grey so we're going to say f3f3f3 save this and refresh we have this right here looking pretty good okay also typically you may see the border bottom of a table to be thicker and also the same color as the heading so let's go ahead and go back inside here and target the last table row so you can say content table T by DT our last of type and we can say border bottom 2px solid and the same color as the table header so zero zero nine eight seven nine once again change this color to suit your own webpage I'm going to save this and refresh we have this right here so this I think is a completed style table now inside here I've got some of us you know I've got a few extras going on right so the first thing is the Box shadow we have a bit of a border radius we also have an active row so let's go back inside here and add some of these optional properties to the table so back inside here let's go up to the content table class and add a border radius of 5px 5px 0 0 this makes the top left and the top right corners to be rounded ok and also along with that you need to add the overflow:hidden property this is because your table rows actually still have their square borders so having overflow:hidden ensures that the border of area set on the table is going to work correctly and display nicely ok also a box shadow of the 0 0 20 PX and a 15% opaque blue so I'm gonna save this and refresh and we have this right here looking pretty good honestly cool so now for the active row you know sometimes let's just say that Sally is logged into the web page and this is of course her score so you may want to actually highlight or display a particular row as being active so in this case I'm gonna go back inside here and go down to the bottom here and target once again the content table - yeah but I'm gonna say dot active row so we're gonna add a class of active row to the active row and basically we're going to say foot weights of being bold and also a color once again the same color as the table header so 0 0 9 8 7 9 okay and of course in the HTML we can say here + as being active row so I can save this and refresh the browser and we have here have fully completed styled HTML table all right of course you can change this I'll leave a link to the code in the description so you can of course to download it and change it to the way you like it alright thanks for watching guys and I'll see you later

Channel: dcode

Views: 245,265

Keywords: code, coding, programming, tutorial, introduction, beginner, walkthrough, guide, software, development, simple, easy, into, english, with, example, examples, developer, lecture, recording, web, website, html, html5, css, css3, table, tables, row, cell, data, header, heading, style, styling, stylesheet, theme, bootstrap, beautiful, nice, font, layout, ideas, design, ux, user, experience, ui, application, app, color, colors, theming, tr, td, rows, odd, even, nth-of-type, cascading, sheets

Id: biI9OFH6Nmg

Length: 9min 51sec (591 seconds)

Published: Mon Apr 15 2019