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.