Placing Text On Top of An Image
Introduction
Below in the next section you will see a table with three columns with some text and an image (ape). This is simply done by creating a single table with one row and three table cells. I have added a little cellpadding and cell alignment to the sample table to give the proper spacing to the cell contents.
You will probably will want to use the vertical alignment of valign="top" to bring the cell contents up to the top of the cell and align="left" to keep the contents over to the left side of the cell. Also adding cellpadding keeps the cell contents away from the cell walls giving you the proper spacing.
Notes: * The sample table code below uses pixel values for the table and cell widths, you can also use percentage (%) for widths in place of these pixel values.
** MSNTV users remember the width of your browser is 544 pixels . Use that pixel width or a width of 100% to have your table go the full width of your viewing screen.
The Three Column Table
Below is a table with the three columns.
| Using tables to create columns on your web pages can allow you to organize your text so it is clear and easy to read by your visitors.
You can set up part of a web page in table columns or design the whole web page to be in columns similar a newspaper. Perhaps use this table to create a newsletter for your viewers. |
You do not need to add any breaks <br> in the text within your columns. The text will adjust automatically when it reaches the right side of the table cell.
Try using different colored text in your columns to make certain text stand out. Here is a color chart to use to pick a few nice colors. |
You can even add images within your columns along with your text.
Try different things within your columns and see what you can come up with. |
Below is the Html code for a three column table.
| <table border="0" cellpadding="5" cellspacing="0" width="600">
<tr><td align="left" valign="top" width="200"> PUT FIRST COLUMN CONTENTS HERE </td><td align="left" valign="top" width="200"> PUT SECOND COLUMN CONTENTS HERE </td><td align="left" valign="top" width="200"> PUT THIRD COLUMN CONTENTS HERE </td></tr></table> |