Hi, today we're gonna
talk about tables and how you can use them to display
your data on your website. So, how I like to put it, is that we really used to consider
tables as being this evil kind of idea. Because people weren't using tables for
the reason they were supposed to. Instead, they were using tables
to kind of set things out, laying them out nicely on the screen. This started to happen back during
the time of HTML 2, maybe HTML 3.1. And people said,
I really want my page to look nice and I don't have a means to do it, so
I'm gonna make it a huge table and kind of lay everything out in
different rows or columns. This completely throws out the whole idea
of separation of content from layout. In addition, it makes it really confusing
for people who might be using assistive devices, because they're wondering,
is this really all a bunch of data, or is there content that should just be
kind of formatted in the regular way. So we're gonna start talking about tables. And what I really wanna do is stress
the idea that you should only be using tables if you have some sort
of data being displayed. Now before you even start
coding a single thing, I need you to sketch out your layout
of what your table should look like. Now, I've told my students this over and
over again, and they say yes, yes, and then they start to code. And then they say yes, yes,
and then they start to code. And, after about the fourth or
fifth time, they realize, oh, it's a lot easier to write clean code
the first time, than to fix broken code. And so, then they begin and
they think, alright, how many rows and columns do I actually need
to represent all of my data? And then you go a step further and
say, well are there any rows or columns where I actually need
to span multiple cells, or what we call the little
boxes in the table? Because if so, it's gonna be a lot easier
if I've drawn this out to figure out where I'm gonna need any special
attributes to make that happen. Because one of the most important things
to know when you're doing tables is that the browser's expecting there to be the
same number of cells on every single row. If you don't do that,
it's going to look very messy. Once you've decided what
your table should look like, then it's time to start
thinking about the tags. You start out with the table tag and it's
basically just a container element that's going to hold all the other attributes and
all the other tags inside of it. You're gonna have the table row and
then here for td, I have columns, but what I really think would be best is to
think of this as table cells, not really columns because what you're doing is
your talking about each individual box. So inside the table,
you're gonna have one or more table rows. And then inside each table row, you're
gonna have one or more TD elements, so the columns or the cells. So here's the code for
creating a very simple table. Although it looks very convoluted and like
there's a lot of things going on here. Most of this is just information for
the browser. When we look at the actual page that's
generated you will see that it's very clean and simple. So I have my code for my table on the outside and then each
one of my lines of code here is one row. I have my tr start and my tr end. And then inside each row I
have three elements, one, two, three which are inside the td tag. And I'm gonna tell you right now that when
I initially wrote this code It looked fine, but I kind of messed it up because
I'd forgotten to put in my ending tag. So make sure when you're coding these,
you're being very clean and concise. And if you do it correctly,
this will create a simple table, as I said, with nine elements in it. One, two, three, four, five,
six, seven, eight, nine. This is as simple as you can get,
as far as the table goes. Now in some cases you might want to add
what we call table headings to your code. Table headings is the idea that at the top
of each column, or even at the top or the start of each row, you have some sort
of text that is bold, that indicates this isn't data, this is actually the name
of the data that we're looking at. Now It's fine, I mean it's not fine, but
what some people would do is they would just make these regular TD elements and
perhaps make them bold. So the people that are looking
at it can say, oh hey look. This is bold so it must be more important. But we really want to avoid doing that. Instead of using a TD with
some sort of bold font, we want to use a semantic tag TH,
which stands for table heading. So here these three lines of code
are exactly the same as before, but I've added one new row,
where instead of td I have th. So I have row one,
row two, row three, etc. And what you can see here is that
what we get is this nice little table heading at the top of each one, that is
both visually lets the user know that these are headings, but also semantically
conveys that same information. So one of the things I mentioned earlier,
when you're designing your table is you wanna decide if you're
gonna be spanning multiple cells. It might be the case that the table
you wanna make isn't some sort of perfect tic tac toe grid,
or perfect nine by nine. So you can combine multiple rows and or multiple columns using the rowspan and
column span attributes. Inside your element you would include
rowspan equals two if you wanted to span two rows, or column span equals five if
you wanted to have it span five columns. Alright so let me go ahead and
show you an example with some code and again, I realize that if you're looking at
this on some tiny little screen that this seems really like a lot of
information to digest in. But it's not really that much going on. I have a simple table, where I have my
table headings with the Child's Name and then the Parent's Name. And then I go ahead and
I start putting in a child, and with each child, I include their parents. So here, I have rowspan equals two for
Catherine, which means I actually want my
Catherine cell to take up two lines. Same with the Edward cell. Maggie I've left completely alone. So let's just go and look at the end
result, and I think that's really if we backward chain, it's going to help
you understand what this code is doing. So again, I have the child's name and
the parent's name, and here are the two cells
where I did the row span. And you can see, it actually took up
Multiple rows because in this case, Catherine and Edward both had two parents
that we wanted to put it together with. Again, not a hard concept, but it is the
case that if you weren't thinking about it, and we went back to your code and
just started throwing rowspan and columnspan in, it just gets very messy and
harder to debug. One of the things you might have noticed, at the very top of the table,
I included a border attribute. The reason I did that is
because I think it's much easier to see this rowspan here because
I have the lines around each cell. So, you can use the border
attribute to go ahead and put lines inbetween
each one of your cells. And it's very common to do that. But, again, in your HTML,
I try to avoid styling. It's something we can add later if
you decide to learn more about CSS. But it's an attribute that's so
commonly used, I wanted to go ahead and put it in there so
you could see what was going on. Next, let's talk about captions. So, how do we link text
to a specific table? What people used to do is they would put
in some sort of heading, h2 or h3 and they would put it right above or
right below the table. So visually if you were looking at it,
you could kind of figure out, oh, this goes with the table. But again I really wanna push
you to use semantic tags. So instead of doing that,
you can go ahead and use the caption tag inside the table and it will help everyone know that oh this
caption goes with this specific table. So, let's go ahead and review. Number one, tables should only be used for
tabular data. Don't use it for layout. Two, draw your table before
you code your table. It's gonna save you so much heartache
in the end, I promise you that. Finally, and this is the third and most
important thing I hope you leave with, is that you need to check for
unclosed tags. One of the things that's great about
browsers when you're kind of developing locally, you're typing your code and
you're testing and looking at it, is that your browser can usually figure out what
you meant to do, even if you messed up. All right. And tables are a good example where
you can forget to close some tags, but your browser kind of
knows what you meant to do. But later if you decide to make a table,
and you're gonna upload it, and you really need to make sure that the data
in there is valid and represented well. One of the worst things you can
do is leave your tags unclosed. So make sure you validate your code, whenever you write a table or
really whenever you write any code. And you'll really be able to be sure that
you're writing the best code that you can.