HTML Tables

HTML tables are probably the most popular way to design a Web page. Tables let you display your content in rows and columns, either surrounded by borders or with no borders.

The most difficult part usually involves controlling the width of your tables. Learning how to manage the widths of HTML tables is important, especially if you use tables to design Web pages.

If you don't specify a width for your HTML table, then the row with the widest contents will determine the width. This means that your table will 'spill over' into the next section of your Avon website.

This problem usually occurs when you put long words into your tables. It also can occur when you insert an image in your table without specifying the 'width' and height'.

For more on HEIGHT and WIDTH attributes for images please read my tutorial in the 'IMAGES' section of my website.

Tables, tables, everywhere...

Here's an assortment of table templates you can copy and paste, and use wherever you need them. Just erase my text in each cell (your content goes here) between the <td> and </td> - then add your text or pictures.

Remember you can set your own width, border thickness, background color or background image. To learn more click on BACKGROUNDS.

If you'd rather not have a background color just delete this part of the code -

bgcolor="#FFFFFF"

Hope you have fun with them. :)

<center>
<table border=2 width=50% cellspacing=5 cellpadding=8 bgcolor="#FFFFFF">
<tr>
<td>your content goes here</td>
</tr>
</table>
</center>

<center>
<table border=2 width=50% cellspacing=5 cellpadding=8 bgcolor="#FFFFFF">
<tr>
<td>your content goes here</td>
</tr>
<tr>
<td>your content goes here</td>
</tr>
</table>
</center>

<center> <table border=2 width=50% cellspacing=5 cellpadding=8 bgcolor="#FFFFFF" cols=2>
<tr>
<td>your content goes here</td>
<td>your content goes here</td>
</tr>
</table>
</center>

<center>
<table border=2 width=50% cellspacing=5 cellpadding=8 bgcolor="#FFFFFF" cols=2>
<tr>
<td>your content goes here</td>
<td>your content goes here</td>
</tr>
<tr>
<td>your content goes here</td>
<td>your content goes here</td>
</tr>
</table>
</center>

<center>
<table border=2 width=50% cellspacing=5 cellpadding=8 bgcolor="#FFFFFF" cols=2>
<tr>
<td rowspan=2>your content goes here</td>
<td>your content goes here</td>
</tr>
<tr>
<td>your content goes here</td>
</tr>
</table>
</center>

<center>
<table border=2 width=50% cellspacing=5 cellpadding=8 bgcolor="#FFFFFF" cols=2>
<tr>
<td colspan=2 align=center>your content goes here</td>
</tr>
<tr>
<td>your content goes here</td>
<td>your content goes here</td>
</tr>
<tr>
<td>your content goes here</td>
<td>your content goes here</td>
</tr>
</table>
</center>

insert your text here

This copy & paste table is for your text on the left side and your picture on the right.

You can set your own image (in blue) and background color (in fuschia) for this table template. If you're not sure how to do this then please read my tutorial in the IMAGES and BACKGROUNDS section of my website.

The Code

<center>
<table border="0" width="65%" cellpadding="10" bgcolor="#191970">
<tr>
<td valign=middle> insert your text here</td>
<td align=center>
<img src="your filename.gif (or.jpg)" ALT="your image description">
</td>
</tr>
</table>
</center>

If you would like to use my Avon eshopping table (shown above) just copy & paste the code below into your website editor. Just insert your own text in place of mine.

The Code

You can change my fuschia numbers (the background colors) and the font colors to any colors you like.

AVON is in blue. You can change my words to anything you like. If your word has more than four letters you'll need to put <BR> between each letter so the letters will be separated. Also make the font size smaller so it will fit in the table space.

The Code

<center>
<table bgcolor="#191970" border="0" cellpadding="7" cellspacing="0">
<tr>
<th bgcolor="#191970"><font color="#FFFFFF" size="6">
A<BR>V<BR>O<BR> N<BR></font></th>
<th bgcolor="#B0E0E6">
<font color=#FF8000" size="5">
insert your<BR>text here</font></th>
<th bgcolor="#191970"><pre></pre></th>
</tr>
</table>
</center>

If you would like to use my Avon table (shown above) just copy & paste the code below into your website editor. Just insert your own text in place of mine.

The Code

Skin So Soft Bath Oil

You can set your own image (in blue) and background colors (in fuschia) for this table template. You also have a place below for a caption. If you're not sure how make image and color changes then please read my tutorial in the IMAGES and BACKGROUNDS section of my website.

<center>
<table width="25" border="5" cellpadding="5" cellspacing="5" bgcolor="#330000">
<caption align="bottom">your caption</caption><tr>
<td>
<table width="25" border="5" cellpadding="5" cellspacing="5" bgcolor="#CDB99C">
<tr>
<td><img src="your filename.gif (or.jpg)" alt="your image description"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>

If you would like to use my Avon Skin So Soft table (shown above) just copy & paste the code below into your website editor. Just insert your own text in place of mine.

The Code

Top of Page

visitors are currently browsing this site