XHTML and CSS Tutorial - 26 - Styling Tables Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

alright guys welcome back to your 26th
CSS and XHTML tutorial and in this
tutorial we're gonna be styling some
tables it's gonna be nice so let's go
ahead and jump right into it so let's go
ahead and make a table let's go ahead
and make like two rows and three columns
nice and simple so table and of course
you need one of those so ending table
and let's just go ahead and make our
rows first typical row terr and a nice
little tear right there and let's just
go ahead and add our cells typical data
ending table data and what are we gonna
put in here I love Bucky and just go
ahead and copy this so it gives us three
columns so now we have a table with one
row and three columns in it so if we
wanted another row to be lazy just go
ahead and copy this and paste it right
underneath there so now if we save this
and take a look at it here is our table
right there if you highlight it you can
kind of see the rows and columns easier
so we have two columns I mean excuse me
two rows three columns looking pretty
good so what now we're looking at this
table and we already know how to add a
border but I mean border I mean come on
we can do a little bit better than that
so let's go ahead and style this up and
you know make it nice and fancy so let's
go ahead up in here up and here up in
here y'all gonna make me alright anyways
nothin me singing let's go ahead and
first of all we want to style the
overall table and whenever we do this
the entire table is gonna be affected so
later on well you'll see what happens
later on so let's go ahead and just give
this overall border we'll use that
shortcut so we don't have to define each
one individually you just make it like
three pixels um solid blue so let's go
ahead and save this refresh and see what
we got so now around the entire table we
have a border that's three pixels it's
and it's blue exactly what we expected
but now what if we want to do something
a little bit fancier what if we want to
say alright I want to change these rows
individually to uh I don't know with a
background of yellow or something and
then even furthermore I want to take
each individual cell and around each
individual cell I want to add a border
so we have six individual box looking
things well actually it is possible to
do that and see I says so let me go
ahead and show you guys um let me go
through and do that for you guys and
then I want to go over a few things so
let's go and for our table row what I
say background color yellow not yellow
yellow that's the old butter yellow you
there get it in certain phone
yeah that's pretty corny joke anyways so
now if we go ahead and save that check
it out refresh and now the entire row is
yellow and this rose yellow - I mean why
wouldn't it be so let's go ahead and
take that table data which is of course
the individual cells and what I say like
add a border so border equals two picks
umm not solid we are to use solid dashed
red so let's go ahead and save this in
refreshing and see what we get we get a
nice - pixel - red border across each
one of these cells and the thing I
wanted to mention is this even though we
have a style applied to each individual
piece of data and also a style applied
to each row whenever you apply a style
to the individual pieces of data it
doesn't override um the table row the
table row stays in the table data gets
inherited so by that I mean here's what
I'm trying to say whenever you make your
table row yellow
and then you make your table dad or
whatever you want it doesn't replace the
table RL since you did this
everything gets inherited down so
whatever you did the table gets affected
on the whole table whatever you did to
the table row gets affected in the table
row and the table data and whenever you
do to the table data effects only that's
helpful data I mean I probably just
confusing you guys even more by saying
all that but I mean if you just look at
what's going on you can understand how
it works in that it's not really
overwriting anything it's just adding to
it that's I guess a more simple
explanation so anyways
that is the basics of how you style a
table and check it out this is a lot
better than you know just adding a
border to the table now you can do stuff
like this and make your table a lot more
easier to read and just give you the
idea that you can in fact style tables
just like any other XHTML element so
anyways thank you guys for watching uh
go have fun styling your tables and when
you're ready I'll see you in the next
tutorial