Web Design Tutorials and Lesson: Using Images in Tables

Stay at Home and Learn

Web Design Tutorials

Computer Tutorials List

Images can be used in tables, either as the background image of the table, or in individual cells.

The web page in the link below shows an example of a table with a patterned background. Click the link to see what is meant.

Let's see how to create it. It's quite easy.

Start a new web page in your HTML Editor
Set the background colour or image to anything you like
Click OK
With the basic HTML code displayed, click in between the two BODY tags
From the menu bar, click on ADD > Add a Table
The Add a Table dialogue box appears
Set the Number of Rows to one, and the number of columns to one
Click the "Set Up Table" button
You can either just click OK at this stage, or add some Extra Table Tags, a Border and a Caption, perhaps
Your HTML Editor will now look like this:

Setting up the Table

You can delete the CellPadding and CellSpacing tags, if you want. Delete the Border tag as well, and you'd have this:

<TABLE>

Type a space after the "E" of table, and type BACKGROUND =

<TABLE BACKGROUND = >

From the menu bar, click on Insert > Image
The Insert Image dialogue box appears
Click on Insert a Background Image
The Open Image dialogue box appears
Locate the image you want to use as a background
Click Open, then click OK when you're returned to the Insert a Background Image dialogue box.
Your code will look like this:

<TABLE BACKGROUND = "background12.jpg">

You can have an image in a Table TD cell, rather than text. To insert an image into a cell with your HTML Editor, do this:

You can turn the image into a Link, if you want. Or just add a link instead of an image or text.

In the final part of HTML tables section, we'll explore nested tables.