XHTML and CSS Tutorial - 14 - Table width, cellpadding, and cellspacing Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

what's up guys welcome to your
fourteenth XHTML and CSS tutorial and in
this tutorial I want to talk to you guys
about table width but before I get
started I want to tell you guys that if
you're following along with my last
tutorial
you're noticed that I took out that big
title at the top that says odd people
because for this tutorial it will just
confuse you if you leave it in so go
ahead and take that out and make sure
that your table only has regular table
headers and table data in it so once you
have a basic table you can continue so
what I want to talk to you guys about
like I said is table width now by
default whenever you create a table it's
gonna adjust the width automatically to
however long the longest piece of data
is so this is the longest piece of data
so that is how long the column needs to
be and you see this column is shorter so
that's why this is that shorter so it
makes sense right but what if you say
alright the table would look a lot
better on my web page if it was just a
little bit wider well actually this is
possible with XHTML and it's really
simple to do you can adjust the width of
your table in two ways aside from border
table has another attribute called can
you guess it width there you go one
point for you and you can adjust the
width like I said in one of two ways
the first thing that you can do is just
write a number and whenever you write a
number in there it will adjust that many
pixels exactly so let's go ahead and
save this and refresh and check it out
and now adjusts the 500 pixels so now
your table is 500 pixels wide regardless
of how long the data is inside it so
that's pretty cool another way you can
adjust the width is to give it a
percentage and if you go ahead and give
it something like 100 percent it's going
to adjust to a hundred percent of the
width of your website so let's go ahead
and save this and check it out it now
takes up a hundred percent width so if
you go ahead and shrink this check it
out it's still taking up a hundred
percent no matter how small or how long
it goes
it changes dynamically based on how wide
your browser is so we're saying all
right I don't know how big their screens
gonna be but I know I want my table to
take up a hundred percent of the space
that is how you can use that a
percentage of you know instead of a
number what would just be pixels you can
use a percentage that's what I was
trying to say so that is how you can
adjust the width of your table and now I
want to talk to you guys about another
thing that you can add and let's go
ahead and get rid of this width because
it would just confuse you so let's go
ahead and keep the border and now I want
to talk to you guys about a concept
called cell padding and cell spacing so
let's go ahead and save this and refresh
it let's see there we go refresh until
we just got a normal table you might be
saying all right Bucky this table is
looking pretty dang good but
everything's just too clustered together
I need some space in between this text
and the border or I just kind of neat
things spaced out some more to make it
easier to read well that is also
possible with XHTML and you do that with
an attribute there's two different
attributes one's called cell padding and
once called cell spacing let's go ahead
and start with cell padding self padding
is the idea that it gives you space
between your text in this case and the
border so whatever content is inside in
this case the word cat people and the
border you can write an amount in there
and that's how many pixels it's going to
give you it's a space so let's go ahead
and make this ten pixels and check it
out you see how everything is kind of
tied up the text is kind of bumped up
against the border let's refresh it and
check it out
we now have some padding around the text
or the contents of your table and the
border so I mean that's what cell
padding is pretty much puts pads in your
cell maybe that's where they come up
with it who knows so now let's change
over to something called cell spacing
spell sit cell say Singh what I was
gonna say spell chasing I think what the
heck does that mean cell spacing
the idea that you have space between
yourselves themselves so instead of
having padding around your text you're
gonna be having space between your
individual cells so let's go ahead and
refresh this you hear that siren let's
see what's going on I'm probably just a
bank robbery or a homicide or something
no big deal I'm just gonna keep talking
so let's go ahead and i refresh this
yeah that's kind of annoying and it's
kind of distracting me so yeah it's
getting louder oh my god they're coming
right here anyways so now you can see
that cell spacing is a space between the
cells themselves the text is still
bumped up against the border but the
cells are separated from each other a
little bit kind of like giving yourself
a thicker thicker border so anyways
that's the difference between cell
padding and cell spacing a lot of people
get that confused but hopefully I
explained it so you guys understand what
it means and now you would know when to
use one and when to use the other so
between you know adjusting your border
your table width your cell padding in
your cell spacing and also with colspan
and stuff you can pretty much get any
type of table that you want so there is
basically the basics to tables so now
that you guys understand this you're
ready to move on to the next subject
what it is I don't know but anyways it's
gonna be awesome so anyways thank you
guys for watching I don't forget
subscribe don't forget to check out my
website and I will see you guys next
video