25: Table In HTML and CSS | How To Create Tables | Learn HTML and CSS | HTML Tutorial | CSS Tutorial

today you're gonna learn how to create tables using HTML and as you can see in front of me here I do have a index page open and I have nothing inside the body tags yet and also have a stylesheet open that I already linked to inside my index page so we're also gonna do some styling this episode because there is some styling elements that we don't use outside tables so I would like to show some of them off so you can mess around with the tables for a bit okay so inside the body tag here we're gonna go and create a table tag and I just use the shortcut to create the table and inside the table here we have something called rows and columns okay because we have a grid system when it comes to tables now as a default we're not gonna have any borders for this table here so maybe right after you create a couple of rows and columns we will actually create some borders using the CSS file immediately so we can actually see what's going on so inside a table we want to start working with rows and we create a row inside a table but by saying we have a TR tag which means table row and then inside the table row here we can go ahead and set a table header as the first row inside the table because usually when you have a table at the very top of it you might have some column names that you want to go downwards and that's where you can create using table headers okay so I'm gonna go and create a th which is a table header and inside of here wouldn't go at say something like first name colon then we can create a second table header and say something like last name colon then we can say th gender and this is going to stick with three columns for now so now we have one row inside the table going horizontally and I can actually go and copy this paste it underneath here so we have a second table row and inside this row we're gonna go and change it from table header to table data so just gonna go and change the tag here we could actually just delete it because there's no reason to have it say TD which is table data and then we can go ahead and set the first name for the first person inside this table here so could say Daniel which is my name then we can go ahead and create a second column data which is going to be my last name so we're gonna say Nielsen but then the third data which is going to be male because I'm a male and then we can go ahead and just copy paste this one and include a second person so you could say something like Jane though and then something like female now if I were to go ahead and go inside the browser here and refresh it you'll actually notice that we have a table now I'm kind of swimming down so I'm just gonna zoom in in the browser so we can actually see it and as you can see you have a table header which is in bold because it is a header and then we have the data underneath it so what I want to do is I want to create a little bit of styling to it so inside my style sheet I'm gonna go ahead and start by styling the table so I'm gonna say table and we're gonna go ahead and set a width because we want to have some kind of width to it right now it's just gonna fit whatever is inside the table which is not a lot so right now the table is actually only this small square here so I want to set a width to something like 400 pixels just to test it that might be too much and that looks just about good now one thing you're going to notice about the table header is the fact that it's actually centered inside the cell that is inside off so we would right-click it so we can actually see it you can actually see that we have its Center and if we were to go down to the data here we'll actually notice that it is aligned to the left side of the cell so we can actually change this as well by going inside our style sheet we're gonna go and say table header text-align:left refresh and as you can see we now have it to the left side again if there's something you want to do now we're gonna go and create a border because right now we don't have any sort of indication of that there's actually cells going on inside this table here so I'm gonna go inside my style sheet and I'm gonna go ahead and create a separate styling element for multiple HTML tags so first we're gonna say if you have a table comment and then I'm gonna add a second element so I'm gonna go and say we have a table header comment and then a table data or data if you want to sit in that way we're going to setup order here so I'm gonna save border one pixel solid and that's just gonna make it black because why not there we go now for what to go ahead and refresh the browser you'll actually notice that we now have borders going on inside the cells now one thing you're also going to notice is that we do have some spacing in between the borders we can actually change that into either 0 or 20 pixels if you want to or you might want to get rid of it because right now we do x have two borders in between each cell which we can actually merge into just one if there's a border right next to each other okay now the first one I'm gonna show is how to actually get some distance between the table cells so we're gonna go ahead and go up inside our table here and say border dash spacing and set it to something like 40 pixels just to sort of exaggerated and so guys what it does if a refresh it you guys can see that now we have a huge gap in between the cells this might not look that good so let's actually go out and change it and just go ahead and comment it out because we don't actually need it if we want to get rid of the spacing in between the cells instead we can actually go ahead and say inside the the styling down here with the table the table head on the table data or data that we want to say border - collapse and then set it to collapse save it repress the browser and now you can see that if we do actually have two borders right next to each other it's just gonna collapse into one border which is something that's really nice the next thing we could also do here is if it were to go inside my styling here could actually create a second styling that is just for the table data or data now I don't know how to say it anymore and the table header so we're just gonna go ahead and remove the table from this then we can set a padding to 10 pixels if you want to and this creates some distance from the text out to the border that we have around the cells so we can get something looks not as cramped together which I think looks a lot better in this case didn't notice we didn't include a colon right after gender that is something you can do if you want - this actually one more thing I want to show you inside the index page which is the fact that we can actually create something called a caption now a caption is basically just a way of labeling when you have any kind of graph or something like that so we can just go ahead and create a caption and we do that just by creating a caption tag you could also create a header tag if you want to but the caption is technically used when we have some kind of graph or something that we want to actually give a title okay so we could actually say we have names lists or something then we can go inside the stylesheet because this one will actually be censored as well so we can actually go ahead and style it if you want to insert the start CV so we could actually give it a text-align:left as well if you wanted to let me just say caption there we go and now if we refresh the browser you can see it it goes on the left side if that's what you want - now the last thing I'm gonna show you about tables is something that we haven't actually talked about before so if I were to go ahead and go inside my stat sheet again we can actually go ahead and give these cells different colors not by going in and coloring them individually but by using styling actually say to want to style every second element inside this table here and this is something we haven't talked about before and it's actually something that's really useful in a lot of cases when you do styling because you don't have to it minimizes the amount of styling you do actually need to do so I should probably create a separate episode on this but just to show it you were to go down to the bottom here could actually say that we have a table row so now we're actually gonna style the rows here : n - child meaning that every something child element that we have inside this what you call inside this table here it's going to be styled in a certain way so if we were to go ahead and say we want to style every even child element inside this styling here a certain way then we can actually do that so we can say background color and set it to something like white then we can go ahead and do the same thing copy-paste and say we want to style every odd at certain colors who could say ddd which is a light Gray's color if i refresh the browser you will now notice that every odd is going to have this background color styling and every eben is going to have this background styling and this is actually something you can do even more with instead of juicing even and odd you can actually change this in many other ways such as styling every third or fourth or something there's a lot of ways you can customize this inside the parenthesis again like I said I would rather do a separate tutorial on this so it's not something we're going to talk too much about today so this is what I want to show you guys regarding tables we're actually soon getting to the point we're gonna learn how to actually upload a website some kind of looking forward to that so hope you guys enjoyed and I'll see you guys next time [Music]

Channel: Dani Krossing

Views: 277,597

Keywords: Table In HTML and CSS, how to create a table in html and css, how to create a table, table, html table, how to style a table, how to style an html table, html, html tutorial, css tutorial, css, tutorial, mmtuts, html th, html tr, html td, html table cell, table cell, how to create rows and columns in a table

Id: dK27jWKtJxs

Length: 10min 0sec (600 seconds)

Published: Sun Feb 11 2018