HTML Tables Tutorial with CSS Styling - Crash Course

all right and welcome to this html tables crash course we're going to be taking you all the way from knowing nothing beginner all the way through advanced tables with advanced css styling now tables have been around on the internet forever i used them back in the 90s when i began working on the internet now today we're no longer doing layout and multi-column layouts with html tables but you do use tables quite often in your web work for tabular data so it's just a matter of time until you run into tables we're going to be looking first at the basic syntax then we're going to be covering some of the more advanced things with tables such as call spans and row spans merging cells together and then finally we'll finish off with the real world example where we're going to build a table from scratch complete with full css styling and some fancy tricks to make it look a lot nicer so jump down into the description if you want to jump to the various jump links i'll have little video links down there where you can just cut to the part that interests you give a thumbs up like and subscribe and let's go ahead and get started okay now the first thing to note is tables are tabular data they're formed by rows and columns so you can see here i have a basic table with nine boxes we call these boxes of cells now a table is made up of first rows so you have a single row and then within that table you have what are known as data cells so you can see here i have three table data cells within that first row and those are constituted by the td tag which stands for table data cell the tr tag is what we use for table row there's no such thing as a column cell you get columns by adding rows and data cells together which eventually stack up into columns so really there's only two main tags that you're going to be using the table row and the table data cell tag now of course there's a few other tags we're going to be looking at here but that's the basics of forming an html table now you can see here in this example this is the exact same thing we have nine cells so we have three columns and three tds in each one of those columns and you can see over here in the left hand sidebar we are looking at the same thing so you can see here in the real code we have we start out with a tag called table and then inside of the table tag we have our first row which is that row right there so that belongs to this first row right here and we have one two three data cells that's that one that one and that one then we come down here and we make up our second row so there's our second row and you kind of get the idea here these just basically continue on this one has three data cells as well one important thing to note here is that when you start building tables you can't have a row with two and the next row with three in the next row with four you have to have an equal amount of data cells within each row when you start i'll show you how you can merge those in a minute now in this next slide here i want to show you the spans so whenever you have two cells and you want to merge those together we call that a span now in html there's only two types of span the first is what we call a row span and the second is called a call span now people always get these two confused but the type of stat span we see over here in cell four where we have these things merged together is what's known as a call span so a lot of people will think this is the row span because we're working in a row but if we look at this and in fact this individual cell here so cell 4 is spanning column and column so it's actually spanning two columns which is why we call it a call span okay let's look here at the next slide and this one you can see we have both a row span and a call span so over here this one is a call span and this one is a row span because it's spanning row one and row two so cell three is a row span cell four is a call span and we can have both together in a single table that's completely fine all right the next thing i want to cover is cell alignment so within each individual table data cell you can align the contents of that cell to the top the middle and the bottom and that only has to do with vertical alignment so when you're doing vertical the keyword is top middle or bottom and then we'll align the contents of the cell accordingly now when we're dealing with horizontal alignment we use the keywords left center and right to align things along those axes and you can see you can definitely use both so i can align some content in the upper right and i would use the top for the vertical and right for the horizontal and my content would be pushed up to the top right of the cell now i mentioned this earlier but there are a few extra tags associated with tables and this is very common in tables where you might have a row t head here up at the top stands for table header so this entire row is the t head tag and then these three rows constitute the table body and then this entire row here constitutes the footer or the t foot now these three tags are actually optional you technically don't need them to create a table but if you want to do advanced things where you have header and footer rows that are separate from the body it's recommended that you add these rows for more semantic code next we're going to cover cell padding now cell padding refers to the cushion around the cells so between the border this little white line designates the border this little blue box right here is the content and the padding is this area right here it's basically like a cushion you can see here that the word the letter t got forced down onto its own line because there wasn't enough room because the padding here is preventing content from going all the way to the edge of the border so it's like an invisible cushion and it's called cell padding now very similar to cell padding in fact they look the same when you're doing them in code is cell spacing however they are different cell spacing doesn't refer to the cushion in the inside of the cell it actually refers to the space between cells this is actually not the border so the border doesn't get thicker rather the actual space between cells increases we can also change the width and height of cells this is something that has traditionally been kind of a nightmare with tables because tables tend to want to rearrange or size themselves according to the content inside the cell and it's not consistent between all the different browsers so we can override the default width and height of cells by just adding width and height properties so you can see here in this little simple example this row right here obviously has a much taller height than the other rows once you declare a height to a single cell every single cell in that row will get that height and same thing here with the column this column obviously has a much wider width than the other two columns this one and this one and again once i declare a width in a cell the entire column will get that same width and we can mix and match them and mess around with widths and heights now lastly we can put tables inside of tables and do some crazy things like this so in this example i could have an entire separate table that's embedded inside of an individual cell and that's definitely possible and completely semantic and normal to do maybe i shouldn't say it's normal today this is what we used to do in the late 90s when we would build websites in fact you can really put any html tag inside of a table data cell cell all right so that's enough of the talk about the basics let's jump right into some code and show you a really quick best practice for creating tables and then how you can a simple method i've come up with for how you can very easily build a table based off of a picture so if you already know some complex shape you want to build a table off i'll show you a few steps to where you can do them without really over thinking it as far as the rows and spans go alright and lastly before we jump into the code here i just wanted to mention the deprecated table attributes now you'll notice in this exercise i've been talking about cell padding and spacing and we used to do all those things with html attributes right inside of the html those have since been deprecated in the recommended ways to use css instead now you can see the old on the left the old attribute names and then the corresponding css values on the right that you're encouraged to use instead in the code sample i'm going to use a couple of the deprecated values as i don't want to do css for everything while i'm doing html just to help you visualize but just be aware css is the new recommended way for doing all of these attributes alright so this is the table that we are going to replicate from scratch you could see this could be used for like a receipt or an order form or an invoice or something but really it's just a single table so if we look at this the basic method for creating tables is you need to first start with a grid so when i look at a table like this i need to say how many rows and how many columns are there so if we kind of look at things this thing and we break it down we can ignore the header and the footer there's obviously sort of a column right here there's a column right here there's our first row kind of goes across like this then we have another row right here and then we have another row right here and then we have a last row right here right whoops that one kind of got cut off so that's the overall feel of the table now i know that this total is these two cells are actually merged together but we can ignore that for right now in this simple example so then you simply just count so i have one column two columns three columns by one two three four five rows so this is going to be a five row by three column table and then the next step two once you've determined the overall rows and columns is just build a really simple grid with all of those table data cells so let's do that next all right so the first thing we need to do is just add the table tag so i'm going to turn on a property here called border equals one now typically you would do borders with css but there is this border property and if you don't have it set to a one pixel border you actually won't see the borders when you're doing your previewing so i'm gonna turn that on and then i'm gonna create my first row so we create a table row tag and then inside of that row you remember we have three columns so i need three td tags so i'll just create one and then copy and paste here so i'll do td1 and then i'm just gonna copy this guy down twice so one two and then go ahead and save and you can see over here there my table appears and i'll just re-number these so one two three perfect so there's my first row and i have three cells now i just need i think we had five total rows right so i'm just going to copy and paste this so i'll copy this one and say paste paste paste paste so there's one two three four five rows let me save that you can then see all those rows there and then you renumber now this numbering is important because when you start doing your spans your uh roast bands and call spans it's really important to have these numbers in place they'll really help you so i'm gonna hurry and number this eight nine 10 see 11 12 13 14 15. all right so we save that and we update and we can see over there sure enough there's our table now just so you can see a few of those extra properties here i'm going to come in here and i'm going to set the width of this table to be i don't know 500 pixels or something like that sorry not px 500 and you can see right away the table is stretching out there so that looks like a little big maybe i'll set that down to 300 so we can see the full thing there in the preview that's better let's go all the way down to 200 and then i can also mess around with the height so i'm going to come in here and set the height to 200 as well now again typically you would mess around with widths and heights in css but i just want to demonstrate this all right now i'm going to add that cell spacing property because it's really easy to see once you have your table so i'm going to say cell spacing equals 20 something really large and you can really see what happens right that space in between the cells got all that big giant extra bit of space so i'm going to delete that we'll leave the width and height in there and now let's go ahead and do our merging so we know that the first three rows were normal but this last row right here only had two cells the total and then the total sale price so 13 and 14 need to be merged together so the way i recommend you do this is you come down to the cell that starts the merging so in other words 13 is going to merge into 14. i like to think left to right and top to bottom so if 5 and 8 were merged together eight doesn't merge into five rather five merges into eight top down and then left to right so in this case right here i'm going to come to cell 13. so let's go find cell 13 that's right down here and this is why i recommend you number them because then you can easily find them in your code and i'm going to add and let me have you guess which type of span is this this is a call span because i'm spanning these two columns now the number inside of the call span property is how many literal columns it's going to be spanning so in my case one and two so two columns are going to span together so the number here i would put would be two okay then here's the important part before you save and refresh you need to go find the cell that it's merging into in this case 14 and just delete the entire cell then you save and then refresh and you can see sure enough those are two now merged together and that's the important thing i want to show you what happens if i do that in the opposite way so i'm going to undo now if i save before i delete cell 14 watch what happens see i just hit save see how my entire table breaks and then it gets really difficult to figure out which cells are merging into which cells because everything is broken in here so you always have to remember to when you add a call span in or a row span you have to delete this cell that it merges into first then save and refresh and make sure it looks correct now just for simplicity's sake or for it to to show you a row span i'm going to merge cells 6 through 12 together so again if those were merged together i start on 6 12 because i'm honest i start on cell six because i'm merging down so let's find cell six we come in here and this is going to be a row span so we say row span equals and then you can see this is gonna be three one two three because i'm merging down three rows so i put the number three in there and then i need to delete the other two cells so cell 9 i need to delete and sell 12. so i come find cell 9 i delete it i find say cell 12 i delete it then go ahead and save and whoops i spelled that wrong row span there we go and sure enough those are then all merged together and if you just do that simple step you'll be able to build any sort of complex table that comes your way so those are my easy steps for labeling tables and then doing your spans after you have everything sort of spanned the correct way so you build your grid you do your spans and then the third step is you can then further align and adjust things accordingly so just to demonstrate this maybe i want the contents of this to be at the bottom right so i'm going to come into cell 6 and i'm going to use the align property and i'll set that to right remember that's for the horizontal alignment so i'll save and you can see sure enough it jumps over and then i'll also add in the v align that's the vertical align property and i'll set that to bottom and save and it jumps down to the bottom so now my content is aligned down there now the last thing i'll do here is show you how we can mess around with the height and then how we can do a table inside of a table so let's say i wanted for some reason this row right here row 7 starting with this cell to be taller than the rest well i can come into row 7 the table data cell and i can just give this a height property so i can say height equals and i don't know maybe let's make it 100 pixels sorry not px just 100 and save and you can see sure enough that now is 100 but because i have an overall constraint of height of 200 all the other rows sort of squished and auto adjusted as best they could as well so this is what i mean when tables try to resize themselves because you can have conflicting rules so you have to be careful with your heights and widths but that's how you can override a single individual piece now lastly let's say for some reason i want to come into cell number six and build another table inside of there well i can just come into cell six so i'm gonna delete this six in this case and just hit return to give myself some room and then inside of the actual table data cell you just paste the entire table code so to keep things simple i'm actually just going to copy this entire table code all the way from start to finish and i'll come inside of cell number 6 and this is going to be a bit messy but i'm just going to paste so that entire table code is pasted in there and i'm gonna save and you can now see i've got that entire table is built inside of that cell six and again that's very messy but that's how you can make a table i'm gonna undo that backup and undo a table inside of a table okay so that's the basics for creating your tables and building your tables now the last thing we're going to cover in this tutorial is how we can then style the tables and have some fancy headers some footers some css styling to make them look much better than the default okay so in this part we're going to be styling the table now i've already got all the html in place this is basically the exact same as our previous code the only difference is that i've added in the t head tag so i have a t head then i have my row so this is the header i've added in the t body tag which has the three rows which constitute the body and i've added in the t foot tag which has the single row of the footer so there's my head there's the body and there's the foot and that's how you can add those in html as well now i've just put in some little dummy content here to simulate this let's go ahead and start the css now i have right now border equals one and that's strictly so you can see the border here over in the preview but what i want to do is first show you a single property then i'm going to remove this border equals one because we're going to be doing that with css so you can see here i'm going to open up my table code and i just have some basic code in here for a background color and a font and whatnot like that so really the important code here is going to start out in our table now notice that in the table itself i have a class of invoice table so i'm going to be using this class as i do my styling on the table just in case you have other tables you're working with on a single page so let's go ahead and come back here to the css and i'll go ahead and create my first table so it's dash dot invoice table and then we're going to add our first bit of properties here now the first one i want to show you is a property called border dash collapse and we're going to set this property to collapse and watch what happens as soon as i save to the borders over here so i'm going to save that notice how they all collapsed down to a single pixel uh with html tables they're they're kind of an old tag so the way the borders behave is a little bit strange when you say border equals one it's really not one pixel it means like one unit of border because they have like a bit of a bevel embedded so this border collapse property actually collapses all those inner bevels and actually does sort of make them one pixel if you will so that's the first property we're going to add now that i've added that property and demonstrated what happens there i'm actually going to go into the uh html and delete the border equals one because we don't need it here so i'll go ahead and save that there's not going to be any borders and we'll continue working here okay so the next thing i'm going to do is just give this table some width so maybe i'm going to say width equals 25 ms or something like that so it's going to space itself out a little bit which is fine i'm actually going to make this preview fairly small as we're working here you can watch it update in real time the next thing i'm going to do is add in a background color so we'll be able to see the bounds here and the background color is just going to be white so i'll just say fff that looks fine let's go ahead and add a border dash radius this is just going to round off the corners and we'll just say 5 pixels here and save you can see that's a little bit subtle but it added that little teeny round right there on that the next thing we're going to do is add some shadows so this is going to be a box shadow and we're going to say 0 pixels 10 pixels 30 pixels i'm just looking off my note here i'm not making up these numbers off the top of my head and then the color is going to be rgb a and we're going to say 0 0 0 for black and then the alpha value is going to be point 15 for 15 so let's go ahead and save now you can see that just adds a subtle shadow underneath here that's pushed away 10 pixels and 30 pixels so 10 down 30 down 10 across has a 5 pixel blur anyway and we have a little bit of a box shadow all right next thing we're going to do is add in some margins so let's say margin um i don't know maybe 25 pixels and auto this is just going to center up our little uh receipt i guess i'll call it invoice inside of the browser preview window there and that should pretty much do it for the main tag okay so let's move down and our next one we're going to be working on the table header so we'll use this same invoice table and we're going to say t head tr so this will only affect the row that's inside of the table head and we know there's only one so let's go ahead and give this guy a border dash bottom and we're going to say one pixel dashed and then a color and i'm just going to say gray and save and you can see that adds a one pixel dashed border right inside of there so that looks fine now i'm basically going to copy this and paste it because i want to do the same thing except for the footer so t foot except instead of border bottom this one's going to be border dash top and save and now i've got another little border above the last footer so that's fine there uh next thing we're going to do is mess around with the table data cells inside of the header so we can create a rule in here called invoice table and then t head and then tr td now i'm writing these really long selectors because it's easier for you i think in css to kind of see the nesting order so this is the table data cell inside of a table row inside of the table head inside of that invoice table so if we hover over this you can kind of see the structure there of exactly what elements i'm affecting now in this specific property we're going to add some font size so let's change the font size we'll just make this 16 pixels and save so you can see that changes that a little bit then we're going to change the letter spacing to just one pixel that's going to space out the letter spacing a little bit in that header row and let's go ahead and make a color we'll make this gray as well so you can see the color just shifted there and then let's give this some padding so i'm going to give this padding of 8 pixels to kind of push everything away from the edges so again this is affecting each individual data cell so that data cell that data cell and that data cell that's inside of our t head okay that looks fine now we're going to do basically a similar thing for our footer so i'm going to copy this entire thing and paste it down below but instead of t head this is going to be t foot so this is going to be affecting the bottom row here and the color let's make green and then we'll change the i don't know maybe we'll make it slightly larger so we'll make it 18 pixels or something like that for that footer row so that looks fine there and let's go ahead and mess around with the body as well so i'm going to copy this one more time paste it and instead of t foot it's going to be t body so this is going to affect each individual cell inside of the body now i don't want font size to be any different so i'll delete that uh i'll delete letter spacing color really all i want to mess around with is the padding so we'll delete color and let's go ahead and save and we'll consider that good enough so that's what our body area is going to be looking like and the last few things from this point are just a little bit of tweaks so one thing we can do is we can write a selector so invoice table space t head space tr td colon nth dash last dash child and one and save okay not save but create the rule so what this is what this is kind of a complicated selector here but we are affecting the last child that's a type of a table data cell in the row in the table header so if i go look at my html this is going to affect only that single td tag because it's the last child of the tds okay so that's what we're affecting right here and we're just going to simply say text align text dash align right okay and save and you can see sure enough that very last one went over to the right side now i can group this in a group selector i could use the fancy new is selector but we're just going to do this in a group so i'll hit comma paste comma paste so basically i want to affect the last children of each of the rows so i'll say t head i'll say t body and then i'll say t foot and save and now those are all aligned to the right so the very last row gets right aligned um very last column i guess i should say that's kind of like a column selector to get all those guys perfect okay so uh the only other thing that i maybe want to do here is mess around with these little guys so you can see in my html i have the word drink and then next to it i have a span okay and then there's this word called large or small or no pickle right so i want to make that word slightly different to offset it so let's come back here to our css and we'll add another rule here so that one is going to be for the dot invoice table so i'm starting all these the same so invoice table t body because that rule only that class only exists in the t body and then i'll just say span okay and what i'm going to do here is we're going to change the font size so make the font size like 12 pixels so something a bit smaller so let's save you can see that decreases the font size there and then we'll also maybe make the color gray on those whoops color gray so they just kind of don't stand out as much something like that and there you go so there's a full entire table completely styled from start finish with just some basic css to make them a little bit nicer you can do all sorts of things with css i could make the entire i can make the background of the first entire row in the last entire row different you can even do hover effects where the entire row is hovered upon when you roll your scroll over rows you can make those you can do zebra striping where every other row in a table is a slightly different color that really works well if you have like a lot of columns and you're scanning back and forth zebra striping them tells you helps you follow along a single row as you're sort of scanning anyway there's a lot of different things you can do with tables and and styling them so i hope this video although it's actually not super long gives you a really good idea of how to build tables from start to finish and how you can style tables i hope to see you in the next one like subscribe thumbs up share and we'll see you later you

Channel: FollowAndrew

Views: 20,252

Keywords:

Id: IGBRYTpgyg4

Length: 29min 3sec (1743 seconds)

Published: Mon Mar 01 2021

Reddit Comments

[u/wilsmex]

Who said HTML tables weren't cool? Not me, I love my tables & floats :) Enjoy!