Welcome back, everyone, and this lecture, we're going to discuss tables.
Let's head over to decode editor.
OK, here I am back inside Visual Studio Code.
Now you can create a table in each HTML by first specifying the table tag, and we'll go ahead and click
that.
So you have your starting table tag and your closing table text.
And we'll go and expand this.
And then there's two main distinctions when it comes to a table.
There's the head of the table, which is going to be where your column names are.
And then there are your table rows and within those are table cells.
So there's a couple more tags here and what is kind of normal for other components within each time
out.
So you can think of this as one of the slightly more complicated ones, but that's because we have different
parts of a table want to be able to define.
So we can start off with a table head and then inside this head is where we can begin to put the column
names.
So we actually put these with H and each of these is going to represent a column.
So I can say column one.
Then I'm going to create another T.H and we'll say this is column two.
And then I'll create another T.H.
And this will be column three.
So you may be curious as to why you actually don't see any sort of grid.
Well, by default, there's not actually going to be a border within this table.
That's actually a really useful feature because sometimes you want to use tables to actually organize
information on a particular way on your page, but you don't want it to look like a spreadsheet.
Now, if you do want a border, that's going to be an attribute you define at the table level, so I
can say.
Border is equal to.
And you notice, right when I say border is equal to.
We can immediately see that border being created here.
And depending on what number you provide, you can get like a thicker and thicker border.
So I'm going to put a border of one.
That way, we can actually see what happens as I start putting in table rows.
So again, table head.
These are your columns.
And then inside the table head, you should have T-H elements that are going to be your actual column
names.
So call one column to call it three.
Now what about inserting new rows for each row you want to insert?
You say TR, which is a table row and notice that this is all going within the same set of table tags.
That way, it's all associated with the same table.
Now inside Table Row, I start putting in TED.
And these are going to be your cells inside of the actual table.
So then what I'm going to do here is, say and tree one.
Or data point one.
And you notice that it's actually defined by the order that you placed these in as far as which column
they go into.
So what's actually happening here?
Well, you set up your table, then you set up your head and your head actually takes into account the
order that you're passing in these columns in so column one column to column three.
Then as you add in each new row, each animal is smart enough to remember the orders that are associated
with the columns.
So the very first cell that you put in is going to be associated with the very first column.
Then the second item will be associated with the second column and so on.
If you wanted nothing in the first column, for instance, you could just leave this blank and you notice
that now it's blank.
So typically you're going to have a TD per column that you have inside of your head.
And if you wanted to put in a new row, you would just copy this TR and make a new row.
So this is how you end up building tables.
And again, if we just remove this border, you would still see it organized, but without the border.
So that's the very basics of building out a table.
So let's do a very quick review.
There's a lot more going on here, but we're not going to be constructing tables too often within our
web pages.
But it is a very useful feature.
So the first element tag you put in is define the table itself.
Later on, we're going to discover there's actually a lot more attributes we can add to a table, but
borders probably the key one to understand.
Then you define the head of the table.
Now question is, do you actually need to define ahead of the table?
Technically, no, I could remove this.
And you notice now it's just a table with rows.
So how does actually each HTML distinguish between the heads and the rows?
Well, you'll notice that if I paste this back in, it will automatically embolden the column names
and become bold rather than just normal font in the data entry.
You could always just kind of customize the font, whether it's bold, whether it's a different text
size, etc. But that's how, by default, each HTML shows you the difference between the column names
versus the rest of the rows.
Then, for every single row you want to add in, you put in TR data row and then each cell item.
And again, the order defines which column they're associated with.
Now you can see here that as your tables get bigger and bigger, there's definitely a lot of HTML to
type out.
So later on, it'll be nice.
That jingo will be able to automate a lot of this for us, and we'll actually be able to do things like
put these rogue creations in part of a for loop.
That way, the table can be automatically constructed for us based off what we have in a database.
But right now, just remember the key text table to the find the Table T head to define the column names
and then inside the T head you have T h.
Then for each row you have TR and for each cell item inside those rows, you have to.
OK, that's it.
I'll see you at the next lecture.