0 1 00:00:00,540 --> 00:00:00,890 All right. 1 2 00:00:00,890 --> 00:00:03,030 So how did that go? 2 3 00:00:03,030 --> 00:00:09,300 The first thing that we have to do is, of course, add our h3, and we're going to do that right above 3 4 00:00:09,300 --> 00:00:14,420 the horizontal rule which is here and below our table. 4 5 00:00:14,490 --> 00:00:24,030 So right here. And we're going to create something that's called skills and then we need to make a new table 5 6 00:00:24,960 --> 00:00:30,570 and this table is not going to have any headings because we don't have any headings over here. 6 7 00:00:31,020 --> 00:00:34,470 But it is going to have some rows and some columns. 7 8 00:00:34,470 --> 00:00:44,720 So let's make our first row using tr. And let's list our first skill inside a td, and let's say 8 9 00:00:44,790 --> 00:00:54,370 iOS development, and then we can put our stars in a second td that's going to be right next to our first 9 10 00:00:54,390 --> 00:01:02,320 td in our second column, and we're going to pull up the emoji inspector and we’re just going to add in a 10 11 00:01:02,320 --> 00:01:10,110 star which I'm going to copy which I'm going to copy and paste. 11 12 00:01:10,190 --> 00:01:13,870 And now to save time I'm just going to copy the row. 12 13 00:01:14,120 --> 00:01:19,250 Now whenever you are programming and you'll find yourself doing a lot of copy and pasting then you're 13 14 00:01:19,250 --> 00:01:21,860 probably doing something wrong. 14 15 00:01:22,130 --> 00:01:27,380 Now in order to save time you'll see me do it quite a lot and it's because it's not very fun for you 15 16 00:01:27,440 --> 00:01:34,820 to watch me writing tr and TD all day long, but when you're coding yourself ideally try to avoid copying 16 17 00:01:34,820 --> 00:01:40,460 and pasting and when you do always make sure that you understand what you're copy and pasting and also 17 18 00:01:40,460 --> 00:01:44,180 make sure you check for any bugs and errors that you introduce. 18 19 00:01:44,210 --> 00:01:47,040 So let's edit some of these things. 19 20 00:01:50,540 --> 00:01:51,070 All right. 20 21 00:01:51,140 --> 00:01:54,590 Let's hit save and let's check it out. 21 22 00:01:54,740 --> 00:01:55,460 Looks pretty neat. 22 23 00:01:55,460 --> 00:01:56,420 Right? 23 24 00:01:56,420 --> 00:01:56,710 All right. 24 25 00:01:56,720 --> 00:01:59,460 So now let's tackle bonus points. 25 26 00:01:59,540 --> 00:02:03,740 So if you’ve given it a go and you've managed do it then 26 27 00:02:03,770 --> 00:02:04,850 really well done. 27 28 00:02:04,910 --> 00:02:10,540 It takes a little bit of researching around and a little bit lateral thinking in order to get it working. 28 29 00:02:10,760 --> 00:02:17,180 But if you haven't or if you want to find out how one might do it then take a look now. 29 30 00:02:17,210 --> 00:02:22,850 So essentially what we're trying to achieve here is very similar to what we've done at the top. 30 31 00:02:22,850 --> 00:02:26,510 We're trying to affect the layout by using tables. 31 32 00:02:26,510 --> 00:02:36,380 So essentially what we want is a table that has two columns or two table data cells and in each cell 32 33 00:02:36,560 --> 00:02:42,160 we have a separate table which itself has two rows and two columns. 33 34 00:02:42,170 --> 00:02:46,850 So the solution is essentially going to be a nested table. 34 35 00:02:46,850 --> 00:02:53,600 So I'm going to make a little bit of space after the h3 and I'm going to create essentially the same 35 36 00:02:53,600 --> 00:02:55,450 structure as we've got up here. 36 37 00:02:55,580 --> 00:03:00,920 A new table that has a single row and two table data cells. 37 38 00:03:01,220 --> 00:03:03,520 This one and this one. 38 39 00:03:03,650 --> 00:03:10,600 So down here I'm going to create a brand new table and then I'm going to create a tr or table row and 39 40 00:03:10,660 --> 00:03:13,070 then I'm going to create two table cells. 40 41 00:03:15,530 --> 00:03:22,610 Now inside that first table data cell I'm going to place our existing table. 41 42 00:03:22,640 --> 00:03:28,520 So I'm going to cut it and then I'm going to paste it in here, and then I'm going to grab another copy 42 43 00:03:28,610 --> 00:03:37,100 of this table and then I'm going to paste it into the second table data cell of the first level table. 43 44 00:03:37,370 --> 00:03:39,590 So right over here. 44 45 00:03:40,040 --> 00:03:42,880 Now this structure is a little bit confusing. 45 46 00:03:42,920 --> 00:03:51,080 And this is one of the reasons why using HTML to affect the layout is not a great idea, but by doing 46 47 00:03:51,080 --> 00:03:56,630 this exercise you do get to grips with using tables, table rows, table data. 47 48 00:03:56,750 --> 00:04:02,000 And if you've managed to complete this challenge then you should understand the ins and outs of how 48 49 00:04:02,000 --> 00:04:04,870 to create tables using HTML. 49 50 00:04:04,910 --> 00:04:13,730 So now if we hit save and let's take a look at our work you can see that we've got a single table with 50 51 00:04:13,730 --> 00:04:20,550 two tables nested inside and we've managed to achieve this kind of structure. 51 52 00:04:20,570 --> 00:04:25,780 Now feel free to keep this layout or revert to the previous layout before the bonus challenge. 52 53 00:04:25,850 --> 00:04:27,200 It's completely up to you. 53 54 00:04:27,260 --> 00:04:30,930 Or even design it however you like with as many tables as you need. 54 55 00:04:30,980 --> 00:04:36,890 But I'm going to get rid of this nested table because it makes it really really complicated to see at 55 56 00:04:36,890 --> 00:04:38,460 a glance what's going on. 56 57 00:04:38,480 --> 00:04:45,680 So I'm going to remove this top level table and everything below this closing table tag I'm going to 57 58 00:04:45,680 --> 00:04:49,420 delete and I'm going to get rid of some of that space. 58 59 00:04:49,640 --> 00:04:55,660 And we're back at where we were before the challenge and I'll hit save to continue from here. 59 60 00:04:55,970 --> 00:05:02,000 Let's finish off by just giving our tables a little bit more spacing so that everything looks a little 60 61 00:05:02,000 --> 00:05:03,250 bit more spread out. 61 62 00:05:03,260 --> 00:05:08,990 So go ahead and add the cell spacing attribute to both of your tables and give it a value of say 10 62 63 00:05:08,990 --> 00:05:13,790 pixels. 63 64 00:05:13,810 --> 00:05:14,100 All right. 64 65 00:05:14,110 --> 00:05:15,160 So that's easy enough. 65 66 00:05:15,160 --> 00:05:16,580 We've done it before here. 66 67 00:05:16,660 --> 00:05:26,110 So we're going to add cell spacing equals 10 up here and also in this table as well. 67 68 00:05:26,170 --> 00:05:27,130 Let’s save. 68 69 00:05:27,280 --> 00:05:28,730 Let's check it out. 69 70 00:05:28,750 --> 00:05:29,650 Nice. 70 71 00:05:29,650 --> 00:05:30,650 Looks pretty good, right? 71 72 00:05:30,790 --> 00:05:34,380 And finally let's add a few more horizontal rules. 72 73 00:05:34,570 --> 00:05:38,110 So let's add one between books and teaching and work experience. 73 74 00:05:38,200 --> 00:05:41,170 And also one between work experience and skills. 74 75 00:05:45,350 --> 00:05:51,730 OK so let's find the end of books and teaching and that's at a horizontal rule here. 75 76 00:05:51,960 --> 00:05:59,490 Find the end of work experience and let's add a horizontal rule here. 76 77 00:05:59,780 --> 00:06:01,880 Save. Refresh. 77 78 00:06:02,120 --> 00:06:03,920 There we go. A bit more spacing. 78 79 00:06:03,950 --> 00:06:06,230 Everything looks a little bit more padded up. 79 80 00:06:06,260 --> 00:06:06,550 All right. 80 81 00:06:06,590 --> 00:06:09,340 So if any of that was confusing or difficult, 81 82 00:06:09,470 --> 00:06:16,100 make sure that you watch the video again and also have a read of the MDN web docs on not just tables 82 83 00:06:16,430 --> 00:06:25,760 but also thead or tbody or tfoot or td, ths etc. So you can have a look at the example code and see 83 84 00:06:25,760 --> 00:06:30,620 some other examples of how you can use tables and rows and cells. 84 85 00:06:30,620 --> 00:06:37,340 Now in the next lesson we're going to learn all about HTML forms and how you can add these to your 85 86 00:06:37,340 --> 00:06:40,970 web page to collect data from your users. 86 87 00:06:41,030 --> 00:06:42,940 So all of that and more. 87 88 00:06:43,010 --> 00:06:44,460 See you on the next lesson.