Alright, in this video we're talking about HTML tables, talking about the table element, the caption element, a table row element and the table data element or per table cells. You have to be careful with tables. They do a great job of laying up data, they tend to be horizontally oriented. And in a world of responsive design where your website works both on a giant desktop and on a tiny watch your phone, being horizontally oriented can make it really hard for tables to show properly on in both contexts. So just be careful with them. And be sure to only put really things that you need in there.

Not really use tables for layout of actual page elements, but really only for actual data. Tables use many tags as you probably saw off the top of this video. First of all, we have the table element. Then there's also a table description, which is the caption, table row and then table data or cell. There's also table heading cell, which is th here's a table opening table tag. Then we have a caption, a table Oh zombies, then we have starting a table row.

Then we have a table data. First row, zombie one, table data two are first row zombie two, then we're closing the table row. So that is the first row of our table. Alright, and then we have our second row, second row, or zombie three second rows on before closing table row. And then we close the table in a little bit, we'll get into the code, and I'll show you what this actually looks like. All right, with headings, similar sort of thing we have opening table, we have our caption, started the table row, and then we're going to make the first row of the table headers.

So we have left column zombies. And right column zombies, closing of the table row. And then we have our second row which sir first row of actual data, table data first row zombie one, first row zombie to close the table row, close the table. Alright, let's look at that code and see what those actually look like. I did a little bit of CSS Just to make sure that things look right, I just collapsed the borders so that they didn't have spaces between them. And then I put a solid border around both the TDs and th s. Alright, so we have our table, a two just isn't anywhere the table is we have our opening table tag.

And we have our caption, which is what appears right here, we have our first table row. So we have our first element here. First row zombie one. Then we have our second table data, zombie two, right here. And then we have our second row. Here second row, and then we have second rows on B three.

Right here second row zombie three. Second row is on before second row zombie for closed, table row, close table. Now with headings to look just about the same except these th are table headings are going to by default show as bold. So we have opening table our caption. We have started the table row table header columns zombies, calm zombies. We have table right column zombies, right column zombies.

Oops, too far, right column zombies. Then we have our second row was our first row of data. So first row, zombie one and our second table data right here. So first Rosati to close the TR close the table. That's it for tables. Next, we're moving on to selections and some CSS goodness.