CREATING TABLE WITH ROWSPAN AND COLSPAN - HTML

[Music] hello friends welcome back to our channel so today session let's have a look on the table tag so in order to create a table by using this HTML we are having the table tag so inside the table we have to write the code so that a table with a required number of rows and columns will be generated on the screen so in today's session let us see the table time that means tax which are used to insert a table so we know that a table consists of the number of rows and number of columns so this we call is rows and this we call as columns right so for each and every row and column we have to use a data okay so this is one data this is another data this is a1 and like this all these are the data so for this we are having a table tag so we know it in HTML tag means the text which is enclosed in between the less-than and greater-than symbol that we call it as a tag so here we will use a table 10 starting down at the ending deck so tag ends with a backslash right in between this table tag we have to insert the data so in order to represent this data we have to write the room and corresponding column so for the row there is a tag called TR TR table room inaudible o inside the row we have to write the column and so in inside this room there's a we in which we're inserting the table so the column must be inserted producing TD tag T that will say terrible data they build it so inside that row again use the TD some data close the TD like this the first column first column so this represents the first column and if you want to insert the second column again use the second column in the same TR tag so unless you write the backslash tier this row will not be exited right so here there are two so this is data 1 data - backslash TV this is the second one coming to this again if you write the TD there will be third column Delta 3 / TD and now close the deal this implies he this row consists of three columns row consists of three columns and if you write the same thing if you want to insert the data in the next row again repeat the same process they are TD data for simile data file similarly data 6 and closer thinner so this score represents two rules with three columns in each and close the table tag so this implies so the output from this one is data 1 data to data thing there are four data file there are six so the output of this code will be this one right now initially there will be no border for this table where we get a just without any border the data will be displayed here so no border will be inserted right see no border only the data will be represented in this format so if you want to insert the border if you want to get the border we have to write the border attribute in the table as we know that the attribute means it gives some special additional information for the existing tank so here table is a tag in to insert the table and in order to get the border we have to add the attribute border and we have to mention the size of the border which we want to display so here so attribute in this tag attribute we're adding that so table space Bolton is equal to 2 the size is 2 so then we will get a golden with the size 2 this one will be appeared this is about the table and then if you want to get the caption of for this table for every table there will be a caption so if you want to get the caption there is an another tag to add the caption that is caption so this tag should be included inside the table just above the TR we have to insert this caption caption sample table closer closer caption and now open the tea attack so if you write this caption inside the table this caption will be displayed as the center of the table above the table Center alignment it will display here sample table right so it will display in this way and if you want to match two columns so if you want to make these two columns right these two columns that means just you want to match these two columns and this we want to write data fork and here there are five so in this way that means we are merging two columns each other so that we call it as a spam call spam cyl SPL is equal to number of columns which we want to match so here we are magic two cons so call span is equal to two we have to write an old span is equal to two so first term that I want data to data three so there is no change coming to the next one TR data we have a four and here also in the second row also it must be major so we can erase the third one and here inside of us to write an attribute called span is equal to 2 therefore data so obviously two cells will be merged two columns will be melted and the next one disappeared on the third column hope you understood this one so here the first term first column second column third column so the data is rather like this come to the second row we want to let you foster two columns so first two table data swill be measured that means that those two cells should be mentioned by using the additive constant so data 5 is displayed on the third one okay so this one gives the output for this one mom now if you want to make these two columns so here and data for data fine so first row is as usual coming to the second row the first column is as usual so remove the table span here I mean constant data for coming to the second and third ones expand should be done that means magic T whole span is equal to 2 there a file close the team this goes automatically the second and third columns will be swept I mean magic hope you understood this one similarly if you want to make two rows we have to use a row span so row span attributes also will match the number of rows so if you give here to the pool rows will be better if you keep your T these three rows will be Mitch C let us see that one so we will have the same data file data 6 so similarly here also we will write the code so not disturb that fun new at six see if you want to make two rules so that means these two columns these two columns and insert that are one then see first rule the first row in the first row two columns and two rows have been made right two rows have been measured so here right Tilly row span is equal to two data one closer to the death right so the role has been span now remove the first one because in the second row also the row has been the first Gator has been busy so remodel first one so that we will get the same this is the number so row span to that means the first row I mean the first column of the first row and the second column of the first row will be make it right so for that we are ready rowspan so row span will make rows columns and the match corners right so if our table requires six rows we have to write this disk over six times and if you want to I mean if you if our table consists of six columns this TV must be I mean in between this TR then we have to write the six table data and first row in the table first row let it be it's a header right we can replace this first table - the8 stands for head so that will be somewhat bold the burden will be applied so table head eh is nothing but a table hey so this table it should be inserted in the first row itself because the first two Road data we will be heading and from the second row the actual data will be displayed so faster roll the table data must be press with table with head so you can also write the table data but if you write this table head the first row data will be having bold character right so hope you understood this is table tags now let us see this table tags on the system by implementing this if hello friends so just now we have seen the table tag so for creation of a table now let us see the implementation so we know that all the tax should be enclosed in between the starting and ending HTML tag and inside the HTML tag we have to write all the content inside the body tag right now in order to insert the table we are having the table tag right so now let us see which table we want to create see let us see by using the row span let us create this table and by using the column span let us create this table before that let us see a few so without any spanning just we will see there so first a TR for insertion of a row for insist over data we have to use in TD and close in between starting end heading tags again tear so close this year again just we can copy this one so we will edit the data section a section D for section let us take one more tail row so here we can write a section B and a section so for all the branches we are writing section a and Section B just to save that I am saving with a table dot HTML so close the table tag and we will see in the browser so table dot HTML so if you open this table dot HTML we can observe see three columns and 3 rows here there is no border so in order to apply the border we have to use a attribute border inside the table tag so border is equal to 2 it gives the bottom C right so if you increase the table size and water sighs the model will be increased if you put this file now let us see we just refresh the this one so the water will be fine right here we are we have generated a table with 3 rows in two columns so 3 TR tags and inside the TR tag we are writing two table data's right see now if you want to keep the caption just above the table we can use the caption tag inside the table tag so caption sample table right say this and open the browser refresh so that you can get the caption over there so the caption will always be center-aligned to this particular table so here we have not mentioning any alignments in the text but if you use this caption tag automatically the text whatever displayed inside the caption that will be aligned in the center from for the table right next now let us see an example for row span and column span first let us see for the row span so in this row how many rows are there without spam so one two three four rows are there among those four rows two rows first two rules are matched in the second two rows are made see here let us take the first row inside the first row inside the first TD let us apply the row span is equal to how many rows two rows what what is the thing ug so write the ug next what is the second column it's a beating we did right so here we are having only two columns two columns this is one call this is second column next go to the second row go to the second row inside the second row the second row is metal with the first row so you need not write the first TD so only the second TD write that and inside the secondary write be tech sorry so become already BTech have been written be calm next the third rule so here again the third and fourth are method so in the third row just write the row space n is equal to 2 and what is the data PG PG so what is the next one MPEG what's this next data there is empty next after completion of this room again the fourth row must be included and inside the fourth row the fourth first column I mean the fourth row we are merging two rows so next one M come right this one now let us apply the caption row span so I have saved the data with the same file name now let us check so you can observe here ug the first two columns have been merged and the I mean first two rows has been meted and the corresponding columns are having be taken be calm and the third and fourth rows are being met and the corresponding columns are empty can M calm let hope you understood this one so row span every row will be having data right so here to roll then I mean four rows in two columns so in the floor rule first two rows are made so I am writing in the first row itself row span right and in the next one I am just writing the table data detail and then the next row second row the first column is not there because it is melted and the second one be calm right hope you understood this one next let us see their column span let us see the column span so we will create according this one so here how many rows in how many columns to rows and 4 columns so 2 rows and 4 columns so we have to ride only two rules here we have to write only two rows so we need not write all these things just we can so this is one row and this is another row so let us change the caption column span call span so TD the first in the first row the first one first column is Eugene so let us take column span is equal to 2 ug so first 2 columns has been merged and the next two rows I mean two columns the third column and fourth column is also mated so again write again right call span is equal to 2 PG right so hope you understood 2 rows and 4 columns among that in the first row itself we are having only 2 columns that means the first and second columns are being minted and the third and fourth columns has been made so I am writing column span 2 and a column span two in a second one in the second role we have to insert how many rows I mean how many columns for fun that means 4 T DS right so inside the first one what is that BJ inside the second one that means second column data that is a be calm and the third one it is M take related to the PG and the fourth one that is M calm that is a fourth one so let us save this one with the same file name and we will observe the change see we can observe it first two columns has been measured in the first row and the third and fourth columns of the first row has been melted so here there is no alignment so it is automatically by default it will be the left alignment so if you specify here as a center a line is also one attribute a line is equal to center so apply the same for both so you can see the change so just I am applying the alignments so if you observe here the alignments will be done so ugiy and PG has been moved to the center alignment similarly Kachin goes to the column span right it's a simple thing so just remember the rules and columns TR represents the role TD represents the column according to the requirement we have to apply the row span or column span right hope you understood this the table tags so in the table tag we have seen the border attribute the caption tag TR tag TD tag and inside the TD there we have seen the row spans column spans and the alignment attributes right so if you really understood my sessions like my sessions and if you are having any doubts regarding this HTML feel free to post your doubts in the comment section so that I will definitely try to clarify all your doubts and share my sessions with your friends and don't forget to subscribe to our channel thanks for watching thank you very much

Channel: Sundeep Saradhi Kanthety

Views: 36,364

Rating: 4.9135962 out of 5

Keywords: sundeep, saradhi, kanthety, html, introduction, basics, markup language, static, webpages, web browser, text editor, txt file, extention, .html, .htm, java scripting, dynamic, front pages, user interface, front end, tags, html elements, start tag, end tag, web services, html fundamentals, TABLE, TABLE HEAD.TABLE ROW, TABLE DATA, ROWSPAN, COLSPAN, ATTRIBUTES, TABLE BORDER, CAPTION, ALIGNMENT, CELL PADDING, MERGING, COLUMNS, ROW MERGE, COLUMN MERGE

Id: 8haxr6ufgmE

Length: 25min 42sec (1542 seconds)

Published: Fri Dec 21 2018