This is where we left in the previous video by talking about advanced a HTML table.
In this video, let's talk about how we can nest HTML tables together.
When I say nesting of HTML tables, it means that we are going to place one table into another, meaning
we are going to next.
All right.
But before that, I want to remove the border around this one.
So I'll come here and remove the border.
Likewise this.
All right.
This one looks more professional.
So let's get back to the nested HTML table.
So I'm going to create one file and I'll call it a nested table.
Dart a HTML.
And let me scaffold as nested a HTML.
Table.
All right, so let me remove this one.
And add a comment as nested a HTML table.
All right.
So this code going to be a little bit clumsy, but don't worry with practice.
Everything's going to be all right.
So how are we going to create it?
First of all, we are going to bring in the table tag.
This is the parent.
So inside this table, we are going to add additional table as that this what we call nesting.
And even for this one, I can this additional table together.
And for this one, I think we'd be asking that is this one commonly used in web applications?
And the answer is yes.
It always depends the nature of the data that you want to display.
If you want to display some simple data, then nesting table is not the ideal way.
And if you have seen some of the web applications, how some data are being displayed, sometimes it
looks more advanced.
How the data have been arranged is because the way they have nested tables together.
So let me move step by step.
So first of all, this is the parent table.
And I'm going to have a caption, as we did before.
And for this, I'll call this one as employee information.
Let let's take it as employees.
So.
So let me add the H one here.
I employees information and underline it and let me open it.
All right.
Bring it here.
All right, We have the employees table.
So how are we going to implement it?
Let me change this one to.
Next thing.
A HTML table.
Yeah.
Good.
Next in a HTML table.
The first one is we need the caption for the table, and it is called employees information.
Then I need the first row.
And for the first row, I want to provide the head or the table title for the data.
And I will say name for the first one.
The second one as H.
Third one.
Gender.
And lastly, the department.
So now we have our first row.
And that is the table head.
So I'll call this one -- table head.
Great.
The next row is going to contain the actual data.
So here as table data.
And we need the table raw.
So for a name for this user, I'm going to use table data and.
Are we see John Smith and after that.
I will provide what is called.
Then the age, I would say 28 and the gender.
Male Save it and let's see.
And this is what we have.
So at this point are we doing nesting table?
The answer is no, because it is a normal flow for a table.
And if you can recall in the previous video, I made mention that if we have four table headers, it
means that we need to provide for table data.
But at this point we lack one property or value.
And that is the department.
So it means that we need to provide the department here.
But for the department, I want to provide more information about the department.
This is where I'm going to use nesting of table.
Because for the department, we can have the manager with department and then the type of department
or the total sales for the department and many other information as this is where we are going to use
nesting of a table.
So I'll provide table as that.
Do you get it?
Yes.
So it is where we are next in the table.
So the first row is going to be the table head for the department.
And I'll provide table head and I will say department name.
And after that I want to provide who is a manager for this department as manager.
And the next one is going to be the sales for the department.
I asked that before saving it.
I made some mistake here.
We need to put the table inside a table data.
So let's select the table card and let's bring in the table data and paste that.
So I'll bring the comment inside here, meaning that inside the table head for department.
We have nested the table as that with this.
Save it and let's have a look.
As we can see, we have the department with a table.
So here we can fill up the individual data and the department head, for example, the department name
the manager and then the sales.
All right.
So inside the table data for the department, we are going to create one row for the actual data.
So this one is the nested table head.
And this one is going to be nested.
Table Data.
And let me use different comment here to differentiate.
So it's going to be table row.
And the department for this is going to be the table data and I would say sales department and the manager.
I will say EMA.
And the total sales for this department, I will say $2,000.
Save it and let's have a look.
As you can see for this table, we have the individual data as that.
And I can provide more table data so I can copy this.
And the next department I will say this one is I.t Department and the manager is this and total sales,
is that all right?
So this is the nested tables.
When I collapse the table, you can see that this is table data and we have the nested table inside
that.
So we need to provide more data for the actual table.
As it stands right now, we have one record for the table, which is the first row, and this is the
first row.
I want to add more data.
So we are going to copy the table data, which is the table row.
So I will select this and this one and paste that and I will change this one to let me change this one
to table data one and table data two.
And let me change the color of the comments that let me change the name of this one to Thomas and the
H has 40 and male and for the nested we have the department name manager sales and.
Let me provide a series of.
For the second department.
I want to provide a value of, let's say we department finance.
Department.
The manager is equal to 50.
And the next record, I will say Security Department.
And who is the manager?
I will say the manager for the Security Department.
Let me use Andy.
All right, so let's see.
Great.
So this is how we can nest table together.
As I stand right now, you can see that it looks clumsy, right?
So in the next video, you're going to apply some CSS to make it more beautiful than this.
Let's continue in the next video.