Let us learn how to add a table to an HTML page. angle bracket table tag is used for adding a table to our HTML page. It has got few child tags within itself. Tr table row TD is table data it represents individual cells, then P head table head. If you want to give a heading for your table, then you need to use th. Then this table also has got few attributes.

If you want to add a border, if you want to specify your spacing between the cells, then you need to use the attributes of table tack. Then, if you want to merge two columns go in for call specs. If you want to merge two rows going for rows. Let us see a simple example. I want to create a table with three rows 33 columns name subject and mass and three rows. I am supposed to specify values for this raw map hundred.

Again Sam, Matt 200 and again, john signs AP. Now how to represent this in using HTML, the route tags table within which I need to specify the first row tr, within tr, I need to add a T shaped table heading, what is the heading name ended with a table th that then again, th subject ended with th slash th. Similarly, for the third one so here's the secret math class th. So my table heading is over the first row is done. So we are closing it with slash the next second row. So slash pa within this I need to write TD, table data ROM, slash TD, then again, TD, the subject slash tv.

And again not the second one, I mean the third one is TD mah slash tv. Similarly, I have to continue for the other two rows. Finally we ended with slash table. This is how you add a table to work HTML page. Now let us try this out. I'll go back to Sublime Text and create a HTML page file is ready.

Let me start creating the table I'm going to create the same table what we have seen there. So I just added like a table within which I need to start with tr within tr need to add th within th his name, then subject and mass. So how to copy just keep the cursor in that line Ctrl C Ctrl V that is, again an advantage of Sublime Text, name, subject. Control we hear what it is. Okay, so the first one is that next we need to go into the second row, it is the app within which TD TD, ROM ra slash t The first one is name, the second one is my subject and the third one is Max again Ctrl C Ctrl the Ctrl V now I need to change it, Max and hundred. Now I need to copy this row as such.

I want three rows Ctrl V, Control V. Let me change the values also. Now the table is done, let me open it in the browser, right click open in browser. Now you can see the output. This table is not having any border. If you want to add a border, you need to go in for the table stack, and you can add a border attribute. And you can specify the value.

I have given it as one, so I'm getting the border now. But the right approach of adding a border to a table is using CSS, cascading style sheets with CSS. You can specify the border color border type where exactly you want a border. Whether you want a border for every cell, or only for a particular sense, all these are possible using CSS. Now I have added the border and my table is ready. Okay, next one.

Let me explain what Of course, I mean cell padding and cell spacing, cell padding and cell spacing or attributes in tables. So, let me add that cell spacing, cell spacing is the spacing between two cells, that is spacing between name and subject spacing between a subject and mark. So, this space the in space between these two cells will increase, I will show you I have added it as 10. Now, let me refresh, you can see that the space between the cells is getting increased when you are using cell spacing. There is one more attribute called a cell padding cell padding. Let me give the value was 10.

What is the cell padding? cell padding is a space between the text and the border. Now, if you see it is cramped actually the text and the border is cramped. There is no space between it if you want to add space between the To extend the border, you need to go in for cell padding and saving this. Let me refresh. Now you can see the space between the text and the border is called a cell padding.

And the space between the cell is called a cell spacing. Of course, we don't need cell spacing, but we need cell padding to get a good look for the table. And saving it here is refreshing. Now my table looks good. Okay, next, let us learn about rows and columns. I will explain you here I've got two rows with the same value in the third column, better smarter funded forum and john, I don't want to have individual entries, I want to combine them and have a single entry.

That is I am trying to join two rows. So how we can do that. So here I am coming to this place. I don't want to add the same entry for john again. So I'm removing this So what happens, this particular row has only two columns. But it is not the right approach, it must have three columns, it has to take the value of the previous row, how to do, I can go to this TD, that is to the last car, I mean not to send, and then I can specify rowspan equal to how many rows I'm trying to join two rows I'm trying to join and save this and refresh.

Now we can see if I don't give this rowspan and if I'm having only two columns in the second row, let us see what is happening. I am refreshing it you can see that this looks empty. I My idea is I want to say that both ROM and john have taken the same month. I don't want to have a specific entry for john. So I want to combine two roles. Together sighs login go and add rowspan here.

This is done. Now let me refresh. Now you can have a look, these two rows DOM and john rose are getting combined together with a single value. Now let me go to the last two I want to have a total of math. So yeah now I want to assume that I want to add it as 180. So here PR within tr I have to give TD total colon 180.

Okay, simply I am just adding a t table data. I have added only one column because the other two columns I don't need. So simply I have added this, I will refresh you see the output only in the one column it is getting printed, but I don't want to show it in this manner. I want to show it all put together for all the three columns. lumps together, I want to merge them. So how many columns are you going to merge, you're going to merge three columns together.

So here, TD space called span equal to three. So I'm specifying this particular data is used for all the three columns together. So join all the three columns and use this as a single value. I'm saving this let me refresh. Now you can see. So row span is used for merging two rows.

Cascara is used for merging multiple columns. This is about the table. There is one more thing which you must know when you're working with tables. Let me go back to the slide that is feel fit and legit. Now. Let us now discuss about fields that and legends which are used together with table if you're going to certain websites.

When you're trying to checkout you might be seeing product list in a separate table on the top We'll be having as product our card details, then you will be adding a separate table which shows shipping address, then home address are your profile details, everything will have its own heading. However, it is possible it is achieved with the help of field set and legend. So, if I want to differentiate the table depending upon the data, I can go in for fields that are legend fields such as a tab which should be added outside the table. So, the table should be contained within the field set and to give a heading you need legend legend I have given a line equal to right I have given student details. So let me just go to the program and I will add that So where will I add fields above the table?

The last name slash fieldset then legend specify student details Let me save this and refresh. You can have a look it looks good, right? It has got a nice border with this shading on the top. If you want to align it to left or right or bottom, we can just specify that also, again this should be done with the help of CSS this aligning part not using HTML. As of now, I am just showing it the HTML you can see I have given aligned right. So now it is aligned to the right.

So this is how we add a table to HTML page. What we have seen in this session is how to create a table, how to add rows, add a border, what is the use of cell spacing and cell padding and what is the difference between row span and call span, how to use it and what is the use of fieldset and legend. So this is how you add a table to an HTML page. What we are seeing in the session How to create a table. So this is how you add a table to an HTML page what we have So, this is how you add a table to a HTML page. What we are seeing in this session is how to add a table.

What is the difference between cell padding and cell spacing? How to use row span and call span and what is the use of field certain region. In the next session, let us learn. So, this is how you add a table to an HTML page. What we are seeing in this session is how to add a table to an HTML page. So, this is how you add a table to HTML page.

So, what we have seen in the session is how to add a table with the table tag the child tags within table tags. Then the difference between cell padding and cell spacing, the use of row span and call span and how to use fill certain region. Thank you