1 00:00:07,310 --> 00:00:16,280 This is where we lived in the previous video by explaining rows and columns when it comes to a HTML 2 00:00:16,280 --> 00:00:17,090 table. 3 00:00:17,600 --> 00:00:20,720 It's time for us to put them into practice. 4 00:00:20,720 --> 00:00:23,960 So let's get back to Visual Studio Code. 5 00:00:24,050 --> 00:00:30,500 And I'm going to create a new folder for this, and I'm going to name it as table. 6 00:00:31,430 --> 00:00:35,390 And I would like to rearrange this one in order. 7 00:00:35,390 --> 00:00:39,140 So I'm going to name this one as number one. 8 00:00:40,020 --> 00:00:44,340 And this one as number two. 9 00:00:46,620 --> 00:00:49,890 And the icons. 10 00:00:51,480 --> 00:00:53,220 As number three. 11 00:00:54,190 --> 00:01:03,490 And I want to put this one that is an inline block element into a folder and is going to be number four 12 00:01:03,490 --> 00:01:07,420 as inline versus block element. 13 00:01:10,600 --> 00:01:19,120 And I'm going to put it inside it as that and the table as five. 14 00:01:21,540 --> 00:01:22,020 All right. 15 00:01:22,020 --> 00:01:26,010 So let me rename this one well as element. 16 00:01:26,100 --> 00:01:27,000 Great. 17 00:01:27,000 --> 00:01:33,750 So in future, you can see the order, how you should go about it if you want to make some reference. 18 00:01:34,350 --> 00:01:43,230 So inside the table, let's create one a HTML and I can call it as index, but let me name it as table 19 00:01:43,230 --> 00:01:44,850 dot HTML. 20 00:01:45,650 --> 00:01:52,270 And let's use the image syntax and scaffold the HTML as that. 21 00:01:52,280 --> 00:01:54,830 And let me change this one to table. 22 00:01:55,370 --> 00:02:00,590 For the meantime, let me remove this once from here as we move on. 23 00:02:00,590 --> 00:02:06,020 And that is, if we get back to responsive design, we will dive in in greater details. 24 00:02:06,200 --> 00:02:12,710 And let me add a comment as table and let me use each one. 25 00:02:12,860 --> 00:02:17,630 And we are going to create a table for customers or students. 26 00:02:17,630 --> 00:02:20,570 So I'll call this one as customers. 27 00:02:21,260 --> 00:02:21,980 Table. 28 00:02:22,920 --> 00:02:23,430 All right. 29 00:02:23,430 --> 00:02:25,680 And let me underline it. 30 00:02:26,620 --> 00:02:28,030 Perfect at this point. 31 00:02:28,030 --> 00:02:31,780 We haven't created any table yet, but we are on our way. 32 00:02:32,110 --> 00:02:39,460 Let me open it and let me bring it here as the table. 33 00:02:39,760 --> 00:02:40,120 All right. 34 00:02:40,120 --> 00:02:41,740 So let's continue. 35 00:02:41,770 --> 00:02:44,170 How can we create a table? 36 00:02:44,170 --> 00:02:48,340 And we are going to use a tag called table. 37 00:02:48,950 --> 00:02:54,710 So let's explain What is the importance for this table tag? 38 00:02:55,360 --> 00:03:03,940 This is the overall container element for the table and it defines the start and then the end of a table. 39 00:03:03,940 --> 00:03:08,830 And this one contains all other elements that make up the table. 40 00:03:08,830 --> 00:03:17,770 So in short, this is a container that help us to create a table and remember that tables are made up 41 00:03:17,770 --> 00:03:20,100 of rows and columns. 42 00:03:20,110 --> 00:03:26,800 So from left to right are the rows, and from top to bottom is the column. 43 00:03:27,040 --> 00:03:33,130 And for this, we are going to add a title, for example, name, gender and age. 44 00:03:33,130 --> 00:03:36,490 So it means that we are going to create a row. 45 00:03:36,670 --> 00:03:47,830 So in here I will say first row or let me say row one and it goes like this to R for table row. 46 00:03:48,040 --> 00:03:51,880 And inside we are going to add the title. 47 00:03:51,880 --> 00:03:55,870 For example, the name Gender or H. 48 00:03:56,080 --> 00:04:02,200 So inside the first row, we are going to use what is called the table head. 49 00:04:02,290 --> 00:04:04,420 Let me explain one more time. 50 00:04:04,420 --> 00:04:06,550 The table row. 51 00:04:06,880 --> 00:04:12,460 The table row contains the cells that make up the row. 52 00:04:12,460 --> 00:04:18,700 And like I said, the cells are the actual content inside a specific row. 53 00:04:18,880 --> 00:04:21,430 What about the table head? 54 00:04:21,670 --> 00:04:26,380 The table head defines a table header cell. 55 00:04:26,560 --> 00:04:34,210 So let's say that for our customers, we want to keep track about the names, about the customers. 56 00:04:34,210 --> 00:04:44,050 So inside the table head, we are going to provide name and if you want to have a header of H, we are 57 00:04:44,050 --> 00:04:52,870 going to use table head as the H and I also want the gender. 58 00:04:52,870 --> 00:05:00,190 So it's going to be table head and gender with this one. 59 00:05:00,190 --> 00:05:03,010 Let's save it and let's see what we have. 60 00:05:03,010 --> 00:05:07,420 As you can see, these are the titles for our table. 61 00:05:07,420 --> 00:05:12,250 Without CSS, it looks like they are together, but they are not. 62 00:05:12,430 --> 00:05:18,520 Now that we have the table head, it is time for us to put some content under each. 63 00:05:18,730 --> 00:05:23,020 So it means that we are going to create second row. 64 00:05:23,140 --> 00:05:28,080 So our code is one as row for PTD. 65 00:05:28,420 --> 00:05:35,440 Now the table head is supposed to be t h instead and the row to. 66 00:05:36,560 --> 00:05:40,480 Is going to be the actual data. 67 00:05:40,490 --> 00:05:43,550 So it's going to be a stable, raw. 68 00:05:44,090 --> 00:05:50,030 And this time around we are going to use TD, which represent table data. 69 00:05:50,990 --> 00:05:55,130 So the first name, I'll call this one as John Smith. 70 00:05:57,490 --> 00:06:09,430 And the next data about John Smith is going to be the age, going to be table data and age has 26. 71 00:06:09,820 --> 00:06:16,630 And lastly, about the particular user is going to be the gender. 72 00:06:16,630 --> 00:06:18,970 And I will say male. 73 00:06:19,690 --> 00:06:27,430 As you can see under the name, we have John Smith, age of 26 and gender as male. 74 00:06:27,640 --> 00:06:34,960 One key point we need to bear in mind is that if you have three table heads, it means that we are going 75 00:06:34,960 --> 00:06:37,810 to use three table data. 76 00:06:37,840 --> 00:06:45,070 As you see here, we have three table heads, meaning that for the table data you're going to have three 77 00:06:45,070 --> 00:06:45,880 of them. 78 00:06:45,880 --> 00:06:48,010 So this is the first data. 79 00:06:48,010 --> 00:06:53,650 So let's say that I want to keep track about more users so I can even copy this one. 80 00:06:54,130 --> 00:07:01,780 And here I'm going to change the second user name to John Doe. 81 00:07:01,780 --> 00:07:12,160 I want to make it as DOE and the age is 27 and male and let me copy for that user. 82 00:07:12,160 --> 00:07:22,510 This one going to be third and then the fourth user, sorry, supposed to be this one is first and second 83 00:07:22,510 --> 00:07:24,610 and third. 84 00:07:24,610 --> 00:07:26,710 All right, so this am I right? 85 00:07:26,740 --> 00:07:36,010 I'm going to use gifting for the second user and the age is 30 and female. 86 00:07:37,460 --> 00:07:39,590 Let's save it and let's have a look. 87 00:07:39,620 --> 00:07:42,980 As you can see, we have three users. 88 00:07:43,250 --> 00:07:50,540 If you get back to JavaScript, we can use JavaScript to create this data dynamically, but for the 89 00:07:50,540 --> 00:07:53,060 meantime, we are doing it manually. 90 00:07:53,210 --> 00:08:00,000 And one thing is that, as you can see, the table doesn't look good because it lacks some styling. 91 00:08:00,020 --> 00:08:04,790 And since we haven't talked about CSS, that's how we are supposed to have it. 92 00:08:04,790 --> 00:08:11,060 By the next video we will play around with CSS by using what is called inline styling to style this 93 00:08:11,060 --> 00:08:13,970 table to make it more beautiful than this. 94 00:08:14,000 --> 00:08:16,040 Let's continue into next video.