HTML » Expanding table layout

The expanding table is maybe the simplest layout style to make :) It is a layout picture, and table with 3 rows: the top row that contains the header picture, the middle row that contains the repeating background for the text, and the bottom row that contains the picture that ends the table. I will show you some different methods to make an expanding table.

Method 1

The simplest one.. Make a layout picture, I'll use this one:

So I insert my layout picture on the site. Then I just add a regular table underneath. It looks nice, but you can't add any fading effects on the top nor the bottom with this method. I'd like the stuff to be centered, so i add the center-code. So, let's see how it looks:

text

Code:

<center> Makes the stuff centered
<img src="layout_pic.jpg" width="400" height="273"><br> Inserts the layout picture, and makes a line break..
<table border="1" bordercolor="black" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="380" bgcolor="#C00000">Insert the table. I've chosen a black 1 pixel wide border around, and a "non-double border" (boder="1" bordercolor="black" style="border-collapse:collapse"), and a dark red background color (bgcolor="#C00000").
<tr> Make ONE column
<td> And ONE row
TEXT HERE - THE TABLE WILL EXPAND... yep, the text..
</td> End column
</tr> End row
</table> End table
</center> End centered.

You can also insert a background picture in the table/text area. I'll only show you the code, not how it looks. Jus imagine some kind of picture inside the red square instead of the red color.

Method 2

This method is similar to the 1st method.. Start with making a table with one row, and one color, like in method 1:

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="300"> Make a table with no border border="0")
<tr> Make row
<td> Make column
<img src="layout_pic.jpg"><br> Insert layout picture at the top inside the table, make a line feed (<br>)
<br>WRITE TEXT... and write what ever text you want.
</td> End column
</tr> End row
</table> End table

A regular table that looks like this:

STUFF WILL GO HERE (picture at the top, text under)

This is the layout picture I'll use.

Now, we'll insert the layout picture inside the table, so it looks like this (the fading at the top of the picture is done in PSP, not with html code.. Ever!:

Text bla bla bla bla
text bla bla bla bla

bla bla bla
bla

Method 3

The 3rd method looks more "fancy", as you can fade the layout picture into the table. I'll show you an example. :)

This is the layout picture I'll use (As you can see, the fading at the top and bottom of the picture is in the picture an is not done by code. Ever!):

This is the middle section; we have to cut it in three pieces, I'll explain later why..

Left:

Middle:

Right:

And finally the bottom picture:

If we take a look at the sizes of the pictures (I'll add a border around each of the pictures, so you can see where the edges are) we can see that the top picture and the bottom are equally wide. They have to be, if they shall fit together. The left part of the middle picture has to have the same amount of white (background color) on the left as the top picture - the same with the right one.

Top:

Middle peaces:

(left)

(center part) and

(right).

Bottom:

The horse on the layout picture can be biiiig, and the table itself narrow, but then you have to add more white (or whatever background color you want on your layout) in the edges. If you want to make the table look like it's more to the left, you have to add more white (background color) to the right. It's just an illusion that you create :)

I'll show you how I cut the layout picture..

(1) Use the tool called selection, and make a square around the part you want to be the top. Go to Layers (in the header part of paint shop pro (the tool line)), choose Merge and Merge all (flatten). Press ctrl + C (copy) then ctrl + V (paste as new layer) and save. Go back to the original picture.

(2) Use the selection tool again, and select a middle section. Ctrl + C, ctrl + V. Now, select the part you'd like to have as left section. Cut from the edge, and where the "table" ends. Do the same with the right part, then cut the center piece out - this will be the middle in the middle so to speak.

(3) Cut the bottom out. Same way as the top.

Now, let's create some code!

First, create a table with 3 rows, and 3 columns. The top row and the bottom row has to be merged, because we want to fit the top and the bottom picture in there. The 3 columns in the middle has to be "normal" because we have 3 pictures to fit in here. Make the table as wide as the pictures (they have all the same width)

The table:

Place top picture in here (as background), and make the row as high as the top picture.
Place left center picture in here (as background)	Place center part picture in here (as background). The text will be in this cell... (Your blah blah)	Please right center picture in here (as background)
Place bottom picture in here

The result:


	In this cell you can write your text... It will expand, and the background will repeat itself (automatically), and that is good, because that will make it expandable..

I have made the table with the black borders around, so it's easier to see how the table looks. But without the borders, the layout pictures will look like one. See for yourself:


	In this cell you can write your text... It will expand, and the background will repeat itself (automatically), and that is good, because that will make it expandable..

The only thing left now, is to show you the actual code :D

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="409" height="544"> Create table, no borders, cellpadding or anything. Make it as wide as the layout picture (so it shows, but not is repeated)
<tr> Create row
<td width="407" colspan="3" background="address/picture-top.jpg" height="449"></td> Create column. Colspan="3" makes the columns merged in the top row. Insert top picture as background in this cell. Don't write in the cell.
</tr> End row
<tr> Make new row.
<td width="38" height="24" background="address/picture-middle-left.jpg"> </td> Create and end column, insert middle left picture as background. Don't write in this cell.
<td width="329" height="24" background="address/picture-middle.jpg"> Create new column, insert the middle section picture here. In this cell, you do the writing. All the writing that you want in the expandable table.
WRITE TEXT IN THIS CELL
</td> End column.
<td width="38" height="24" background="address/picture-middle-right.jpg"> </td> Make (and end) the last column in the middle row. Insert the right middle picture here. Don't write in this cell.
</tr> End the row.
<tr> Create the last row.
<td width="407" colspan="3" height="69" background="picture-bottom.jpg"> </td> Create (and end) the last column. Colspan="3= makes the columns merged in the bottom row. Insert the bottom picture as background in this cell. Don't write in this cell..
</tr> End the row.
</table> End the table. That's all.

Change the addresses (green) to actual addresses. These images "does not work", as they doesn't exist. You have to make yourown pictures and insert them in the code.