Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So, we've looked at how you present tabular data using tables, and now we're going to look at how you align visual elements using a table, how you assemble pieces of an image so it all looks like one image. This is a very common technique. I still prefer to do it with tables. I think it's easier, and I think it falls well within what tables were designed to do. So, this is how you align visual elements using tables. If you're interested in how to do this using CSS, I'm working on another course on CSS positioning, which you will also find on lynda.com, which will show how to do it that way.
In this case, we are doing this with tables, and this is how it's done. Here we have an XHTML document with a table, and this is the table. You'll notice it says border=0, cellspacing=0, cellpadding=0. Again, you can do this part with CSS, if you prefer, but the idea is that you want to turn off all of that spacing stuff that tables normally do, so that the images butt right up against each other and create one big image. So, here is the nine parts of the image. There is three rows, and each row has three cells, and there are all the images.
If we look at it on the browser, these are the nine images. If I just right-click on one of them and say View Image, you'll see that part of the image, and you'll see that that's part two of the image, and go back, and there we have the whole image. I'm going to go ahead and turn on the borders in the table, so that you can see that. I'll save here in the editor and go back to the browser and reload. Now we have the borders turned on, so you can see how the image is divided. You have nine parts of the image. This part here is entirely white, so is that.
But there are the nine parts of the image, and you'll see this was broken apart because it has parts that are animated GIFs. That makes it easier, so you don't have to animate the entire thing; you can animate just the parts of it. Anyway, that's how that's done. Now, you'll notice that this has bad version, and there is a reason for that. Let me go ahead and turn off the border. Again in the editor, it will save, and now I'll reload this in the browser. Actually, this browser no longer shows this problem. This is Firefox, and Firefox thinks it's smart enough to know what I mean instead of what I say.
So it's putting the image all close to each other, even though in the document, I've done it wrong and it's not supposed to show up that way. You'll see that the cutapart and the cutapart (bad version) both look the same. For some purposes, one could appreciate that. The problem is that it hides a problem which happens to show up in other browsers. So I have another browser here. This is the Internet Explorer browser. You'll notice in Internet Explorer that it actually shows gaps between the images. It used to show gaps vertically as well, and in this case it's only showing gaps horizontally.
Older versions of all the browsers used to show gaps in between the images as well. This is because there actually are gaps in between the images in the HTML. Let's take a look at the XHTML document again. You'll notice each of my table cells, TR for the rows, you have TDs for the individual data cells. Each of my cells has the TD above, the TD below, and the image in-between. So, what's wrong with this picture? Well, you'll see that there is space before the image, and there is another space because, remember that the browser considers a new line another space.
So we have, four, six, seven spaces or so here that are all getting folded into one space, because that's what the browser does. And here after the image as well, we have more spaces. If we want the images to be butted right up against each other, if we want the images to not have any space between them, then we need to not put any space in the source document in the XHTML. So, here is cutapart_good, and these are in your exercise files. You'll see how this is done. We have the TR, we have the rows. You'll see this all fits on one page really nicely, too.
It still looks very nice. We have the TD for the data cell, and there is no space at all around the image. There is the image, and it's right up against the TD and right up against the TD. Now, the way that tables work, this space here should be okay, because the browser isn't supposed to display that. That doesn't appear anywhere on the screen. The only content in a table that's actually supposed to appear on the screen is the content inside the data cells and inside the heading cells as well. So, the data cell--this is what you want--has got the image in it and nothing else whatsoever, no spaces.
So we have TD, TD, TD, all with those spaces, no spaces in this table at all. So if we look at the cutapart_good, in Internet Explorer, we'll see that it has no spaces at all. So, that's how that's done. So, this is how you take an image that's in pieces and you assemble it using tables. This is the correct way to do it. You have your table, border off, cellspacing off, cellpadding off and you simply put the images in your table data rows, and in your table data columns.
It all comes together really nicely. It looks nice in Internet Explorer, and it looks nice in Firefox as well. So that's how you assemble an image using tables.
Get unlimited access to all courses for just $25/month.Become a member