XHTML and CSS Tutorial - 13 - colspan & Annoying People Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

alright guys welcome to your 13th XHTML
and CSS tutorial in this tutorial we're
gonna be covering something called a
colspan now whenever you make a table
you don't always want to make a perfect
grid you don't always want the same
number of columns on every row 3 3 3 3
it gets boring and it's just not useful
so maybe you want to make a table that
has one column at the top in two columns
in the middle and maybe five columns at
the end so maybe you want to change it
up a bit but from what we know so far we
don't know how to do that well this
tutorial is going to show you how so for
example well let me do this first let's
go ahead and create a table so we have
something to work with and let's go
ahead and make it four rows press tab
table row table row so let's copy this
and the easy fingers take it easy there
so now we have a table with four rows in
it and might as well add our little
border attribute so we don't get
confused now in our first row let's go
ahead and add that main title across the
top so let's say for the rest of this
table in these rows let's go ahead and
make it simple and only add two columns
but for this first one we want a title
big and centered and we want it to span
across two columns so there's only gonna
be one piece of data in here but it's
gonna cover two columns worth of
information so let's go ahead and make a
table header because you know those are
the pieces of data that stand out and
let's go ahead and make a table about
odd people and for our table header
first and foremost we need to introduce
that attribute called Co LS PA N and set
this equal to 2 now colspan stands for
column span and it says how many columns
do you want to span this piece of data
across well we wanted to take up two
columns so that's how you do that make
Col span equal 2 and actually one other
thing we can do while we're here is we
can go ahead and make this a header
three that will
make it a little bigger and bold as well
so odd people is gonna be spanning
across two columns it's gonna be bolded
and centered so now in our second row
let's go ahead and add some data
actually let's go ahead and add two more
headers and we just go ahead and copy
this so the first column is gonna be the
type of people I find odd and the second
column is gonna be the reason I find
them odd so in our third row let's go
ahead and start populating the table
with some data so TD TB and let's go
ahead and copy this because I am a way
too lazy to type all that again and
paste it so the first type of people
that I find out are cat people and the
reason I find them on let's just write
on something like seven cats is just too
many because seriously people anything
over like three then you're you're kind
of pushing the limit there so just take
it easy back off you don't need that
many cats trust me they want the
attention not company so let's go ahead
and copy this right here and in our last
row paste this and let's find another
type of people um let me think aloud
people I find them odd and the reason I
offend them odd is because let's put
sure turn that music up
it's only 3 a.m. and make sure you spell
music wrong and it looks good so we are
good to go cuz you know at 3 a.m. really
do you need to be blaring your music as
loud as you possibly can that's just
annoying so anyways go ahead and save
this and see what we got
refresh it and check it out the main odd
people you can see that this table
basically consists of two columns one
two but this main one right here we told
to colspan
to if you remember right there so what
this did is it took this piece of data
and expand it across two columns one
column and two column and the rest of
this was just stuff we learned before
the table headers type in reason that's
why they are bolded and centered and the
table data which is this regular dumb
old data is just plain old text left
justified see this is pushed to the left
everything's pushed to the left so that
is how you make you know this is a
pretty organized looking table it's a
lot easier to read then you know if you
didn't use colspan
or didn't bold anything so anyways
that's a useful table so if you ever are
wondering hey I wonder what type of
people Bucky finds odd you can go back
to this and use it as a reference so
anyways thank you guys for watching
don't forget to subscribe and I will see
you guys later