This is where we lived in the previous video by having a basic HTML table.
In this video, we will talk about advanced HTML table.
So I'm going to rename this one as basic customers table.
And I'm going to create one file for advanced table.
So let me close this one and let me have the scaffolding for the advanced HTML table.
And this one is going to be advanced.
A HTML table.
All right.
So let me add the heading here as advanced.
All right.
So let me underline it.
Cool.
Let's open it.
All right, so this is my advanced HTML table.
So let's look at the syntax.
First of all, it start with the table container, and that is the table tag.
And that.
Then inside I'm going to add a comment and I'll call the first one as the caption.
All right.
So it goes like this.
I'm going to write the code and I'll explain to you later on.
So first of all, we bring in what is called caption.
The name is even descriptive, and I will say sales report.
After that, I'm going to have what is called call group as that.
Then inside are going to have individual column as that.
Let me copy and paste it three times.
Next is let's explain what is going on over here.
For the table we have spoke about and this is the container or the wrapper that wrapped the individual
element that makes up the table.
What about the caption which is new to us?
The caption element is used to add a caption to the table, and it should be placed immediately after
the table element and it provides a summary or description of the table's content.
So as you can see here that I have provided what is called sales report.
So it is a caption for my table and it gives a description about the table.
What about the column group?
Well, we have column group and then the column itself, which are these ones?
So what are the difference between them?
Well, the column group element can be used to define a group of columns in the table.
Then the column itself, which are these ones, are the element that can be used to define properties
for each column, for example, the weight of the column.
Then after that, we are going to add our table head.
So after the column group, I'm going to add a comment and I'm going to call this one as a table head.
And this is a syntax.
It goes like table hate.
And inside you're going to have our first row as rt, r and inside rt r we are going to have the table
head.
And for a table head.
I'm going to provide the region and I'm going to copy it.
And next head is going to be the product.
And after that, we're going to have the quantity sold.
Then the total sale.
Or sales.
All right, So this one.
Let's see the changes now.
And this is what we have.
All right.
So the next one going to be the table body itself.
This is the table head, but you want the actual content under each column and that is the under each
table head.
And we are going to use what is called the table body.
So after the table head, which is this, we are going to have what is called the table body itself,
where the actual content is going to be placed.
And it goes like table body.
And inside we're going to have the first row for this one.
We have talked about it.
So the first row is going to contain the actual data as table data and the first region going to be
north, and I'm going to copy it.
The product itself, I will say product A or I will say iPhone.
And the next one going to be the quantity sold.
And for this I would say 20.
And the total sales I'm going to say for this is $900.
Let's see the changes now.
And here we go.
Great.
So I can go ahead and add two more products.
So I'm going to copy the first row and paste it here and the region.
Going to be the South.
And going to be.
I mark and to task sold is going to be 23 and so it's going to be 700 or let me say 7000 and let me
add the last product and the region is going to be waste and I will say laptop.
And Twitter.
So is ten.
The price is 1000.
So now let's see.
All right.
As you can see this, what we have and the last property that we need to finish up with the table is
the table footer after the table body, which is this and this is the table head.
So after the table body, I'm going to add a comment and for this I'm going to use the table footer
and it goes like this.
We bring in TW footer.
Or TW fort.
And and we bring in the raw and inside going to have the table data as that.
And the first one is going to be the total sales as and after that we're going to have the table data
and the total sales for this, I would say I'm going to guess ICE 9000.
All right.
So let's see the effect.
Now, as you can see, we have the total sales here and then the actual caption and then the table head
and then the actual sales or the content.
So this is how we can create advance a HTML table.
If you are confused, don't worry.
The syntax, you're going to be even descriptive than that before we have the table head the table body
table four to inside a table body.
That's where we have the table data, the individual product or the data.
In the next video we are going to play around with CSS to make it more beautiful than this.