Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:1.2 hours
Getstartedhtmlcss
  • Overview
  • Transcript

3.4 Tables

In this lesson I'll show you how to take structured data and present it in a meaningful way—namely tables.

3.4 Tables

Welcome back. In this lesson, we're going to look at how to build tables in HTML. So what is a table? Well a table is a way to structure data in a clean and organized fashion. I'm sure you've seen something like this. It looks kind of like an Excel spreadsheet, but we occasionally also see this type of thing on the Internet. We have a list of columns with Item A, and it has certain attributes. Item B has other attributes. And Item C has other attributes. And the way that we structure this in HTML, is to create it not by columns, but by rows. So when we create this table, we're actually going to code up a table header, which is a row in and of itself. And then we're gonna code up each row individually. So each row will be a group of three cells. We'll do the table header, cell one, cell two, cell three. Then a table row, with cell one, cell two, cell three. The next row, one, two, three, and the last row, one, two, three. Let's go ahead and dig into this so you can see it in action. So let's hop over to sublime, and get rid of anything except for basically the we sell widget's h1 tags. So all this other stuff inside the body, except for the div tag, will go away. We'll add a table tag using, autocomplete, and inside the table, we first wanna create a table row, so that's a tr. Inside the tr, we wanna create some table headings. That's a th. So, for Item 1, we'll have a th, Item 2, another th, and Item 3 will be wrapped in a th. Once we have that row complete, let's add some table data. So we create a new row, with another tr, and then td for table data. Inside table data we'll add some pricing of $2.99 for the first item. $4.99 for the second item, and $6.99 will be our last one that will correlate to Item 3. Now just to make sure our table shows up okay, let's go ahead and add a basic border style to this. So style equals border of 2PX solid black. We'll save that, and go check it out. And that's a little bit small, so I'm going to go ahead and adjust the width as well. Let's hop back over here, and change the width to 85%, and while I'm at it let's go ahead and set the text to align center so it keeps things a little bit neater. So we'll go ahead and save that down and refresh. And there we have our items all listed in a nice clean table format. So you may be wondering why I said to use a th for Item 1, Item 2, and Item 3. And a td for the $2.99, $4.99, and $6.99. Well again, th stands for table header, so that basically tells the web browser to go ahead and make that bolder, or show some sort of emphasis to it, whereas all other rows below that will just be table data. So it won't have any kid of added font weight, or any kind of additional default styling. Let's get some more practice in by adding another row. We'll toggle back over to sublime. And we'll add a new table row with a tr. And then some more table data with a td. And this time, we'll add warranties of 1 year. We'll add another td and add a 5 year warranty if they go for the $4.99 plan. And lastly, our $6.99 widget will come with a lifetime warranty. We'll save that, toggle back, and refresh, and we've added a new row of cells, 1 year, 5 year, and lifetime. But what would happen if management came to us a couple of weeks later and said they wanted to issue lifetime warranties across all three items? Well we could go back to each cell and change the one year and the five year to lifetime warranties. But then it would say lifetime warranty, lifetime warranty, lifetime warranty it would be a bit redundant and kind of silly looking. Wouldn't it be nice if there was a way to actually span all three cells across the entire row? There is. Let's take a look at that now. Toggle back to sublime, and we really only want to keep this lifetime warranty line, not the other two. So I'm going to go and delete those, and I'm going to set this line to a column span or colspan of 3. I want it to expand across all three columns. I'm going to save that down. Toggle back. And refresh. And we see that lifetime warranty is actually spanning all three columns. It might just look like it's just under Item 2. But actually, it is taking up all three columns. Let's prove that theory now by by adding a bit more text. I'll go back to subline, and where it says lifetime warranty let's change that to all widgets come with a lifetime warranty, and we'll add some exclamation marks just to take up a little more space here. Save that down, refresh, and now we can definitely see that it's taking up more than just the Item 2 column. Lastly, let's look at the fact that we have a header, a body, and a footer to this table. So what if we wanted to create a group so that we could style this down the road? Well, let's wrap Item 1, 2, and 3 in a T head. So I'll get rid of that closing T head and put it at the end of that row. Same thing for a table body, I'll create a new table body here, and that closing one will go actually at the end of the row with the prices since the prices are pretty much the only thing in the body right now. And for the footer we'll do the same thing, will do tfoot, and that will wrap around the footer that talks about the fact that all widgets come with a lifetime warranty, so we'll surround that row In tfoot. Now if I save this, and toggle back and take a look at it we're not going to see much difference here. I refresh it, we see absolutely no difference. But the point here is is that if I wanted to add some styles to the body, the header, and the footer, I could absolutely do that now because they're grouped together. Let's prove that theory by toggling back to sublime and going up to the T head section. We'll add some style, and I want the font size here to be about 22 pixels. And let's make the color red. Then let's go to the tbody, and no matter how many items we have here, I want their background to be grey. So I want a background of grey. And lastly, the footer, usually is kind of darker black. So, we'll do a style equal to, equal to background of black, but then I'll need my text to be a color of white. So, I'll set that, and we'll save it, and we'll come back and refresh. And we see that each group has its own unique style now. So the benefit of this is that I can keep adding to either the header or the body or the footer, and each thing, whether it is the header or the body or the footer, will maintain its own style. So to prove this, let's add another line to the body, say the number of gears each widget has. So I'll come into sublime. And I'll add another row right below the row of prices, so the tr will set off a new row, and we'll do a td and set the $2.99 to 2 gears. Another td should set the $4.99 one to 4 gears. And lastly the $6.99 one can have 6 gears. We'll save that. And before we leave, I should probably set the color of the text here to white, it just looks a little bit better, so we'll set, not the font, but the color to white. Save it. And refresh. And, now we see the body all shares the same style. So, no matter how many items we add to the body, it will still be the gray background with the white text and that's because we were able to group the body together. So, to recap, anytime you'd like to build an HTML table you simply declare the table, and then put it together row by row. Inside each row build as many cells as you'd like. And if you need a cell to span more than one column you can do that as well. In the next video, we'll look at other important HTML tags that we haven't got to yet, like blockquote, horizontal line, breaks, and things of that nature. Thanks for watching!

Back to the top