This is where we lived in the previous video by playing around with advanced HTML table.
In this video we are going to apply some few CSS to aid to make it more beautiful than this.
All right.
So let's continue on.
So as we did for the basic HTML, we are going to apply this same concept of CSS to it.
When we get to CSS, our life going to be pretty easier than copying the CSS from one element to another.
We can target one element or tag and the CSS can be applied to the respective elements or tags.
So let's continue.
Let's start with the actual table and we are going to add the same property as we did for the basic
style and give it a width of 100%.
Then the border of one PC solid.
Hashtag c cc that is a color and margin.
Of 20 pills, works and zero pills.
Don't worry.
I will explain this one to you if you get back to CSIS.
But the meantime, just bear with me and tie up as I do.
So with this one.
We have something like this.
All right, Next is less style, the caption because I want to push the sales report here to the left
and I'm going to tag it the caption by applying style and going to be text a line as that with this
one.
Let's see.
Indeed it is at the left and I want to increase the boldness.
So I'm going to use font weight as font weight and I will use bold or bolder.
Yeah.
This what we have.
And after that, I want to have some margin bottle.
So.
As margin bottom, and I'm going to use ten Pacers.
Oh, great.
Next is less time.
The column itself safe and I want to increase the column of it.
So I'm going to provide style and weight of 100%.
All right, so let's see.
Supposed to be this?
As you can see.
How is being moving the other element as that.
And I'm going to I think if I give it as 20%, that one would be fine.
Yeah.
And I'm going to copy and paste it here and change this 1 to 30.
I that and next one is change this one to.
25.
And lastly, which is this that is also has 25.
As you can see, this one controls how the individual cells are being arraigned and that.
All right.
So let's target the table row.
So inside a table, head less target that.
So I'm going to target the table row and add style of background color of hashtag F, zero, zero,
F zero.
And save it.
And let's have a look.
Yeah.
As you can see this what we have, right?
The next is I want to target the individual table head.
And for this, we can pass in a couple of attributes, but let's use the style attribute and provide
padding of ten pixels and then the border of one page solid.
Hashtag CC, save it and let's have a look.
And this is what we have.
Great.
Next is I want to add text align.
And is going to be text a line to the left.
As you can see, I have pushed this one to the left, or I can pull it to the right or to the center.
The choice is mine.
So I'm going to copy the same thing and put it on the rest of the table head.
As you can see how we are moving the CSW around, it's making our code not readable.
If you get to CSA, we can improve this.
Yes.
But for the meantime, let's maintain it as it is.
The next one is going to be the table body and let's target the table data.
And as we did before, it's going to be style and give it padding of ten pixels.
And border as before, one pays a solid high tax sec.
And that is it.
So let me copy this.
And paste it to the respective data.
All right.
And I can go ahead and do for the rest.
Save it.
And let's have a look.
And this is how it looks like.
Let's target the total sales and add some specifics.
Yes.
To it.
So over here, I'm going to add the same CSS, but instead I want to increase the font size and I'm
going to make keys of 36.
Save it.
And this is the effects.
I like that.
So let me copy the same font size to this one.
And let me also add the color and let me see blue.
All right, so let's see.
Oh, good.
Or you can make it gray or black.
The choice is yours.
I think black is okay.
And let me increase the weight of the font.
So it's going to be font weight.
As boulder.
Good.
Likewise this.
Let me add the same CSIS to the.
Sales.
Okay.
All right.
This is the end of the advance HTML table.
If you are confused, don't worry.
Ask questions and play around with it, and everything will be all right.
Let's continue in the next video by talking about how we can test eight more tables together.