Smart Computing Article

Subscribe Today | Contact Us | Register Now

Home | Tech Support | Q&A Board | Article Search | Subscribe & Shop

HTML

Email This

Print This
View My Personal Library

Quick Studies February 2001 • Vol.12 Issue 2	Add To My Personal Library
HTML Creating Tables With Graphics And Text

• Online
• Intermediate

When it comes to creating Web pages with interesting layouts, tables are often the only way you'll be able to achieve the effects you are looking for. Tables let you place an image beside text on the screen so the effect will display consistently on most browsers.

This month we'll look at how you can use tables to create a layout using an L-shaped image and a small block of text. This design solution is a mix of smart graphics and HTML code and it will let you create a sophisticated looking page with a minimum of effort.

The image and page heading are created as a single image in your graphics software. This image is then cut into rectangular sections which are added to individual table cells. The entire effect is created using a single 2 x 2 table.

Creating The Image

We created our image in PaintShop Pro but any graphics software will do. To begin, we opened the photo to use as the graphic on our page and created an interesting border around it by erasing the edge of the image to give it a softer look.

The next step involved enlarging the canvas to provide room for the text that would form the page heading. The text was created using the text tools in the graphics software and we gave one part of the text a drop shadow. The text elements were positioned over the image to bind the two together.

The page image is created using graphics software, cut into pieces and then reassembled on the web page to create a sophisticated looking design.

Once the image was complete we cropped it to a neat rectangle so there was no excess space around the edges, although the bottom right corner was blank. It's always important to crop images to the smallest possible size. This keeps the size of the image file at a minimum and reduces the time it takes to download.

To prepare the image for incorporating into the table, we selected and cut a rectangle from it which extended the full width of the image from left to right and which included all the heading and part of the house itself. We pasted this cut section to create a new image, noted its size (624 x 122 pixels), and then saved it to a file called sfTop.jpg.

A second image was created to contain the remaining content from the left hand side of the original image – everything, in fact, except the white rectangle in the bottom right corner of the image. This image was 304 x 369 pixels in size and was saved to a file called sfSide.jpg. The remaining white portion of the image was discarded.

Creating The Table

To display this image, you'll need a table that is two columns wide by two rows high. The columns in the top row will be joined together to form one single column that is the full width of the table. The attribute that allows you to join the columns together is COLSPAN.

Compare these two HTML fragments; the first creates a 2 x 2 table and the second a 2 x 2 table with the first row containing only one column and the second row containing two columns:

<table Border=1>

<tr><td>Cell 1</td><td>Cell 2</td></tr>

<tr><td>Cell 3</td><td>Cell 4</td></tr>

</table>

<table border=1>

<tr><td colspan="2">Cell 1</td></tr>

<tr><td>Cell 3</td><td>Cell 4</td></tr>

</table>

You'll use the second code fragment as the basis of the page layout. All you'll need to add to it are the attributes that specify the size of the table cells so they match the size of the images you'll be placing inside them. The sizing must be accurate so that you don't get any unwanted spaces between the images.

You will also need to set the table's cellpadding and cellspacing attributes to zero so that there will be no additional spacing added inside the table.

Here is the final page containing the code to create the table with the images we've prepared:

<html>

<head>

<title>San Francisco's Painted Ladies</title>

</head>

<body>

<table border="0" width="624" cellpadding="0" cellspacing="0">

<tr><td colspan="2">

<img border="0" src="sfTop.jpg" width="624" height="122"></td></tr>

<tr><td valign="top">

<img border="0" src="sfSide.jpg" width="304" height="369"></td>

<td valign="top">

<p><font face="Verdana"color="#2E2B55">
San Francisco is famous for…</font></p>

</td></tr>

</table>

</body>

</html>

To finish, you'll save the page and place it and the images in the same directory on your Web server. When you open the page it will display as shown in the figure.

Now that you know how it's done, experiment with slicing images into small rectangles and using a table to assemble the pieces. You'll be amazed at the wonderful designs it's possible to achieve.

by Helen Bradley

Want more information about a topic you found of interest while reading this article? Type a word or phrase that identifies the topic and click "Search" to find relevant articles from within our editorial database.

Home Copyright & Legal Information Privacy Policy Site Map Contact Us