1 00:00:07,160 --> 00:00:14,000 This is where we lived in the previous video by playing around with advanced HTML table. 2 00:00:14,360 --> 00:00:21,590 In this video we are going to apply some few CSS to aid to make it more beautiful than this. 3 00:00:21,890 --> 00:00:22,250 All right. 4 00:00:22,250 --> 00:00:23,840 So let's continue on. 5 00:00:24,020 --> 00:00:31,450 So as we did for the basic HTML, we are going to apply this same concept of CSS to it. 6 00:00:31,460 --> 00:00:38,640 When we get to CSS, our life going to be pretty easier than copying the CSS from one element to another. 7 00:00:38,660 --> 00:00:46,220 We can target one element or tag and the CSS can be applied to the respective elements or tags. 8 00:00:46,250 --> 00:00:48,080 So let's continue. 9 00:00:48,410 --> 00:00:55,760 Let's start with the actual table and we are going to add the same property as we did for the basic 10 00:00:56,090 --> 00:01:01,220 style and give it a width of 100%. 11 00:01:01,730 --> 00:01:06,170 Then the border of one PC solid. 12 00:01:07,660 --> 00:01:13,030 Hashtag c cc that is a color and margin. 13 00:01:16,580 --> 00:01:21,830 Of 20 pills, works and zero pills. 14 00:01:21,920 --> 00:01:22,640 Don't worry. 15 00:01:22,640 --> 00:01:26,080 I will explain this one to you if you get back to CSIS. 16 00:01:26,090 --> 00:01:31,070 But the meantime, just bear with me and tie up as I do. 17 00:01:31,310 --> 00:01:32,840 So with this one. 18 00:01:32,840 --> 00:01:35,270 We have something like this. 19 00:01:35,510 --> 00:01:44,390 All right, Next is less style, the caption because I want to push the sales report here to the left 20 00:01:44,870 --> 00:01:55,310 and I'm going to tag it the caption by applying style and going to be text a line as that with this 21 00:01:55,310 --> 00:01:55,670 one. 22 00:01:55,670 --> 00:01:56,390 Let's see. 23 00:01:56,390 --> 00:02:01,940 Indeed it is at the left and I want to increase the boldness. 24 00:02:02,090 --> 00:02:11,570 So I'm going to use font weight as font weight and I will use bold or bolder. 25 00:02:12,350 --> 00:02:13,420 Yeah. 26 00:02:13,430 --> 00:02:15,260 This what we have. 27 00:02:15,530 --> 00:02:19,310 And after that, I want to have some margin bottle. 28 00:02:19,310 --> 00:02:20,390 So. 29 00:02:21,940 --> 00:02:27,730 As margin bottom, and I'm going to use ten Pacers. 30 00:02:28,890 --> 00:02:30,060 Oh, great. 31 00:02:30,210 --> 00:02:32,280 Next is less time. 32 00:02:32,640 --> 00:02:37,560 The column itself safe and I want to increase the column of it. 33 00:02:37,560 --> 00:02:44,850 So I'm going to provide style and weight of 100%. 34 00:02:47,290 --> 00:02:49,720 All right, so let's see. 35 00:02:50,770 --> 00:02:51,940 Supposed to be this? 36 00:02:54,410 --> 00:02:55,430 As you can see. 37 00:02:55,430 --> 00:02:59,660 How is being moving the other element as that. 38 00:02:59,990 --> 00:03:05,660 And I'm going to I think if I give it as 20%, that one would be fine. 39 00:03:06,910 --> 00:03:07,750 Yeah. 40 00:03:08,350 --> 00:03:16,180 And I'm going to copy and paste it here and change this 1 to 30. 41 00:03:18,980 --> 00:03:23,900 I that and next one is change this one to. 42 00:03:25,040 --> 00:03:26,360 25. 43 00:03:29,330 --> 00:03:37,340 And lastly, which is this that is also has 25. 44 00:03:38,170 --> 00:03:46,480 As you can see, this one controls how the individual cells are being arraigned and that. 45 00:03:46,900 --> 00:03:47,320 All right. 46 00:03:47,320 --> 00:03:51,210 So let's target the table row. 47 00:03:51,220 --> 00:03:55,270 So inside a table, head less target that. 48 00:03:55,270 --> 00:04:06,940 So I'm going to target the table row and add style of background color of hashtag F, zero, zero, 49 00:04:06,940 --> 00:04:07,870 F zero. 50 00:04:08,470 --> 00:04:10,240 And save it. 51 00:04:10,240 --> 00:04:11,380 And let's have a look. 52 00:04:11,410 --> 00:04:11,910 Yeah. 53 00:04:11,920 --> 00:04:16,209 As you can see this what we have, right? 54 00:04:16,480 --> 00:04:21,829 The next is I want to target the individual table head. 55 00:04:21,850 --> 00:04:29,440 And for this, we can pass in a couple of attributes, but let's use the style attribute and provide 56 00:04:29,440 --> 00:04:38,020 padding of ten pixels and then the border of one page solid. 57 00:04:41,140 --> 00:04:46,990 Hashtag CC, save it and let's have a look. 58 00:04:46,990 --> 00:04:49,650 And this is what we have. 59 00:04:49,660 --> 00:04:50,620 Great. 60 00:04:50,740 --> 00:04:54,910 Next is I want to add text align. 61 00:04:56,310 --> 00:05:02,460 And is going to be text a line to the left. 62 00:05:05,090 --> 00:05:10,850 As you can see, I have pushed this one to the left, or I can pull it to the right or to the center. 63 00:05:10,880 --> 00:05:12,590 The choice is mine. 64 00:05:12,950 --> 00:05:21,170 So I'm going to copy the same thing and put it on the rest of the table head. 65 00:05:21,200 --> 00:05:27,920 As you can see how we are moving the CSW around, it's making our code not readable. 66 00:05:27,950 --> 00:05:31,370 If you get to CSA, we can improve this. 67 00:05:31,400 --> 00:05:31,890 Yes. 68 00:05:31,910 --> 00:05:36,050 But for the meantime, let's maintain it as it is. 69 00:05:36,350 --> 00:05:43,850 The next one is going to be the table body and let's target the table data. 70 00:05:44,180 --> 00:05:51,590 And as we did before, it's going to be style and give it padding of ten pixels. 71 00:05:52,470 --> 00:05:59,430 And border as before, one pays a solid high tax sec. 72 00:06:00,030 --> 00:06:01,380 And that is it. 73 00:06:01,380 --> 00:06:02,910 So let me copy this. 74 00:06:04,820 --> 00:06:08,900 And paste it to the respective data. 75 00:06:10,700 --> 00:06:11,600 All right. 76 00:06:11,600 --> 00:06:14,840 And I can go ahead and do for the rest. 77 00:06:30,210 --> 00:06:30,990 Save it. 78 00:06:30,990 --> 00:06:32,540 And let's have a look. 79 00:06:32,550 --> 00:06:35,100 And this is how it looks like. 80 00:06:35,100 --> 00:06:39,570 Let's target the total sales and add some specifics. 81 00:06:39,570 --> 00:06:40,020 Yes. 82 00:06:40,020 --> 00:06:40,620 To it. 83 00:06:40,950 --> 00:06:53,280 So over here, I'm going to add the same CSS, but instead I want to increase the font size and I'm 84 00:06:53,280 --> 00:06:55,860 going to make keys of 36. 85 00:06:55,860 --> 00:06:56,850 Save it. 86 00:06:57,150 --> 00:06:59,460 And this is the effects. 87 00:06:59,460 --> 00:07:00,750 I like that. 88 00:07:00,930 --> 00:07:05,070 So let me copy the same font size to this one. 89 00:07:05,340 --> 00:07:12,360 And let me also add the color and let me see blue. 90 00:07:15,090 --> 00:07:16,260 All right, so let's see. 91 00:07:16,570 --> 00:07:17,420 Oh, good. 92 00:07:17,430 --> 00:07:19,850 Or you can make it gray or black. 93 00:07:19,860 --> 00:07:20,920 The choice is yours. 94 00:07:20,940 --> 00:07:22,620 I think black is okay. 95 00:07:22,920 --> 00:07:27,570 And let me increase the weight of the font. 96 00:07:28,080 --> 00:07:31,590 So it's going to be font weight. 97 00:07:32,020 --> 00:07:33,600 As boulder. 98 00:07:35,820 --> 00:07:36,570 Good. 99 00:07:36,570 --> 00:07:37,710 Likewise this. 100 00:07:37,770 --> 00:07:40,890 Let me add the same CSIS to the. 101 00:07:41,830 --> 00:07:42,820 Sales. 102 00:07:44,250 --> 00:07:44,820 Okay. 103 00:07:45,390 --> 00:07:45,900 All right. 104 00:07:45,900 --> 00:07:49,850 This is the end of the advance HTML table. 105 00:07:49,860 --> 00:07:51,800 If you are confused, don't worry. 106 00:07:51,810 --> 00:07:56,010 Ask questions and play around with it, and everything will be all right. 107 00:07:56,220 --> 00:08:02,970 Let's continue in the next video by talking about how we can test eight more tables together.