Images in Tables

Topics on This Page

Borders Around Images
Tables for Layout
Example

Until now, we've only been putting text in our tables. But the <td> (and <th>) tag can contain pretty much anything you like. You can include inline elements (text, inline tags such as <b>, and empty tags such as <img>), and you can include block elements — even other tables, as we'll see soon. This is what makes tables so useful for laying out web pages.

Borders Around Images

One use for tables is for drawing a border around an image. CSS can draw a much fancier border, but of course is not supported in as many browsers — and doesn't work at all well in Netscape 4.

You might think that you could draw a border around an image with the following code:

<table border="5" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <img src="..." width="..." height="..." alt="..." />
    </td>
  </tr>
</table>

As it turns out, that code would have worked beautifully in IE 3. The border would be right up against the image on all four sides. But in Netscape 3 and 4, this code leaves a gap between the border and the image on both the right side and bottom. And IE 4 took a step backwards: newer versions of IE also leave a gap when this code is used.

The trick is to make sure that the ending </td> tag butts right up against the > that closes the <img> tag. None of today's browsers mind a gap between the opening <td> tag and the <img> tag, but they don't like a gap between the end of the <img> tag and the </td> tag. Any of the following methods will work just fine:

    <td><img src="..." width="..." height="..." alt="..." /></td>

    <td>
      <img src="..." width="..." height="..." alt="..." /></td>

    <td>
      <img src="..." width="..." height="..."
      alt="..." /></td>

    <td>
      <img src="..." width="..." height="..." alt="..."
    /></td>

Here's an example:

<center>
<table border="5" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <img src="images/bird05.jpg" width="320" height="240" alt=""
    /></td>
  </tr>
</table>
</center>

Tables for Layout

You might use a table if you wanted to display several images side-by-side with captions underneath. This is frequently done, for example, for lining up several images used as navigation links. You'd normally have different images, of course, but I'll illustrate this with a single image.

<center>
<table border="0" cellpadding="10" cellspacing="0"
       bgcolor="#ffffcc" width="360">
  <tr align="center">
    <td><img src="images/Larry47.jpg" width="100" height="50" alt="" /></td>
    <td><img src="images/Larry47.jpg" width="100" height="50" alt="" /></td>
    <td><img src="images/Larry47.jpg" width="100" height="50" alt="" /></td>
  </tr>
  <tr align="center">
    <td> Caption for 1st image </td>
    <td> Caption for 2nd image </td>
    <td> Caption for 3rd image </td>
  </tr>
</table>
</center>

Caption for 1st image	Caption for 2nd image	Caption for 3rd image

Of course, you won't always want things laid out in such an organized arrangement. By using colspan and rowspan and by putting additional content in the cells with the images, you can obtain quite unusual effects.

When working with a complicated table, it's best to begin by specifying border="1": it's much easier to figure out what you're doing when you can see the borders. Then when you're happy with the arrangement, you can remove the border if you don't want it. Here's an example:

<center>
<table border="1" cellpadding="10" cellspacing="0" width="90%">
  <tr align="center">
    <td colspan="2" rowspan="2">
      <img src="images/Larry51.jpg" width="176" height="248" alt="" /></td>
    <td valign="top"> A bit of text </td>
    <td rowspan="2">
      <img src="images/Larry48.jpg" width="200" height="100" alt="" />
      <br />
      Maybe a little text here
    </td>
  </tr>
  <tr align="center">
    <td valign="bottom"> Some more text here </td>
  </tr>
  <tr align="center">
    <td> Some text </td>
    <td> Some text </td>
    <td> Some text </td>
    <td> Some text </td>
  </tr>
  <tr align="center">
    <td> Some text in this cell </td>
    <td colspan="2">
      <img src="images/Larry52.jpg" width="214" height="131" alt="" /></td>
    <td valign="bottom"> And a bit more text here </td>
  </tr>
</table>
</center>

		A bit of text	Maybe a little text here
		Some more text here
Some text	Some text	Some text	Some text
Some text in this cell			And a bit more text here

When designing a fairly complicated layout like this one, you'll probably play around quite a bit before you get the cells dimensioned the way you want them, and it's essential to be able to see the border and rules while you're tweaking them. Once you're happy with your layout, just change to border="0":

		A bit of text	Maybe a little text here
		Some more text here
Some text	Some text	Some text	Some text
Some text in this cell			And a bit more text here

Example

Try putting one or more images into the following table. Play around with colspan and rowspan and with align="left|right|center" and valign="top|middle|bottom" in various cells to see the types of formatting you can accomplish.

Here are some images you can use:

Try using a table to draw a border around the image that's displayed underneath the table. Try several different border sizes. Try cellspacing="0", and also try non-zero cellspacing values.