HTML Tutorial 13 - Nested Tables Video Lecture | HTML Basics- Create a designed webpage from Scratch - Software Development

hey everybody this is Brian and if
you've been following along this is our
thirteenth video in our HTML tutorial
today we are going to talk about putting
a table inside of a table now I'm not
going to really explain a lot of this
because it was covered in our last
tutorial if some of this looks
unfamiliar to you you should probably
you know flip back to a previous
tutorial and really learn about tables
okay so we have just a simple table
whoops
help if I turn these off we have just a
simple table and boy did I screw that up
there we go now we have a simple table
with one row we're going to add three
rows and we're going to add a header a
footer and a body save our work flip
over refresh you can see we now have a
header a body and a footer let's stylize
this a little bit say we want the header
to be 50 hi-bye and let's say a
background color of red
and we want our footer to have a
background color of gray come on Mouse
there we go and let's make this 20
pixels high save our work refresh now
you can see how we have a header a body
in a footer and this is typical of most
website styled like the logo up here or
maybe a menu bar and a body now let's
get to the heart of this tutorial why
would you put a table inside of a table
and the answer to that is actually
pretty simple tables are used for
positioning so let's say in our table we
want a row with two columns in it and
I'm just going to copy and paste this
now you notice I've indented this you
really don't need to intent it's just
the style choice when you get into more
professional web editors they'll do that
for you automatically
now you notice it just says left right
why is that well we haven't really done
anything to the width or the height of
this table so let's make this table 100%
width hundred-percent height and let's
actually turn the border on so we can
see what's going on now this will not be
100% the width and height of the page
but rather 100% of this cell well
refresh and I'll show you what I mean
here
there we go make see we have a left and
a right but you notice how they're just
kind of haphazard let's say we want this
left to take up most of the page and we
want to put an image over here we're
going to go ahead and do that
now if you've been watching our previous
tutorials you've noticed that I've used
a picture of Chuck Norris that we found
together and I don't want to get sued
and I don't want to get roundhoused in
the face so we're going to use a
different picture today
and I'm just adding some alignments here
we're going to put the picture on the
right side at the bottom let's save our
work and you can see now how our text is
now aligned to the top left are images
aligned to the bottom right we can put
as much text as we want and it'll stop
right at this border right here and
anything we put over here will stay in
this cell and we still have our header
footing excuse me our footer in our body
so that is why you would put a table
inside of a table I hope you found this
video and entertaining and you know as
always send me any questions or comments
you may have thank you for watching