Hello everyone. In this chapter we're going to learn about tables. We're going to learn how we can use sales and how we can change its alignment. How we can use images, tables, and how we can create column and row scheme. They just take a look at an example. This is a normal table.

We're going to learn how to create such a table. Though let's take its course. Okay? This is a normal, including go which came in Eggs, then that will stop this table, this tech creates a table. Now, you have width equals on the percent, whenever you say width equals 100% This means the table is going to spend the full width of the screen to go to the schizophrenia resolution. So, for example, I have this resolution.

Now, if my size decreases, then the table is going also to decrease like this. So, you can simply occupy it occupying whatever space is available as fear is applying or the use or abuse. You have two ways in order to specify these words is or as a percentage of the words on the screen or as specific words. If you if you want to buy a specific with then you Is this with some fixes? Okay. So, there are two ways to mention this.

What this king distinguishes between them is the presence of the percentage. The percentage is there. This means this is percentage, which is not there. This means the weights will be in pixels. Okay. Now border equals five though as you see, there is a border surrounding the whole table.

Now, this is five pixels, so you can imagine how big it is. So five pixels is this big. Okay. Now cell aiding equals 10. Of course, all units are in pixel. Now what is meant by cell padding and cell spacing because you're confusing too many Many users have HTML.

Now whenever you say cell padding, this means whenever you start typing text like this, what will be the padding what is the margin between the border of the table ends the thickness that you're going to start typing. So, whenever you want to increase the margin, you increase cell padding. Okay, but now we have another property called cell spacing. Well, this is a whole cell. As you can see, this is contained Mostafa. Now, what is this piece between one sentence or another, if you mentioned that the same spacing is zero, this means there will be no space the only border will appear.

So for example, let us do small change for this so that we can imagine what you are mentioning exactly So let us now I'm going to make this is by now see this is a 500 fixes for whenever you change the location never changes each size another thing if you change border to do it now see how big is the border no no sale ad Now let's make it so, as you can see, now, there is a bigger margin between the border of the table and the contents of the cell. Now if you make sense they seem self sufficient as evil. See, there will be no spacing between the cells. Now border color equals blue while you can try it yourself. As you can see the whole board goes off into and background color is in green. As you can see, this is obvious, and you can change to whatever colors you need.

Okay, now we have something called caption. Keeping this caption, this is the title of the table. So as you can see that we have here affecting employee information This is a title or the keyword, it appears about the table and in the center of the table, so I can of course write whatever tickets I need in order to simulate the title, but it's a built in property in table, how we can create a caption that appears like this. Then I need to create a row when in in HTML table is created by different rows and cells. So this is table row. Now whenever he mentions up I have a table that says this is th table here.

This means this is the heading of the table it appears on the bolt is bold and in the center. So as you can see, this is the heading of the table. And this is a normal text. So this is normal text name and city appearing like this, then you close zero. This means I ended my first row that has two cents. Then I stopped another row.

That was another table data. Yeah, now you can create whatever contents you need like this. So it's the Align equals live Mostafa, this is how you specify the sale along with in PayPal and the same here that this is in center and of course you can draw your own as well like this. Now this is regarding the horizontal line. Now suppose that I have big fitness or big image like this that is painting big space. Now whenever you start writing like this, what do you have?

Also vertical online. So for horizontal alignments, you use these with a tribute align and any value that you need to specify whether it's select center or a for vertical alignment, you have top, middle and bottom. So, now whenever you mentioned that this is the Align equals Oh, this means my alignment is important. And as I said you can use middle and bottom also to do this. So I can hear noises. Now it becomes the middle and I have also Okay, so this is how we can use different attributes of a word.

And this is the output that you see here. Now, we have another example regarding this thing, now let us see what is meant by spin. Now, as you can see, whenever we use a cell cell appears with exactly the same sizes. But now suppose that I need to specify different sizes for the cells. Well, we mentioned that we have an attribute or the table name do it's also desirable available for table reading and table data. But now I need to do one more thing now It's something like merging in Microsoft Word that I need this thickest is this is one second, but I need this to span across 123 columns.

So in this case, I have only one cell, but it is in three columns. So each column in Spain equals three. And this is because the need to use from this case this is a result, I can see My take is spending three columns. Now regarding table data, also, this is one set, but it is painting three rows, whatever its contents, so the tickets or images, it doesn't work. Now I have rows pane so we have two properties, columns pain and boosting. So in this case, this is pain today.

Rows 123. So, now, whenever you have a new row like this will actually remember that we have here three cells, okay the first cell is pain free rows, this means as eaves There is also another cell here. So, you need to mention two more cells in order to avoid the full information of the table adding something like this. So this is simply we can use column staining in pips. So, in this chapter we have use tables. We have changes in alignment, whether it's vertical alignment or horizontal Lightning, we are able to insert images in tables and we have used the called spin and go spend golden dimension is paying for the sales was up across columns or across both.

I hope you all guys enjoyed this chapter. sent us you thank you