3.2 Tables - Video Tutorials & Practice Problems

<v Instructor>This is a good start to our tags page.</v> Let's start filling it in with a table of tags. Now, HTML tags divide broadly into two categories called inline and block. So an inline element is something like a link, or emphasis, or a code. And a block element is something like this header. By the way, one tag that you might not expect is actually inline is the image tag. We'll see some of the implications of that later in this tutorial. Because of these two categories, it's convenient to make two tables, one each for a block element and for an inline element. So let's start with block elements. So make a header. So we have an h1 up here. Let's put in an h2. In fact, just to scope it out... See how that's gonna look. And we have our block elements and our inline elements. Let's put this in. And now what we're gonna do is put in a table, so the HTML table tag. At the top of the table is an optional row, or table row, tr, of headers, which is the th tag, the table header. Now, I like to have these on the same line, so let's just type it out, rather than using the tag trigger. The table row, a header, just tag, then the name of the tag, the purpose of the tag. Now, this can be quite a challenge when you're just starting out with tables, because by its nature, the text is vertically organized. So we have this row, but then these tags are just going down vertically. But as we can see here, by refreshing, in fact, they're arranged horizontally here in the browser. So with a little experience, you'll be able to map this vertical orientation, the horizontal orientation. But it does take a little practice. After the first row, we're gonna add in the second row, going with the tr tag. That indicates some of the block elements we've encountered so far. Now, a block element is something that starts a new line. It's the kinda thing we saw before with the h1. I mentioned that that was a block element, so is the paragraph tag. So we've got h1 through h6, that's the solution to an exercise, and the paragraph tag. So let's start filling these in. The regular cells in the table, as opposed to the headers, are made using the td, or the table data tag. If I do a tab here, it will put a new line. So I actually, again, wanna do this, just type it out, keep it in the same line, just a little cleaner. But either way works. Now I'm gonna put in h1 through h6 using the code tag. And the right kind of dash for a numerical range is called an ndash. It's approximately the width of the letter N. This combination here is one way to represent an ndash. And then we need to close in td. Oops, that's just the same as the opening one, with the slash as usual. And we have to have the same number of td's, by default, as we have th's. So this is a header for the tag, for the name, for the purpose. So that's the tag, h1 through 6. These are headings. And then the purpose is to include a heading, levels one through six. See what that looks like. Here we go. h1 through 6, headings, with the name, include a heading, levels one through six. Now, you can see the spacing isn't great here, but this is just the default HTML table. Handling that kind of inter-cell spacing is one of the things you do with CSS, which isn't covered in this tutorial but is covered in the next one. Right, let's add some more block elements. This is good practice. Just type it in, tr, td. This is going to be a paragraph tag inside of code. Then you can see here, that's the nice typewriter style text. It's a monospaced font that looks like code. Let's see this here. There we go. Something weird with the vertical spacing here. Don't know why that happened, actually. Oh, yes, I do. Because I used the wrong closing tag here. Look at that. That's the sort of thing that a validator can catch. Let's watch this. So I can copy this. See, no p element in scope, but a p end tag seen. So that's a hint that there's a problem. And that's what happened here with this vertical spacing. So let's fix it. That's one of the disadvantages of typing in the tags by hand, is that you might forget the closing tag. Let's refresh. There it is. Now it's nicely lined up. All right, so this gives us the basic idea. You can see the pattern. There is a table row, and then table data cells, another table row, and then more table data cells. To save time, I'm gonna paste in some of the other ones. So here they are. Let's just copy them. We're definitely getting meta here as we see this code. Check it out. We've got table itself, so table, tr, th, td. We've got the table tag and the other tags, the other table-related tags, in the table, listed as block level elements. There's a footnote here, by the way. I just wanna... Here it is. Yeah, so technically, the td tag is more like an inline-block, which is, I don't even know what that is exactly. But for our purposes, that's not important. And there's a link here to the word "technically." This is one of my favorite xkcd scripts. It says, "Well, technically, food is a drug since it's a substance that alters how your body works. So yes, I'm..." And then the other character says, "Hey, look at that weird bug!" And the caption says, "My life improved when I realized I could just ignore any sentence that started with 'technically.'" And one of the things you might notice is that this sentence doesn't start with the word "technically." So here's the title text. "Technically, that sentence started with 'well,' so, 'Ooh, a rock with a fossil in it.'" So this use of the link to the xkcd script is an indication that you don't really have to know this distinction. And for our purposes, it's perfectly fine just to talk about td as a block element, because for our purposes, we can think of it that way. This is good practice to look at this here and then look back at this, and just make sure that you can do the mapping. So the pattern is, a table row, a table data cell, where the first one is in code, to make it look like code, and then the name of the tag and the description. The table for inline elements is similar, but because of the nature of being inline, we can include an actual example in our document. So let's take a look at what that means. I'm gonna copy this, copy these tags. And, instead of just name, tag, and purpose, we're gonna add two extra tags, two extra headings. We're gonna have example and the results. That's the first row. And let's put in an example of emphasized text. So td, the word "code," That's the em tag. And then we're going to say that this is the emphasized tag, that's the name. Put this, make emphasized text. And our example looks like this. I'm gonna make some code. And now, it's tempting to say this is our example, so technical sophistication, say. But let's take a look at the actual table in this case. We want an example, but we want it to actually display the em tag. What happened here is it instead emphasized the text, even though it was inside of a code tag. So it turns out, we can nest code and emphasis. But what we want here is not the emphasized version of the code. In fact, we can make clear what our purpose is by putting in this one. This is the result. Just gonna get rid of the code tag. I'll just copy that line. So this is the result. What we want here in the example column is the actual em tag. And the way to do that is to do what's called an escape out. We're going to escape out this less than angle bracket. And we're gonna use something similar to what we did up here. We saw the ndash. We're gonna do this, ampersand, lt, for less than, semicolon. Save that and take a look. So you can see now, this less than is escaped out. You know, it's interesting, actually, I didn't even realize that it escaped out the other one too. (chuckles) That is not the kind of behavior we should rely on, though. We should definitely escape out the greater than tag too, which is ampersand, gt, semicolon. And then we can do the same thing here. So if we do that, now, we've got, the example is the actual em tag, the text inside the content, and then the closing em tag, and then the result. Adding in the other inline elements that we covered so far is left as an exercise, but for completeness, I'm gonna show you the result right here. This is what the result should look like. One thing you might notice is that the source for the image is a bit.ly link. That's so that it fits here in terms of just the horizontal spacing. But this is just a link to my Gravatar image. If I could do this here... You can see, this is a 301 redirect, moved permanently. And this is just the URL for my Gravatar, with the size equal to 50, so that it fits, like this here. At this point, we've got a good start on our tables of block elements and inline elements. So let's make a commit and deploy it to our production website. Will this work, -am? It does not, because we added the text file in the image's directory with an image file. So if we do this first, then we can redo it. Again, putting the -a doesn't do any harm. That was quick. So let's take a look at this. I'm gonna refresh this, but nothing is going to change, right, because this is the index page. So remember, at the very beginning of this tutorial, I mentioned that the index page was the default page. That's why we don't have to put it here. It just says, in this case, mhartl.github.io/sample_website/ nothing. So index.html is the thing that gets served if you don't specific what you want to see. But in this case, this file is called tags.html. So let's put it in here. See if it works. And there it is. So this is now a table of HTML tags on the live web. This is interesting here. I'm actually getting a little notification in the browser. You can see, it says that there is a possible security problem. And I think it's because we have HTTP instead of HTTPS in some of these URLs. So let's take a look. We do have some of those. Let's take a look at how many. This will work. We can do that, HTTPS. And this one here will also work because it's learnenough.com. I don't know if this works. Let's see if the bit.ly link works. Oops, this is the code. Let's take a look at this. I'm gonna paste this in and see if it works. Yeah, that works, great. So let's make that change. Here I can just do -a because the file has already been added. And there we go. Now we've got the little lock, indicating that things are working properly. Let's go back here, though. It's kinda interesting that it didn't show up here. This lock works. So you know what? I bet it's just the bit.ly link. Let's take a look at this. Let's revert these. Getting real life development here. Yeah, so that was the problem. It's because we had the bit.ly link with the HTTP. And for some reason that isn't entirely clear to me, that was causing GitHub pages to send a message to the browser indicating that the site wasn't secure. It's probably because this goes through a redirect, but I'm not 100% sure. But in any case, our second page is now working, and we're ready to move on to add a third page to our sample website.