This is a very helpful tutorial, it will make your tables expand as you add
content to them:
1. Start off by making our actual table in graphic version.
This is a very simple table just to get you into the swing of things. If you
are a little tied for time, you can download the PSD of the
one below Here.
2. We will need to slice this into 3 main parts,
This will be the top, the bottom and the bit in the middle
which will be repeated over and over again. This following
is what bits of the image you need. So save them as the following into
their own folder:
header.jpg |
|
middle.jpg |
|
bottom .jpg |
|
3. The way this is going to work, is we have the header in
its own space, the bottom in its own little space. And, the place where you
write will auto expand. The background of this expanding part will have 'middle.jpg'
as its background, this is important why your middle image must look good when
its repeated.
4. The code for this is as follows (complete, just ready for
copying and pasting) :
<table width="200" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td><table width="200" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td><img src="header.jpg" width="200" height="42"></td>
</tr>
<tr>
<td background="middle.jpg"><table width="165"
border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>All your content can fit here easily!!</td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="bottom.jpg" width="200" height="42"></td>
</tr>
</table></td>
</tr>
</table> |
All of this is a table inside the middle row of a table with three rows.
Which is inside a table of 1 row.
|
This
is the final result
from the bit of code i have just given you. This text is here
simply juts to show you that it
works and autoexpands as i said it would :)
Obviously i added a different
font and colour... oh, and centered it |
|
|
Final result |
|
If you want to learn more about borders or how to make expanding table to all sizes read
this tutorial.
Home
HTML and CSS
Tutorials
Expanding Table
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com