Join James Williamson for an in-depth discussion in this video Adding content to tables, part of HTML: Building Tables.
Tables are amazingly flexible in terms of what types of content they can hold. In fact, it's probably easier to list the things a table cell can't hold, rather than what it can. So, just to give you some idea, table cells can hold tags, paragraphs, headings ,divs, images, videos, and even more complex structures, like additional tables. So let's explore this as we add some content to our own table. Now, this time I'm working with the tables file from the 01_03 directory, but it's really just kinda picking up where we left off.
Now, currently, all we have in the table that we built in the last exercise is just some text in our cells. It's unformatted text, which means that browsers will format it based upon their default table cell formatting. Now, we can change that if we want. So, for example, I could highlight the first row of text right here, and I could wrap that in, say, a paragraph tag. Now, if I were to do this, and I'm gonna save my file, if I go back out to my browser and refresh the page, I can see that some things change here.
Now, what's changing is the formatting because I'm picking up the paragraph formatting styles from my CSS, because this is no longer just text inside of a table cell, it's a paragraph. So any time you put formatted content inside of a table cell, you have to recognize the fact that it's gonna inherit all of the styling, this default for that element or that you have in the styles for that element. Now, it's really hard for us to see the structure of our table right now. So I wanna change that. I'm gonna go back into my HTML.
I'm gonna find table, and I'm gonna give table an attribute. So inside the table tag, but after the word table, I wanna give it a border attribute of 1, and I'm gonna save this. Now, we're gonna talk more about these attributes in just a little bit. Right now, all you need to know is what this is gonna do is, if I go back into the browser and refresh the page, now we can kind of see the structure of the table a little bit better because has that sort of default HTML-looking border around all the table cells.
Okay, so again, we can see that the content in the first cell is formatted slightly different from the content of all the other cells. And again, that's because table cell number 1 contains a paragraph, and so it's being styled like a paragraph. So if we were to change it to something else, say a heading 2 ... I'm gonna make that an h2 and save the file. If I refresh the page, you can see it further updates the formatting. Now, one of the things that you're beginning to learn a little bit about tables right now is that the table itself and the cells will stretch to fit the content inside of it, based on how much space it needs, and the available space it has.
There are things that we can set, like, word wrap on it, to force it to a certain size, or we can set a specific width and height for table cells. But for the most part, your tables are gonna expand to fit the available space based upon the content they have inside of it. So to carry that concept forward a little bit, I'm gonna go back into my code and I'm just gonna copy the paragraph that's above the table. And then inside my cell number 2, I'm gonna paste it. Now, that's a lot of content. And if I save this, go back into the browser and refresh, you can see that now the table is much bigger, because it's having to stretch to fit the content in that space.
It's also wrapping the text based upon how much space is available to it. So tables are very adaptive. I hear, sometimes, people talk about, you know, tables aren't really responsive. Well, this is pretty responsive. The table is responding to the content that I put inside of it. Now, I could make this table, say, 80% the width of my body element and it would stretch accordingly, and it would change the table cells based upon the amount of space it has. You can see that for the heading, for example, it's breaking the heading because it won't all fit. It's wrapping this paragraph because it won't all fit.
And it's also breaking this text if it won't all fit. Now, the nice thing is, is that all three of these table cells have elements inside of it that can break. So, text can wrap, that sort of thing. But what happens when you have a table cell that has a fixed-width element inside of it? If I go back into my code, and I go inside table cell number 3, what happens if we put something like an image inside of it? So I'm gonna place an image tag, img, and I'm just gonna do a source attribute equal to inside my images folder.
I'm gonna find my first image, _images/ flower_150.jpg. And just to be nice, I'm gonna go ahead and give it an alt attribute. The alt attribute is gonna say "flower." So, as you can imagine, this image, based upon its title, is 150 by 150. If I save this file, go back into my browser and refresh, now you can see the table cell displays the image, and a little shifting has occurred, but nothing much. If I change that to the 400, which is 400 by 400, save that and refresh it, you can see that the table again changes quite dramatically.
So not only do the width of table cell elements stretch, the height will stretch, too, depending upon what it needs. And you'll notice what that's doing to the other table cells. Because the text is flexible and the image is not, the image is taking up all of the available space that it needs and it's giving off in other areas. So you have to be very careful when you're placing content inside of tables. You gotta make sure that you've got enough room for everything. So if I had, say, three images that took up more available space than I actually had, then my table would actually overflow its boundaries.
And that would be bad. So these are things that I always have to keep in mind as I'm placing content inside of table cells. I also don't necessarily need to format the content. In this case, I have a heading 2 and a paragraph. And honestly, unless there was a semantic reason for me to have a heading 2 and to have a paragraph inside my table cells, I shouldn't have them. If you're doing it just for stylistic purposes, that's not a good enough reason. We'll see later on in this course that we can style these elements any way that we want. We don't have to use HTML formatting to get the style that we need.
Okay. I wanna go back into my table. And we're gonna finish this up by replacing all this content that we just added. If you scroll down into your table, you can see that down below the HTML document, I have an HTML comment, and inside of that, I have some data for the table that we're working with. The first thing I'm gonna do is, for row 1, each one of these lines indicates the content of the cell. Now, depending upon which code editor you're using, your line breaks might not look this clean.
It might, say, show up all as one line, that sort of thing. It's formatting right for me right now. That doesn't mean it's gonna format right for you when you open it up. So, just in case it doesn't format the same way for you, what I've got is the row that I'm looking for, and then the individual things inside that row. For the one, it's Tag, Name and Description, and that's what goes in the table cells. So what I'm gonna do is copy this, copy Tag, gonna scroll back up, and again, in the first row, in the first table cell, I'm gonna replace everything that's inside that table cell, including the formatting, with the text that I just copied.
And I'm gonna do that for each one of those. Now, this process will take you a little bit of time. But since we're just copying and pasting, it shouldn't take that long. The only thing that you wanna be really careful about is that you're replacing the existing content, but you're making sure not to mess with the opening or closing table cell tags themselves. So, Tag, Name and Description. And there's our first row. And through the magic of video editing, I went ahead and finished up the table.
Now, as you're working on it, you probably realized, "Wait a minute. "I only had three rows to start off with, "but this one requires five rows." So hopefully, you went ahead and added those additional rows. If you didn't, that's what I wanted you to do there. Just go ahead and create two new rows and then place the information inside those, as well. And you can see the structure is exactly the same. Now, if I save this, and if you go out to the browser and preview this, you can see that what we're doing is, we're creating a simple table that contains the basic table tags and a little bit of an overview of them for our reference site here.
Okay, so keep in mind that, although you can have complex formatting inside of these table cells, you often won't need it. You really should avoid any unnecessary formatting within the tables, if possible, so that you remove as many barriers between your users and the data.
- Adding content to tables
- Defining table headers
- Styling borders
- Alternating table row colors
- Grouping table content
- Defining columns and headers
- Making table data accessible