please remember that the complete
information for the class that you are
about to view is at Eli the computer guy
comm not only do we have our videos
there but we have parts lists diagrams
pictures and even complete code examples
so if you are watching this video and
you want more information please go to
Eli the computer guy comm welcome back
as you know I am Eli the computer guy
and in today's class I'm going to be
showing you how to format HTML tables
using CSS so in my introduction to HTML
series I showed you how to create tables
and basic HTML for syntax and I also
explained that in the old days used to
actually format the tables using HTML 4
but with HTML 5 and the rise of CSS now
everything has moved over to CSS so
basically you type out all the code in
order to create your tables within HTML
but in order to make those tables look
pretty you actually do all of that in
CSS and that's what I'm going to be
showing you how to do today
one of the things that I will tell you
is if you are interested in formatting
tables there are a lot of options out
there for you you're gonna find this and
a lot of these CSS classes I'm gonna say
I'm gonna explain a little bit here but
then there there is an entire world of
other things that you can do using CSS
and the same is true with tables it's
actually very interesting all of the
different things that you can do with
tables in order to make tables look
prettier so one of the things that you
should be thinking about is if you're
going to be creating tables for any kind
of user interface think about different
ways that the tables might be more
useful useful for your end user and then
see if there's something that you can do
within CSS to accomplish that so one of
the things I'm going to be showing you
today is you can actually hover over a
row and then the entire row can turn
into a specific color so think about
that if you're going to be printing out
tables for whatever reason from for some
type of system and if somebody can
simply hover over a row and then that
entire row becomes a color that might
make it easier for them to see all that
data in the
grow and be able to discern it from the
data in the other rows so it is very
important with all these classes and CSS
to remember that I'm just showing you a
little bit there is a lot more available
so if you're thinking huh I wonder if I
can do this you would be surprised in
modern CSS you probably can so with that
let's go over to the computer and I can
show you how to format your tables using
CSS so here we are back at my macbook
pro that I use as the demonstration
system again I'm using TextEdit all you
need for these simple coding projects is
an ASCII text editor so if you're on the
windows world you can use notepad again
in the Macworld you can use TextEdit if
you're in the Linux world you can use G
edit or vim or Nano so on and so forth
for this particular project today I
created two documents one is the HTML
document table dot HTML again you have
to save it as a either dot HTM or dot
HTML file and then the style sheet that
we're going to be referencing is simply
table style dot CSS first thing that
we're gonna do is we're gonna take a
look at the HTML document because it's
it's relatively simple this is one of
those times where more or less I simply
copy and pasted a couple of tables and
then I assign different classes to those
tables for those tables to look
different so for this again we open up
with the HTML tag we'd open up with the
head tag and then we're going to link
here to the table style dot CSS this is
the style sheet again here you just
simply put in the style sheet name if
it's in the same directory as the HTML
document if not make sure to put in the
full file path again we're gonna close
the head then we are going to close then
we're going to open the body here and
we're going to go down to the first
table so the first table here is this is
just a basic table again you will notice
there is no class here so this is this
is standard HTML for formatting you're
not gonna see anything I just want to
show you this as an example we have the
header row here so we have name we have
age and we have shirt size and then we
have a number of different essentially
users that will show up in this table so
we have Bob suit Tim Pat Frank twelve
eleven thirteen ten three fourteen
twenty
Larry small medium small
in large small so again when I write out
tables like this especially for for
projects I like to actually write these
rows out on a single line simply because
it's easy to line up with a header and
make sure that I'm typing everything
into the appropriate spot again prop
proper proper HTML syntax this this
should all probably be divided out into
their own separate groupings I simply
write this out because it's easier for
me to read and again when you're dealing
with H came out whitespace more or less
doesn't matter I then put a break in
here to separate these to these tables
and then we went down and again
basically a copy and paste so the exact
same table but this has a class of a
basic table so this is going to use a
class a basic table to format the same
table that we saw up there we're gonna
go down there's gonna be another break
we're gonna have the exact same table
again only this is going to be a class
of fancy table whole suit table this is
going to add some more features and
functionality for us then you're gonna
go down and you're gonna close the body
and you're gonna close the HTML so with
that let's go over take a look at the
CSS and we go here and we can see that
the CSS for this is relatively simple so
the first thing that we have is the
basic table class so again whenever
you're dealing with a class you start
with a period basic table and the first
thing is is we're we are going to be
assigning something to the entire basic
table class so anything within the basic
table class we're gonna be assigning a
property and for that we're going to do
border collapse
colon and then we're going to say
collapse so this is one of weird things
I want to weird things with tables and
CSS is when you're creating borders
around all of the different cells within
the table it will literally create
individual borders for every cell so
what that looks like at the end of the
day if you don't collapse the cells is
it actually looks like a double border
around all the cells because if every
cell has its own border then when you
visually look at it it looks like a
double border so by doing this the
border of the border - collapsed and
then say collapse what you're doing is
you're collapsing those double borders
into just one a single
I'll show you I'll show you how that
works but that's why we're doing that
here then we're going to go down here
and then we're going to do for the basic
table we're then going to assign the
class for the basic table with the table
header so the TA so basically anything
within a thi tag what we're going to say
is we want it to have a border that is
three pixels that is going to be dashed
and is going to be red so around all the
the table headers is going to have a
three pixel dashed border around it then
we're going to close that they were
going to go down here basic table and
then for the TD
so the normal cells that are in the
border we're going to then have a in the
table we're then gonna have a border
that is one pixel we're gonna make that
solid and we're gonna make that black so
with this if you did the previous class
where I showed you with different types
of borders around divisions this could
be dashed this could be dotted this it
could be solid this could be double
there's a number of different borders
you can put around the cells and the
headers you just plug that in so for
here we're doing one pixel solid black
then we're gonna go down we're gonna
take a look at the fancy table so again
the first thing that we do for fancy
table is everything within the fancy
table class we are going to collapse
that border again we don't want those
double borders then we're going to go
down now we're going to say for the
fancy table for the header for the th
comma so we're going to be assigning to
both of these both the th and the TD so
when you're gonna be doing this you have
to do dot fancy table for th comma and
dot fancy table for TD so those
basically all of these will be assigned
to both of those and then we're simply
going to say border one pixel solid
black and so basically what this means
is for the th and the TDS you'll just
have a black border around all of those
then we're going to go down and we're
going to do some interesting things
again just to show you some examples of
different things that you can do and so
for a fancy table for the th basically
for those header than for the for the
headers on the table we're going to do a
background - color and we're going to
make it pink so it's going to be
just that solid but one pixel solid
border but for the header everything is
going to have a pink background then
this is kind of cool this is kind of
cool so you then for the fancy table
then we're going to say TR so table row
say that's the entire row then you're
gonna do : so this all has to be
together a lot of times white space
doesn't matter this is one of those
times white space does matter so this
actually has to be together
if this isn't together it won't work
then you're going to say int - child so
basically this is going to say every
however many iterations so we're gonna
say even so basically for every even row
in this table we're gonna make the
background color and we're going to make
it Orange
so you can make this odd you can make
this three you can make this for you can
make this to basically so however many
rows or however many iterations for this
it will just simply be every even row
we're just gonna make the background
color orange then we're gonna come down
here again fancy table T our table row :
hover so again all of this is
essentially one word so basically when
you hover over a row then what's going
to happen is the background color is
then going to turn yellow right so the
the header the background color is going
to be pink the even rows the background
color is going to be orange and when you
hover over a line again this is the kind
of functionality that now is now built
into CSS then when you hover over a line
it can be yellow so with that let's go
oh let me actually pull this up so table
dot HTML double click on this and so
this is now what we're going to be
looking at so what we can see here is
this first table up here so this first
table is the HTML for table without any
type of formatting so this is the table
without any type of formatting then we
go down and we can see this is the basic
table that I created so again around
around the header the brown the th we
have dotted red border around that and
then around everything else we have the
the single the one pixel black line
all right so that's the basic then we
come down to the more complicated table
again we can see that the the top line
the top line the TD line or the th line
I'm sorry that has a pink background
then we can see here for the nth child
even you can see that those are orange
backgrounds and then when you can see it
when I hover over a particular line now
you can see when I'm hovering over that
line becomes yellow so again imagine if
this was a rather large table imagine if
you had I don't know 15 columns and then
you had a hundred records or something
like that simply being able to hover
over one of those rows might make it a
lot easier for your users to be able to
interpret what's going on so again with
these colors here I just made a pink
yellow and orange just to kind of be
garish so that you get the point but you
can make these colors whatever you want
again basic gray colors you know
whatever so this is the basic idea of
what you do with the tables now here
like with a basic table border collapse
let's say if I just simply got rid of
that so I can do file and I can do save
just to show you if you get rid of the
border collapse and then when I go here
and I do refresh see this is what you
get if you don't do the border collapse
again that's it's kind of like the weird
thing it's again that's a hard part with
coding the hard part with coding is that
it gives you exactly what you told it to
give you but that's probably not
necessarily what you mean right so when
you said do a border so it literally did
a border around every th and TD but then
visually that appears for most of it to
then appear to be a double border so by
then by doing this border - collapse and
then collapse for the entire class
that's what collapses it down so that
you basically see what you see only as a
single border so that's a basic idea of
formatting tables within CSS so that's a
basic idea of formatting tables within
CSS again there are a lot of different
options available for you I think the
cool thing is like when you hover over a
row you can actually have that turn into
a different color
again with it with that in - child you
can actually use that on other things
you can use that for 4p tags and for
other things and basically every so many
iterations it will change the background
or do something else do whether some
kind of modification I think that can be
a very useful thing but this gives you
an idea of how you can format the tables
again one of the big ones is a very very
very simple thing but it really can
throw a wrench in to what you're doing
if you're not really sure what's going
on is that whole border collapse
basically setting if you don't set the
border collapse to actually collapse the
borders you'll get those weird double
borders which again is technically what
you're asking the computer to do but
most likely it's not what you want the
computer to actually do so by doing the
border collapse you then collapse those
borders into a single border probably
more likely what you're expecting and
then you get a table that you're used to
so again with this there are a lot of
different properties there are a lot of
different values out there for you to
play with again think about what you
want your table to look like kind of
kind of get do but do a wireframe
actually draw out what you want your
table to look like then go to a little
bit of research see what properties are
available see what values are available
and then then you can actually type out
the code to turn your idea into an
actual website so as always I enjoy
doing this video and look forward to see
you in the next one if you like the
content that I create please think about
going to Uihlein the computer guy comm
and becoming a member or donating please
understand that all the educational
videos are in front of the paywall that
includes the videos that includes the
notes the diagrams and the code example
all of that is freely available and in
front of the paywall
but if you want to watch opinion videos
or if you want to be able to comment you
do need to become a member
membership is $5 a month or $60 a year
and gives you access to those opinion
videos and the ability to comment if you
don't want to become a member you just
want to give a one-time donation there
is also a donate button where you can do
that please understand in order to
provide the education that I am it does
cost money the servers cost money
equipment cost money travel costs money
all of these things cost a reasonable
amount of money and the fact of the
matter is is YouTube's advertising
program no longer supports creators of
the way that it used to so if you want
to these classes to continue to stick
around and you find them to be valuable
please think about either becoming a
monthly member or donating a few dollars
for this project