In the last lecture we explored how to create a basic table.
Now we'll see how the table with behaves when one table is nested into another table so if a table is
placed within another table it's referred to as a nested table the table containing the nested table
is referred to as the parents.
Table let's start by creating another table in our existing document that has one row in one column.
We'll start with the Open Table tag and we'll set the width to one hundred percent to begin with.
Will apply one pixel border
and we'll set the border color to red so we can distinguish our parent table from the nested table.
We'll close our Open Table tag
and now we'll create our single row in the single column.
So now that we have that table created we want to nest our original table into our newly created parent
table so we have to do this very carefully.
We need to copy this entire block of code from the closed table tag right up to the Open Table tag on
our original table.
We're going to right click and cut this block of code and paste it inside within the T.D. tags on our
new table.
So right click and paste
and I'm just gonna do a little bit of formatting so it helps us stay organized
just highlight all the table rows and columns.
You can if you place your if you position your cursor here and hold this shift key and click at the
end of the area you want to highlight it highlights the entire block of code and then you can just indent
by using the tab key
so that just helps us stay a little bit more organized before we go any further.
Let's save our file and preview this in our browser and make sure that everything is working correctly.
And so now we can see the parent table identified by the the red border and the nested table with the
blue border
So currently our parent table is 100 percent in our nested table is 500 pixels so for that reason the
parent table is taking up the full with the content area of our browser and the nested table is a fixed
value add five hundred pixels.
Now let's try a couple of different scenarios to see what happens when we adjust the width of of the
nested table relevant to the parent.
So the first thing we'll do is we'll change the width of the nested table to 50 percent rather than
500 pixels
Now save your changes and refresh the browser window.
Now we can see as we expand and contract the browser window our nested table is always occupying 50
percent of the parent table.
I'll change the the width of the parent table to 80 percent
and press refresh.
And now the parent table is 80 percent of the full of the content area of the browser window.
And the nested table is 50 percent of the parent table so it's a little bit confusing but with a bit
of practice you'll get the hang of it.
You notice that as we expand and contract the browser window the nested table always stays at 50 percent
of the parent tables with
it this time will make the parent table six hundred pixels
and the nested table 100 percent
so this time the the parent table is a fixed six hundred pixels and the nested table is 100 percent
of the six hundred pixels.
So as you can see the width settings of the nested in parent table will affect the way the table is
displayed in your browser.