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

what's going on guys welcome back to
your 11th XHTML tutorial and in this
tutorial I think it's time to start
covering tables now what table is is
it's an easy way to organize information
on your website into rows and columns it
might make it easier to read easier to
view easier to navigate so if you're
familiar with Microsoft Excel at all
that's pretty much is program to make
tables it's the same concept is like a
spreadsheet so if you don't know what
table is or you never saw one before
then the easiest way to learn is just
the watch this tutorial and trust me by
the end of it you'll get it like that so
the first thing that we need to do in
order to create a table is to make our
table tags and yes the key word for this
is table and the ending tag table so our
entire table all of the information is
going to go in between these tags so as
I said before tables consist of rows and
columns now let's go ahead and make a
make a table with two rows in order to
do this we need the tag TR this stands
for a table row and also at an ending TR
in everything that goes in between the
opening and closing TR tag that's going
to be one row of the table so let's go
ahead and copy this and paste it and now
we have a table with two rows we don't
have any information in there but hey we
got a table with two rows it's a start
so remember earlier I said that tables
consist of rows and columns well in
order to make a column in your table go
ahead and add some space in between your
table rows so we have some room to work
and you might think that the key word
for this is TC but it's not it's
actually TD and I believe this stands
for table data why they didn't name it
column I don't know what would have made
a lot more sense but hey you know I
don't make the rules they do so anyways
TD and also an ending TD maybe it stands
for touchdown who know and anything you
put inside here is going to show up in
that column so let me go ahead and let
me go ahead and just copy this
so now our first table row has three
columns in it so if you copy this and
paste it right here so check it out we
have a table and it has one row and
another row right here and each of these
rows have three columns now if you save
this and refresh to right now we'd get
an empty screen even though we have a
table there if we don't have any data
inside then nothing is going to show up
because it's like a blank table so let's
go ahead and add some data um just right
you know whatever's on your mind let's
see what's on my mind today fish and
capital letters must I accidentally hit
caps lock arm apples let's see what else
tuna thing I must be hungry or something
let's see a tuba you know musical ham
chops and let's see corn with a question
mark like you know you're asking someone
a sentence or a question or something
who knows whatever six things are on
your mind throw in there so let's go
ahead and save this and see what we got
go ahead and refresh this and you can
see that our table now consists of the
two rows here is Row one and here's Row
two and each of these rows has three
columns one two three in the first one
one two three and the second one and if
you kind of highlight over it you can
kind of see the border which brings me
to another point um if you don't quite
understand yet trust me here's a little
attribute that you can add your table to
make it a lot more clear or a lot
clearer more clear or clear I don't know
what the correct term is many ways you
see how our table has no borders and the
edges are kind of hard to see well table
has an attribute called border and you
can set it equal to however thick you
want the border to be so let's go ahead
and just make it 1 pixel thick and save
it and check it out we now have a table
that's a whole lot easier to see that
yes it doesn't fat consists of two rows
with three columns in each row so yeah
that may be a little bit easier so from
now on I'm probably going to add that
tribute in the upcoming tutorials just
because it makes everything a lot more
clear so anyways that is your basics of
how to create a table how to create
individual rows and columns and in
theory you can have as many rows as you
want and also as many columns in each
row so um yeah that's it and another
thing I want to point out before I let
you guys go you see that all we did is
add text into these columns or table
data but you can add anything that you
would add in the body for example if I
wanted to add an image right here I
could add image if I wanted to add a
link or a paragraph or a header I could
do that
so anything that you could add in the
body of your website you can add in the
table data so that's how you create
tables I hope you enjoyed don't forget
to stick around for the next couple of
toriel's because we are not done with
tables yet there's a whole slew of thing
as the cover so thank you guys for
watching don't forget subscribe and I'll
see you guys later