Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Tables in XHTML and HTML are useful for showing tabular data for associating data and for aligning visual elements on a page. And so we're going to look at some examples of some tables here and look at how tables work. In this first lesson in this chapter, we've this example table and you'll see that it starts there on the page, the table tag, and way down here in the lower part of the page, you'll see that it has the closed table tag. So the table tag is a container and it's a block-level element and it creates a table.
And so within the table you've different pieces of information. Here is the caption that says My Favorite Albums and so that associates with this here on the screen, and so your caption is useful for labeling the table as a whole. And then we've a table row and you see it says Artist, Title and Comment. So that's this row here. So tr is for table row and it's a container and it only exists within a table. It's not legal outside of the table. And th is a table heading element and that's for these cells within the table, right here.
Now a table is organized into rows and columns, so you see the rows going across and the columns going vertical and each of the individual places within each of these little cubbyholes within the table is called a table cell. And so a table cell is one item within a table. And so here we have a table cell and here we have a table cell and here we have a table cell and these were heading cells as they have the th tag and these are data cells here as they have the td tags. So th and td are container elements. You see the begin tag and the end tag.
And they are also block-level elements; they are only legal within a table row and they can have text content inside of them. So you can put text inside a td, you can put text inside a th, you cannot put text inside of tr and you cannot put text inside a table tag. Table tags can only have captions and rows and a table row can only have headers and td data elements. Notice here also on the tr that I've the valign=top attribute.
And what that does if I drag the browser here so that this text wraps. You see how the text wraps but the data remains at the top of the cell. And I like it this way. It helps me to see where the cells are, especially if I don't have the borders and we'll talk about borders in a moment. But if I take this out, you'll see that the default is for a middle alignment. So I can save that and reload here. You see that these cells, they are aligned to the middle and not to the top. I like them better at the top. It's you know personal kind of a choice.
The other options are middle, which is the default. I'll save that and reload and you see that Middle is what it does there, or you can say Bottom. And save that and reload. You can see that these are aligned to the bottom when they have room to align. And so I tend to make it top because I like the way that looks. I think that makes more sense to me. If it were up to me, and it's not, that would be the default. Go ahead and reload this page so that it's aligned at the top and there we go.
Now I've turned on the border in this so that you could see the table rows and columns and so this all makes a little bit more sense. Normally, the default's to off. So if I delete that then save it and reload, you'll see that there is no border by default. You can also say border="0". Put that in quotes because it's XHTML and save and reload and so you can see that's with border="0". You can also put in a different number and you get a bigger border.
So if I say border=3 and reload, you'll see we get big fat borders and with the drop shadows on them. You can see it will more evident if I say something like border=7. That should be pretty obvious. Go ahead and reload. So that's seeing the number of pixels and the size of the border and that's what it looks like there on the page. So border=1 is nice for being able to see the table organization there and so that's why I've done that. Normally, I would leave border=0.
Of course, this table is not very attractive the way that it is and if you want to make it attractive, you can use CSS to format it and in the next lesson, we'll talk about that. But this is the basics of how a table works and how you can use a table to present tabular information.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101301 Viewers
61 Video lessons · 88061 Viewers
71 Video lessons · 71913 Viewers
56 Video lessons · 103737 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.