Using Tables To Create Seamless Graphics

In this lesson, let us learn how to create seamless graphics using HTML tables.

Sometimes you have a really huge graphic as a header, and you really need to break it up. Or perhaps you have a header image graphic that incorporates some navigation. For instance, have you seen those cool tabbed browsing pages? Those are often not separate images at all, but built into a larger image.

You can literally create any graphic you want to perform any hyperlink function you wish – popout graphics of rooms in a house, expanded navigation menus from flower petals, or links based on a map. One way to do this is with an imagemap, which is a special function we’ll get into in a later tutorial.

But you can use tables to create graphic imagemaps that are relatively simple and based on a grid layout. Most of the time, the aforementioned tabbed navigation menus are tables. Here’s how to do it:

  1. Cut up your graphic in a graphical program. Make sure it’s chopped apart in a grid pattern, so that each element that needs a hyperlink is its own image. Let’s say you’re using a sample graphic that has one large top piece and four tabs that start in the middle of the page and extend to the right side. You’ll need to cut the image into six pieces: the large top piece, the left half of the bottom piece (because it does not link to anything else), and four separate images for the four tabs.
  2. Create a table. It should have one wide cell set to the width of the image in pixels. (Note: sometimes this causes problems and you’ll have to make it pixels plus one more pixel to keep it from wrapping.) That top cell should span five columns. In the second row, you’ll need five cells, each set to the width of its image in pixels. The table cellspacing should equal zero, and cellpadding should equal zero. In addition, table margin should equal zero.
  3. Insert, without spaces or any character, the image into the appropriate table cell. Inside the graphic tag of the tab images, you would insert the appropriate link.

When you look at this, you’ll see that your image seamlessly blends together with no spacing and no margins. It loads separately, but when it’s loaded it looks like a single image.

This technique is used to create those nice rounded corners on tables you may see online, like the ones at Realtor.com. See how those box corners have a neat rounding? The rounded pieces are images. The rest of the table is colored to match.

Another site with an interesting blend between images is at choicesbooks.com. Here, you’ll see the rainbow header graphic is blended with the left navigational sidebar – and then extending down the page, the rest of the rainbow is a page background.

Try This:

Download this graphic. Use your graphic program to flip it all four ways it needs to be flipped to form a corner. Now download this graphic, and flip it so that you have a horizontal and a vertical version of it.

Use the technique outlined above to create seamless graphics of a rainbow border for a table. Hint: while the top and bottom rows can use a fixed-width image, the left and right cells will need to use a cell background in order to create a cell image that will extend or contract depending on the amount of text in the center cell.