[MUSIC] Welcome back to our continuing discussion of HTML. In this lesson we will talk a little bit about HTML tables and HTML comments. So, first let's look at HTML table there are many ways for us to format our data on an HTML page so that our users, or our customers, or whoever looks at our pages are able to see it most easily. And one of the most popular ways to do that is with a table. So here I have a file similar to our others based on our template. I've given it a title on line 11, or rather a heading on line 11. And now I have a table structure, which is new to us. If I click that in my editor it shows the closing tag, which is the closing table tag down here. And then this is a table very much like you would see a table if you were to draw one on paper or draw one on a blackboard, or if you're familiar with Excel, how an Excel spreadsheet might look, or how a table in a document editor might look. So to describe our table in HTML, we need to tell the browser where the rows will be. And this tr tag on line 14 and 16, this is the opening tag and this is the closing tag with a slash. This defines our table row, we have another table row, add another table row. And within each row we have these td tags and td stands for table data. So here we have one piece of table data, two, three table data elements in this row. What this is going to give us is a table with a row that has three boxes, or three cells in it. Now finally, this information in black in my editor, Day 1, Walking, 30 minutes. Those are all the data in our table. And we can just change these new information which shown in our table. So my file is saved and I am going to go to our Actually close this, we'll go to HTML4 and we'll see our table here. And there's in tabular form just as we saw it in the file here but it's a little plain looking. Now, we can change this quite a bit by modifying our table. One thing we can do is we talked about attributes in some previous lessons. We can give an attribute here for the border. And in this case it's border and 1 and the 1 here goes in quotes. So border="1", no spaces. We'll save this. Now I bet you can guess what will happen here when I refresh this page. And we see that we have borders. They may not be the borders we exactly expected. These borders look a little bit more like window panes. They're almost looking like raised borders. But we can modify those pretty easily. And there are almost endless ways to modify these. But let's try first, Making this 2 instead of 1. Go back or refresh, and notice that the borders got a little stronger with 2. So I preferred it 1, I'm going to go back to 1. But I would like a little bit more filled in. So I'm going to use something called an inline style. Now this is something we haven't seen before, but we will see it again later in the class. And so I'm going to type here border And then a "solid". Okay, so I am offering some style here for this table and it has a border. I'm saying I want the border to be solid. Now I didn't make this up. These styles for all kinds of HTML elements are predefined and there are a great many of them. So it's unlikely to meet someone who knows them all, most of us know a fair number of them and when we don't we look them up. So at this point, in your work with HTML and with styles, you won't know many, except for maybe this one, border solid. And you'll have to look them up more often, but as time goes by you'll learn them. At least the ones that you need to know. Now we're going to refresh this page. And notice that this looks much more solid at this point. And I actually prefer it this way. Now we can easily modify this table by taking this, Table row, the tr tag copying it, and I'm going to put it here, and maybe even another one there. And I'll say Day 4, make them different, and Day 5. And because I prefer resting to exercise, I am going to leave those as resting as well. And now when we save and refresh our table's going to change. So you can see how manipulating and adding to a table is straightforward. So to conclude our lesson today, I'm going to show you HTML comments. So HTML allows us to put in comments that are only for us as the developer. This is my exercise, table, So this which is in green in my browser is a comment. It starts with this less than sign and the exclamation point and a dash dash and then any text you'd like to type and another dash dash and a greater than sign. And this will be ignored by the browser but you can put any comments in here you like to help describe how your HTML is working. Maybe you are partway through the work and you want to make a note about what your plans will be this is how you do it. And when we go back to the page and refresh, notice that we don't see the comments. We'll only be here in the HTML for you as the developer.
