1 00:00:03,190 --> 00:00:10,420 In this lecture we're gonna be creating tables using HMO when it comes to building web pages. 2 00:00:10,440 --> 00:00:14,970 It's very important to have a solid understanding of table structures. 3 00:00:14,970 --> 00:00:22,400 Tables allow us to organize data and content in an organized way table data is structured in the form 4 00:00:22,400 --> 00:00:32,960 of rows and columns the intersection of a row with the column forms a table so the individual cells 5 00:00:33,170 --> 00:00:34,910 contain the actual data. 6 00:00:35,940 --> 00:00:40,140 Data can be in the form of text images or even video content 7 00:00:43,060 --> 00:00:50,590 this example illustrates the structure of a basic table used to record the findings of a survey that 8 00:00:50,590 --> 00:00:57,610 asked respondents to list their favorite sport. 9 00:00:57,630 --> 00:01:06,870 Here we have a table with two columns in nine rows which gives us 18 individual cells let's start off 10 00:01:06,870 --> 00:01:10,770 by creating this table in a standard HMO five document 11 00:01:14,880 --> 00:01:22,840 for this you'll need to open your text editor and we'll also need to set up the basic HDL page structure 12 00:01:23,260 --> 00:01:32,750 as we learned in earlier lessons. 13 00:01:43,020 --> 00:01:51,010 Once you have the basic HMO page structure created go ahead and save your file you were on your computer. 14 00:01:57,060 --> 00:02:00,410 Can Save the file as tables dot HDMI. 15 00:02:00,570 --> 00:02:03,720 Sure to put the HDMI extension at the end 16 00:02:17,790 --> 00:02:24,780 by now this should all look familiar and as you probably guessed the code block for our table will be 17 00:02:24,780 --> 00:02:28,570 inserted between the body the open and closed body type. 18 00:02:37,490 --> 00:02:41,720 We'll begin by adding Our t or our open enclose table tags 19 00:02:51,260 --> 00:02:54,050 the table tag also has several attributes. 20 00:02:54,110 --> 00:03:01,710 First we can specify the width of the table. 21 00:03:01,770 --> 00:03:04,140 For now we'll put the width as 100 percent 22 00:03:09,330 --> 00:03:10,950 will come back to the width attribute. 23 00:03:10,950 --> 00:03:16,080 Once we have our table created because there are different ways the width can be stated 24 00:03:20,340 --> 00:03:22,790 next we can set a border for our table. 25 00:03:22,920 --> 00:03:24,570 Let's set the border to one pixel 26 00:03:31,850 --> 00:03:34,900 and you can increase his value for a thicker border. 27 00:03:35,030 --> 00:03:41,470 Or you could put you can put zero or no border we can also put a border color attribute 28 00:03:46,320 --> 00:03:57,760 and we'll set that to blue. 29 00:03:57,790 --> 00:04:01,870 Next we can specify the cell spacing and Cell padding attributes 30 00:04:04,650 --> 00:04:12,380 this illustration provides a visual illustration of what each of these mean the Cell padding will define 31 00:04:12,380 --> 00:04:19,170 the amount of space around the cell contents the cell spacing on the other hand will determine the amount 32 00:04:19,170 --> 00:04:22,610 of space between each cell in your table 33 00:04:36,040 --> 00:04:41,470 and the unit of measurement for cell spacing in Cell padding is also a pixel 34 00:04:51,470 --> 00:04:53,110 once we've defined these attributes. 35 00:04:53,120 --> 00:05:02,250 We can start adding rows and columns each row is defined by an open and close t RTA for table row 36 00:05:09,960 --> 00:05:11,750 so I'll create one row to begin with 37 00:05:16,310 --> 00:05:23,310 and inside each row I can create any number of columns 38 00:05:25,920 --> 00:05:40,770 so our table had two columns and a column is represented by the open and close TDA. 39 00:05:41,160 --> 00:05:46,030 You can insert your content inside the open enclosed EDTA 40 00:05:48,870 --> 00:05:53,540 so the first part of our table was the headings 41 00:06:04,230 --> 00:06:07,070 so that's that's the that's what the first row would look like. 42 00:06:08,400 --> 00:06:09,720 I will insert the second row 43 00:06:23,460 --> 00:06:30,500 and again each row had two columns to enter some some data inside these columns 44 00:06:49,230 --> 00:06:49,940 made a mistake there. 45 00:06:53,980 --> 00:07:01,010 So remember the first column was the sport and we'll put the sport label in in each of the first columns 46 00:07:01,550 --> 00:07:04,280 and then the response in each of the second columns. 47 00:07:07,180 --> 00:07:08,690 I'm just copying and pasting 48 00:07:11,680 --> 00:07:14,760 them just changing the sport labels 49 00:07:18,290 --> 00:07:19,070 also the data 50 00:08:37,530 --> 00:08:38,230 and there it is. 51 00:08:38,240 --> 00:08:46,900 That's all the rows and columns for this particular table with the table created let's save this file 52 00:08:46,930 --> 00:08:49,490 and preview it in our web browser. 53 00:08:49,520 --> 00:08:50,640 See the final result. 54 00:09:01,710 --> 00:09:03,130 And that's what the table looks like 55 00:09:06,180 --> 00:09:12,190 one thing you may have noticed is the table is the full width of the browser's content area. 56 00:09:13,430 --> 00:09:21,810 And this is because we specified a table with 100 percent you'll notice that if we change the size of 57 00:09:21,810 --> 00:09:22,740 the browser window 58 00:09:37,930 --> 00:09:40,630 that the table expands and contracts 59 00:09:43,340 --> 00:09:48,180 and always maintains 100 percent of the browser window. 60 00:09:48,180 --> 00:09:56,060 Now let's see what would happen if I change the width to 50 percent so go go back to the source code 61 00:09:56,750 --> 00:09:58,520 just change the width to 50 percent 62 00:10:05,640 --> 00:10:08,840 and then refresh the page. 63 00:10:08,850 --> 00:10:17,460 Now we can see that the table always maintains 50 percent the browsers content area 64 00:10:21,700 --> 00:10:29,210 is what the percentage based with the table will always expand and contract to maintain that percentage 65 00:10:29,220 --> 00:10:33,670 the specified percentage of the browsers content area 66 00:10:37,670 --> 00:10:40,280 but what if we wanted the table to be a fixed with. 67 00:10:40,610 --> 00:10:48,030 So it doesn't expand or contract with the browser window for that we would need to change the with from 68 00:10:48,090 --> 00:10:58,480 a percentage to a fixed value so let's go ahead and change from 50 percent to 500. 69 00:10:58,500 --> 00:11:07,970 Now if you don't specify a percentage that converts the table with into a pixel based table with so 70 00:11:08,010 --> 00:11:15,900 500 pixels will be the new width of this table we're going to save the file and I'm just going to reload 71 00:11:15,900 --> 00:11:16,710 the web browser 72 00:11:20,150 --> 00:11:27,080 and now you'll notice that no matter how big or small the browser window is the table always stays at 73 00:11:27,080 --> 00:11:28,370 500 pixels.