1 00:00:07,240 --> 00:00:13,690 This is where we lived in the previous video by having a basic HTML table. 2 00:00:13,720 --> 00:00:18,460 In this video, we will talk about advanced HTML table. 3 00:00:18,610 --> 00:00:23,950 So I'm going to rename this one as basic customers table. 4 00:00:24,400 --> 00:00:30,460 And I'm going to create one file for advanced table. 5 00:00:35,980 --> 00:00:44,200 So let me close this one and let me have the scaffolding for the advanced HTML table. 6 00:00:44,500 --> 00:00:48,610 And this one is going to be advanced. 7 00:00:50,090 --> 00:00:52,280 A HTML table. 8 00:00:52,880 --> 00:00:53,270 All right. 9 00:00:53,270 --> 00:00:58,190 So let me add the heading here as advanced. 10 00:00:59,550 --> 00:01:00,000 All right. 11 00:01:00,000 --> 00:01:01,860 So let me underline it. 12 00:01:02,630 --> 00:01:03,230 Cool. 13 00:01:03,530 --> 00:01:04,879 Let's open it. 14 00:01:05,810 --> 00:01:09,500 All right, so this is my advanced HTML table. 15 00:01:09,500 --> 00:01:12,260 So let's look at the syntax. 16 00:01:12,830 --> 00:01:19,580 First of all, it start with the table container, and that is the table tag. 17 00:01:20,890 --> 00:01:21,790 And that. 18 00:01:22,590 --> 00:01:30,030 Then inside I'm going to add a comment and I'll call the first one as the caption. 19 00:01:31,370 --> 00:01:31,760 All right. 20 00:01:31,760 --> 00:01:33,200 So it goes like this. 21 00:01:33,200 --> 00:01:37,070 I'm going to write the code and I'll explain to you later on. 22 00:01:37,160 --> 00:01:40,520 So first of all, we bring in what is called caption. 23 00:01:40,730 --> 00:01:46,310 The name is even descriptive, and I will say sales report. 24 00:01:47,330 --> 00:01:52,570 After that, I'm going to have what is called call group as that. 25 00:01:52,580 --> 00:01:57,980 Then inside are going to have individual column as that. 26 00:01:58,720 --> 00:02:02,230 Let me copy and paste it three times. 27 00:02:03,800 --> 00:02:07,870 Next is let's explain what is going on over here. 28 00:02:07,910 --> 00:02:15,200 For the table we have spoke about and this is the container or the wrapper that wrapped the individual 29 00:02:15,200 --> 00:02:17,960 element that makes up the table. 30 00:02:18,050 --> 00:02:21,440 What about the caption which is new to us? 31 00:02:21,620 --> 00:02:29,840 The caption element is used to add a caption to the table, and it should be placed immediately after 32 00:02:29,840 --> 00:02:36,560 the table element and it provides a summary or description of the table's content. 33 00:02:36,680 --> 00:02:41,250 So as you can see here that I have provided what is called sales report. 34 00:02:41,270 --> 00:02:47,690 So it is a caption for my table and it gives a description about the table. 35 00:02:47,870 --> 00:02:50,480 What about the column group? 36 00:02:50,510 --> 00:02:55,580 Well, we have column group and then the column itself, which are these ones? 37 00:02:55,580 --> 00:02:57,500 So what are the difference between them? 38 00:02:57,590 --> 00:03:04,360 Well, the column group element can be used to define a group of columns in the table. 39 00:03:04,370 --> 00:03:11,990 Then the column itself, which are these ones, are the element that can be used to define properties 40 00:03:11,990 --> 00:03:16,340 for each column, for example, the weight of the column. 41 00:03:16,730 --> 00:03:21,400 Then after that, we are going to add our table head. 42 00:03:21,410 --> 00:03:30,920 So after the column group, I'm going to add a comment and I'm going to call this one as a table head. 43 00:03:32,000 --> 00:03:33,830 And this is a syntax. 44 00:03:33,830 --> 00:03:36,950 It goes like table hate. 45 00:03:38,180 --> 00:03:48,800 And inside you're going to have our first row as rt, r and inside rt r we are going to have the table 46 00:03:48,800 --> 00:03:49,430 head. 47 00:03:52,970 --> 00:03:55,460 And for a table head. 48 00:03:55,460 --> 00:04:01,670 I'm going to provide the region and I'm going to copy it. 49 00:04:04,200 --> 00:04:08,880 And next head is going to be the product. 50 00:04:10,540 --> 00:04:15,100 And after that, we're going to have the quantity sold. 51 00:04:18,550 --> 00:04:20,410 Then the total sale. 52 00:04:23,580 --> 00:04:24,510 Or sales. 53 00:04:24,540 --> 00:04:26,280 All right, So this one. 54 00:04:26,400 --> 00:04:28,980 Let's see the changes now. 55 00:04:29,070 --> 00:04:31,350 And this is what we have. 56 00:04:31,380 --> 00:04:32,100 All right. 57 00:04:32,100 --> 00:04:37,170 So the next one going to be the table body itself. 58 00:04:37,170 --> 00:04:44,490 This is the table head, but you want the actual content under each column and that is the under each 59 00:04:44,490 --> 00:04:45,530 table head. 60 00:04:45,540 --> 00:04:49,440 And we are going to use what is called the table body. 61 00:04:49,470 --> 00:04:58,890 So after the table head, which is this, we are going to have what is called the table body itself, 62 00:04:59,100 --> 00:05:02,640 where the actual content is going to be placed. 63 00:05:02,640 --> 00:05:06,180 And it goes like table body. 64 00:05:06,690 --> 00:05:10,500 And inside we're going to have the first row for this one. 65 00:05:10,500 --> 00:05:12,000 We have talked about it. 66 00:05:12,000 --> 00:05:19,770 So the first row is going to contain the actual data as table data and the first region going to be 67 00:05:19,770 --> 00:05:23,010 north, and I'm going to copy it. 68 00:05:23,010 --> 00:05:29,130 The product itself, I will say product A or I will say iPhone. 69 00:05:30,090 --> 00:05:33,860 And the next one going to be the quantity sold. 70 00:05:33,870 --> 00:05:36,360 And for this I would say 20. 71 00:05:36,510 --> 00:05:44,280 And the total sales I'm going to say for this is $900. 72 00:05:44,520 --> 00:05:46,680 Let's see the changes now. 73 00:05:46,680 --> 00:05:49,030 And here we go. 74 00:05:49,110 --> 00:05:50,000 Great. 75 00:05:50,010 --> 00:05:54,260 So I can go ahead and add two more products. 76 00:05:54,270 --> 00:05:59,850 So I'm going to copy the first row and paste it here and the region. 77 00:05:59,870 --> 00:06:01,710 Going to be the South. 78 00:06:03,840 --> 00:06:05,790 And going to be. 79 00:06:06,610 --> 00:06:19,930 I mark and to task sold is going to be 23 and so it's going to be 700 or let me say 7000 and let me 80 00:06:19,930 --> 00:06:32,440 add the last product and the region is going to be waste and I will say laptop. 81 00:06:33,440 --> 00:06:34,670 And Twitter. 82 00:06:34,670 --> 00:06:36,190 So is ten. 83 00:06:36,200 --> 00:06:40,440 The price is 1000. 84 00:06:40,460 --> 00:06:41,660 So now let's see. 85 00:06:41,690 --> 00:06:42,050 All right. 86 00:06:42,050 --> 00:06:49,220 As you can see this, what we have and the last property that we need to finish up with the table is 87 00:06:49,220 --> 00:06:54,710 the table footer after the table body, which is this and this is the table head. 88 00:06:54,710 --> 00:07:03,560 So after the table body, I'm going to add a comment and for this I'm going to use the table footer 89 00:07:03,980 --> 00:07:06,170 and it goes like this. 90 00:07:06,350 --> 00:07:09,200 We bring in TW footer. 91 00:07:10,500 --> 00:07:11,880 Or TW fort. 92 00:07:12,300 --> 00:07:22,530 And and we bring in the raw and inside going to have the table data as that. 93 00:07:22,950 --> 00:07:35,640 And the first one is going to be the total sales as and after that we're going to have the table data 94 00:07:36,600 --> 00:07:45,690 and the total sales for this, I would say I'm going to guess ICE 9000. 95 00:07:46,170 --> 00:07:46,500 All right. 96 00:07:46,500 --> 00:07:47,610 So let's see the effect. 97 00:07:47,640 --> 00:07:56,250 Now, as you can see, we have the total sales here and then the actual caption and then the table head 98 00:07:56,250 --> 00:08:00,090 and then the actual sales or the content. 99 00:08:00,240 --> 00:08:04,940 So this is how we can create advance a HTML table. 100 00:08:04,950 --> 00:08:06,930 If you are confused, don't worry. 101 00:08:06,930 --> 00:08:14,250 The syntax, you're going to be even descriptive than that before we have the table head the table body 102 00:08:14,280 --> 00:08:17,100 table four to inside a table body. 103 00:08:17,100 --> 00:08:22,380 That's where we have the table data, the individual product or the data. 104 00:08:22,410 --> 00:08:27,630 In the next video we are going to play around with CSS to make it more beautiful than this.