1 00:00:07,300 --> 00:00:14,650 This is where we left in the previous video by talking about advanced a HTML table. 2 00:00:14,680 --> 00:00:21,520 In this video, let's talk about how we can nest HTML tables together. 3 00:00:21,610 --> 00:00:30,640 When I say nesting of HTML tables, it means that we are going to place one table into another, meaning 4 00:00:30,640 --> 00:00:32,030 we are going to next. 5 00:00:32,049 --> 00:00:32,790 All right. 6 00:00:32,800 --> 00:00:37,540 But before that, I want to remove the border around this one. 7 00:00:37,660 --> 00:00:41,830 So I'll come here and remove the border. 8 00:00:43,190 --> 00:00:44,990 Likewise this. 9 00:00:48,170 --> 00:00:48,530 All right. 10 00:00:48,530 --> 00:00:50,360 This one looks more professional. 11 00:00:50,570 --> 00:00:55,500 So let's get back to the nested HTML table. 12 00:00:55,520 --> 00:01:02,300 So I'm going to create one file and I'll call it a nested table. 13 00:01:03,100 --> 00:01:04,810 Dart a HTML. 14 00:01:05,570 --> 00:01:12,740 And let me scaffold as nested a HTML. 15 00:01:15,020 --> 00:01:15,890 Table. 16 00:01:16,610 --> 00:01:19,640 All right, so let me remove this one. 17 00:01:22,470 --> 00:01:30,150 And add a comment as nested a HTML table. 18 00:01:30,840 --> 00:01:31,260 All right. 19 00:01:31,260 --> 00:01:35,700 So this code going to be a little bit clumsy, but don't worry with practice. 20 00:01:35,880 --> 00:01:37,680 Everything's going to be all right. 21 00:01:37,800 --> 00:01:39,900 So how are we going to create it? 22 00:01:39,930 --> 00:01:44,670 First of all, we are going to bring in the table tag. 23 00:01:44,850 --> 00:01:47,370 This is the parent. 24 00:01:47,580 --> 00:01:55,240 So inside this table, we are going to add additional table as that this what we call nesting. 25 00:01:55,260 --> 00:02:00,030 And even for this one, I can this additional table together. 26 00:02:00,830 --> 00:02:07,560 And for this one, I think we'd be asking that is this one commonly used in web applications? 27 00:02:07,580 --> 00:02:09,979 And the answer is yes. 28 00:02:10,370 --> 00:02:15,560 It always depends the nature of the data that you want to display. 29 00:02:16,010 --> 00:02:22,040 If you want to display some simple data, then nesting table is not the ideal way. 30 00:02:22,430 --> 00:02:29,570 And if you have seen some of the web applications, how some data are being displayed, sometimes it 31 00:02:29,570 --> 00:02:31,250 looks more advanced. 32 00:02:31,250 --> 00:02:38,030 How the data have been arranged is because the way they have nested tables together. 33 00:02:38,240 --> 00:02:41,480 So let me move step by step. 34 00:02:41,570 --> 00:02:46,280 So first of all, this is the parent table. 35 00:02:46,490 --> 00:02:50,930 And I'm going to have a caption, as we did before. 36 00:02:50,960 --> 00:02:55,910 And for this, I'll call this one as employee information. 37 00:02:56,660 --> 00:02:59,000 Let let's take it as employees. 38 00:02:59,780 --> 00:03:00,590 So. 39 00:03:00,590 --> 00:03:04,040 So let me add the H one here. 40 00:03:05,590 --> 00:03:11,830 I employees information and underline it and let me open it. 41 00:03:12,870 --> 00:03:13,890 All right. 42 00:03:14,130 --> 00:03:15,210 Bring it here. 43 00:03:17,290 --> 00:03:21,100 All right, We have the employees table. 44 00:03:21,730 --> 00:03:25,450 So how are we going to implement it? 45 00:03:25,840 --> 00:03:27,820 Let me change this one to. 46 00:03:29,110 --> 00:03:30,340 Next thing. 47 00:03:32,930 --> 00:03:34,820 A HTML table. 48 00:03:34,850 --> 00:03:35,480 Yeah. 49 00:03:37,660 --> 00:03:38,330 Good. 50 00:03:38,350 --> 00:03:40,840 Next in a HTML table. 51 00:03:41,350 --> 00:03:48,610 The first one is we need the caption for the table, and it is called employees information. 52 00:03:48,970 --> 00:03:52,210 Then I need the first row. 53 00:03:52,600 --> 00:03:59,010 And for the first row, I want to provide the head or the table title for the data. 54 00:03:59,020 --> 00:04:02,290 And I will say name for the first one. 55 00:04:02,980 --> 00:04:07,240 The second one as H. 56 00:04:08,160 --> 00:04:09,390 Third one. 57 00:04:10,450 --> 00:04:11,320 Gender. 58 00:04:12,310 --> 00:04:16,240 And lastly, the department. 59 00:04:18,269 --> 00:04:21,750 So now we have our first row. 60 00:04:22,440 --> 00:04:24,320 And that is the table head. 61 00:04:24,330 --> 00:04:29,340 So I'll call this one -- table head. 62 00:04:30,600 --> 00:04:31,410 Great. 63 00:04:31,560 --> 00:04:36,780 The next row is going to contain the actual data. 64 00:04:37,020 --> 00:04:40,470 So here as table data. 65 00:04:42,610 --> 00:04:45,790 And we need the table raw. 66 00:04:46,710 --> 00:04:53,460 So for a name for this user, I'm going to use table data and. 67 00:04:54,230 --> 00:04:59,750 Are we see John Smith and after that. 68 00:05:00,840 --> 00:05:03,180 I will provide what is called. 69 00:05:04,420 --> 00:05:12,880 Then the age, I would say 28 and the gender. 70 00:05:14,200 --> 00:05:17,320 Male Save it and let's see. 71 00:05:17,320 --> 00:05:19,270 And this is what we have. 72 00:05:19,850 --> 00:05:23,930 So at this point are we doing nesting table? 73 00:05:23,960 --> 00:05:29,990 The answer is no, because it is a normal flow for a table. 74 00:05:30,470 --> 00:05:38,780 And if you can recall in the previous video, I made mention that if we have four table headers, it 75 00:05:38,780 --> 00:05:42,590 means that we need to provide for table data. 76 00:05:42,980 --> 00:05:47,210 But at this point we lack one property or value. 77 00:05:47,480 --> 00:05:49,580 And that is the department. 78 00:05:49,970 --> 00:05:54,170 So it means that we need to provide the department here. 79 00:05:54,710 --> 00:06:00,110 But for the department, I want to provide more information about the department. 80 00:06:00,140 --> 00:06:05,330 This is where I'm going to use nesting of table. 81 00:06:06,890 --> 00:06:15,410 Because for the department, we can have the manager with department and then the type of department 82 00:06:15,410 --> 00:06:22,640 or the total sales for the department and many other information as this is where we are going to use 83 00:06:22,640 --> 00:06:24,680 nesting of a table. 84 00:06:24,980 --> 00:06:28,400 So I'll provide table as that. 85 00:06:29,310 --> 00:06:30,180 Do you get it? 86 00:06:30,210 --> 00:06:30,720 Yes. 87 00:06:30,720 --> 00:06:33,290 So it is where we are next in the table. 88 00:06:33,300 --> 00:06:41,340 So the first row is going to be the table head for the department. 89 00:06:42,110 --> 00:06:49,100 And I'll provide table head and I will say department name. 90 00:06:50,580 --> 00:06:57,840 And after that I want to provide who is a manager for this department as manager. 91 00:06:58,960 --> 00:07:05,560 And the next one is going to be the sales for the department. 92 00:07:06,310 --> 00:07:09,580 I asked that before saving it. 93 00:07:09,610 --> 00:07:11,350 I made some mistake here. 94 00:07:11,380 --> 00:07:16,630 We need to put the table inside a table data. 95 00:07:16,810 --> 00:07:25,240 So let's select the table card and let's bring in the table data and paste that. 96 00:07:25,240 --> 00:07:33,010 So I'll bring the comment inside here, meaning that inside the table head for department. 97 00:07:33,010 --> 00:07:37,270 We have nested the table as that with this. 98 00:07:37,270 --> 00:07:38,660 Save it and let's have a look. 99 00:07:38,680 --> 00:07:44,200 As we can see, we have the department with a table. 100 00:07:44,200 --> 00:07:53,080 So here we can fill up the individual data and the department head, for example, the department name 101 00:07:53,080 --> 00:07:55,150 the manager and then the sales. 102 00:07:55,970 --> 00:07:56,630 All right. 103 00:07:56,630 --> 00:08:06,620 So inside the table data for the department, we are going to create one row for the actual data. 104 00:08:06,860 --> 00:08:13,760 So this one is the nested table head. 105 00:08:14,440 --> 00:08:19,090 And this one is going to be nested. 106 00:08:19,120 --> 00:08:20,860 Table Data. 107 00:08:22,670 --> 00:08:26,770 And let me use different comment here to differentiate. 108 00:08:26,780 --> 00:08:30,200 So it's going to be table row. 109 00:08:30,770 --> 00:08:43,730 And the department for this is going to be the table data and I would say sales department and the manager. 110 00:08:44,750 --> 00:08:46,640 I will say EMA. 111 00:08:47,780 --> 00:08:56,030 And the total sales for this department, I will say $2,000. 112 00:08:57,140 --> 00:08:59,720 Save it and let's have a look. 113 00:08:59,750 --> 00:09:05,750 As you can see for this table, we have the individual data as that. 114 00:09:05,750 --> 00:09:11,240 And I can provide more table data so I can copy this. 115 00:09:12,080 --> 00:09:26,480 And the next department I will say this one is I.t Department and the manager is this and total sales, 116 00:09:26,480 --> 00:09:28,970 is that all right? 117 00:09:28,970 --> 00:09:31,640 So this is the nested tables. 118 00:09:31,640 --> 00:09:39,260 When I collapse the table, you can see that this is table data and we have the nested table inside 119 00:09:39,260 --> 00:09:39,800 that. 120 00:09:40,100 --> 00:09:45,860 So we need to provide more data for the actual table. 121 00:09:45,890 --> 00:09:53,570 As it stands right now, we have one record for the table, which is the first row, and this is the 122 00:09:53,570 --> 00:09:54,830 first row. 123 00:09:54,830 --> 00:09:57,170 I want to add more data. 124 00:09:57,320 --> 00:10:02,810 So we are going to copy the table data, which is the table row. 125 00:10:02,810 --> 00:10:11,720 So I will select this and this one and paste that and I will change this one to let me change this one 126 00:10:11,720 --> 00:10:17,630 to table data one and table data two. 127 00:10:17,630 --> 00:10:28,160 And let me change the color of the comments that let me change the name of this one to Thomas and the 128 00:10:28,160 --> 00:10:37,310 H has 40 and male and for the nested we have the department name manager sales and. 129 00:10:38,140 --> 00:10:41,080 Let me provide a series of. 130 00:10:41,770 --> 00:10:44,260 For the second department. 131 00:10:44,260 --> 00:10:51,520 I want to provide a value of, let's say we department finance. 132 00:10:52,490 --> 00:10:53,720 Department. 133 00:10:53,750 --> 00:10:57,590 The manager is equal to 50. 134 00:10:58,530 --> 00:11:03,360 And the next record, I will say Security Department. 135 00:11:05,610 --> 00:11:07,510 And who is the manager? 136 00:11:07,530 --> 00:11:12,240 I will say the manager for the Security Department. 137 00:11:12,660 --> 00:11:15,540 Let me use Andy. 138 00:11:16,470 --> 00:11:17,920 All right, so let's see. 139 00:11:17,940 --> 00:11:18,530 Great. 140 00:11:18,540 --> 00:11:22,650 So this is how we can nest table together. 141 00:11:23,010 --> 00:11:26,490 As I stand right now, you can see that it looks clumsy, right? 142 00:11:26,490 --> 00:11:30,900 So in the next video, you're going to apply some CSS to make it more beautiful than this. 143 00:11:31,170 --> 00:11:33,030 Let's continue in the next video.