1
00:00:00,940 --> 00:00:05,680
In the last lecture we explored how to create a basic table.

2
00:00:05,690 --> 00:00:14,190
Now we'll see how the table with behaves when one table is nested into another table so if a table is

3
00:00:14,190 --> 00:00:21,890
placed within another table it's referred to as a nested table the table containing the nested table

4
00:00:22,850 --> 00:00:24,350
is referred to as the parents.

5
00:00:24,340 --> 00:00:33,610
Table let's start by creating another table in our existing document that has one row in one column.

6
00:00:39,190 --> 00:00:44,440
We'll start with the Open Table tag and we'll set the width to one hundred percent to begin with.

7
00:00:50,860 --> 00:00:52,910
Will apply one pixel border

8
00:00:56,050 --> 00:01:19,930
and we'll set the border color to red so we can distinguish our parent table from the nested table.

9
00:01:20,350 --> 00:01:21,990
We'll close our Open Table tag

10
00:01:26,670 --> 00:01:43,190
and now we'll create our single row in the single column.

11
00:01:43,460 --> 00:01:53,900
So now that we have that table created we want to nest our original table into our newly created parent

12
00:01:53,900 --> 00:01:57,220
table so we have to do this very carefully.

13
00:01:57,220 --> 00:02:06,110
We need to copy this entire block of code from the closed table tag right up to the Open Table tag on

14
00:02:06,110 --> 00:02:08,660
our original table.

15
00:02:08,710 --> 00:02:20,160
We're going to right click and cut this block of code and paste it inside within the T.D. tags on our

16
00:02:20,160 --> 00:02:20,760
new table.

17
00:02:21,120 --> 00:02:22,320
So right click and paste

18
00:02:25,820 --> 00:02:30,980
and I'm just gonna do a little bit of formatting so it helps us stay organized

19
00:02:37,600 --> 00:02:39,930
just highlight all the table rows and columns.

20
00:02:41,710 --> 00:02:49,270
You can if you place your if you position your cursor here and hold this shift key and click at the

21
00:02:49,270 --> 00:02:54,910
end of the area you want to highlight it highlights the entire block of code and then you can just indent

22
00:02:54,950 --> 00:02:56,200
by using the tab key

23
00:03:11,580 --> 00:03:16,590
so that just helps us stay a little bit more organized before we go any further.

24
00:03:16,710 --> 00:03:32,460
Let's save our file and preview this in our browser and make sure that everything is working correctly.

25
00:03:32,560 --> 00:03:41,460
And so now we can see the parent table identified by the the red border and the nested table with the

26
00:03:41,460 --> 00:03:42,060
blue border

27
00:03:46,250 --> 00:03:56,900
So currently our parent table is 100 percent in our nested table is 500 pixels so for that reason the

28
00:03:56,900 --> 00:04:06,800
parent table is taking up the full with the content area of our browser and the nested table is a fixed

29
00:04:06,800 --> 00:04:10,950
value add five hundred pixels.

30
00:04:10,950 --> 00:04:19,240
Now let's try a couple of different scenarios to see what happens when we adjust the width of of the

31
00:04:19,240 --> 00:04:24,650
nested table relevant to the parent.

32
00:04:24,790 --> 00:04:31,850
So the first thing we'll do is we'll change the width of the nested table to 50 percent rather than

33
00:04:31,850 --> 00:04:32,870
500 pixels

34
00:04:36,400 --> 00:04:44,260
Now save your changes and refresh the browser window.

35
00:04:44,270 --> 00:04:52,340
Now we can see as we expand and contract the browser window our nested table is always occupying 50

36
00:04:52,340 --> 00:04:59,320
percent of the parent table.

37
00:04:59,400 --> 00:05:02,410
I'll change the the width of the parent table to 80 percent

38
00:05:08,180 --> 00:05:10,920
and press refresh.

39
00:05:10,920 --> 00:05:16,590
And now the parent table is 80 percent of the full of the content area of the browser window.

40
00:05:20,110 --> 00:05:29,400
And the nested table is 50 percent of the parent table so it's a little bit confusing but with a bit

41
00:05:29,400 --> 00:05:31,580
of practice you'll get the hang of it.

42
00:05:31,620 --> 00:05:40,570
You notice that as we expand and contract the browser window the nested table always stays at 50 percent

43
00:05:40,810 --> 00:05:42,340
of the parent tables with

44
00:05:46,800 --> 00:05:50,030
it this time will make the parent table six hundred pixels

45
00:05:52,940 --> 00:05:54,950
and the nested table 100 percent

46
00:06:03,840 --> 00:06:14,640
so this time the the parent table is a fixed six hundred pixels and the nested table is 100 percent

47
00:06:15,540 --> 00:06:19,440
of the six hundred pixels.

48
00:06:19,760 --> 00:06:24,590
So as you can see the width settings of the nested in parent table will affect the way the table is

49
00:06:24,590 --> 00:06:25,850
displayed in your browser.