1 00:00:07,160 --> 00:00:13,340 This is where we lived in a previous video by having basic HTML table. 2 00:00:13,700 --> 00:00:19,360 In this video we are going to style our table to make it more beautiful than this. 3 00:00:19,370 --> 00:00:22,310 Well, if I'm confused about CSS, don't worry. 4 00:00:22,310 --> 00:00:26,960 We will take our time to cover them in details and the CSS section. 5 00:00:26,960 --> 00:00:30,080 But for the meantime, let's play around with it. 6 00:00:30,290 --> 00:00:32,659 So how are we going to style it? 7 00:00:32,659 --> 00:00:40,880 And we are going to use a method called inline styling, meaning we are going to write CSS in line with 8 00:00:40,880 --> 00:00:42,620 a HTML code. 9 00:00:42,620 --> 00:00:51,230 So let's target the container that is a table and we can pass an additional attribute called style. 10 00:00:51,500 --> 00:00:57,860 And we are going to use key value per that is a property and a value for CSS. 11 00:00:58,040 --> 00:01:09,170 I want to increase the width of the table and I want to make use of 100% and I want to have some border 12 00:01:09,170 --> 00:01:17,450 around my table and I will use one piece of solid and the color hashtag c cc. 13 00:01:17,690 --> 00:01:20,870 And with this one, let's see the effect. 14 00:01:20,870 --> 00:01:25,640 As you can see this time around, it looks beautiful than before. 15 00:01:26,180 --> 00:01:33,410 The next one is I want to target the table head, which is this. 16 00:01:33,410 --> 00:01:37,070 I won't add some styling to the table head. 17 00:01:37,250 --> 00:01:44,390 So our add the inline attributes are style and the background color. 18 00:01:44,390 --> 00:01:51,260 For this I'm going to use hashtag F, zero, f00. 19 00:01:52,210 --> 00:01:53,980 And pardon. 20 00:01:54,870 --> 00:02:02,820 Often Pittsburgh's and the border of one posix solid. 21 00:02:04,120 --> 00:02:05,860 Hashtag seek. 22 00:02:06,070 --> 00:02:08,630 With this one, let's see the effect. 23 00:02:08,650 --> 00:02:13,050 Let's apply the same style to the rest of this heading. 24 00:02:13,060 --> 00:02:18,620 And when I save it, you can see that I have it been formatted as that. 25 00:02:18,640 --> 00:02:24,380 And I'm going to copy the same style and put it on the h I. 26 00:02:24,380 --> 00:02:26,350 We save it, something like that. 27 00:02:26,350 --> 00:02:28,660 And the same thing for the gender. 28 00:02:29,020 --> 00:02:31,540 And this is what we have. 29 00:02:31,540 --> 00:02:32,980 This is basic styling. 30 00:02:33,220 --> 00:02:33,700 Don't worry. 31 00:02:33,700 --> 00:02:37,660 Like I said, we're going to have dedicated section for CSS. 32 00:02:38,080 --> 00:02:45,460 The next one is going to be the table row for the table data itself, which is this. 33 00:02:45,580 --> 00:02:54,880 So I'm going to target the table data and I'm going to add the same attribute of style and have a pattern 34 00:02:54,880 --> 00:03:03,040 of ten pixels and border of one pixel solid. 35 00:03:04,050 --> 00:03:05,820 Hashtag seek. 36 00:03:06,360 --> 00:03:08,010 And that is it. 37 00:03:08,010 --> 00:03:08,900 So let's see. 38 00:03:08,910 --> 00:03:13,080 Yeah, we have border around eight as that. 39 00:03:13,770 --> 00:03:21,060 All right, so I'm going to copy the same CSS and apply it to the rest of these ones. 40 00:03:21,150 --> 00:03:23,250 I start and let's see. 41 00:03:23,700 --> 00:03:25,740 And we have it as that. 42 00:03:25,740 --> 00:03:30,330 And I want to apply to the rest of the table data. 43 00:03:31,260 --> 00:03:32,500 Like that. 44 00:03:32,520 --> 00:03:33,780 Like that. 45 00:03:34,020 --> 00:03:34,890 Don't worry. 46 00:03:34,890 --> 00:03:37,470 We are just playing around with CSIS. 47 00:03:38,180 --> 00:03:41,720 And you can change the color to suit your need. 48 00:03:42,410 --> 00:03:42,950 All right. 49 00:03:42,950 --> 00:03:45,490 I think this one looks beautiful than before. 50 00:03:45,500 --> 00:03:52,430 So that is how we can make use of inline styling to make our table look more beautiful than before. 51 00:03:52,730 --> 00:03:58,850 In the next video, I'm going to show you how we can create advanced HTML table. 52 00:03:58,880 --> 00:04:01,040 Let's continue into next video.