| Ray did this |
Ray's Test Pages - Fred's Tables - Page 2
In the examples below the smiley image is 100 x 100 pixels. The cells holding the text is 80 pixels wide.
Notice that for each column added, the table width has to be increased by 80 pixels, in these examples from 180 to 260. (100 for the smiley image then 80 for each column added).
In fact, it's important that fixed width tables and cells are used, otherwise unpredictable results occur. The width of the table has to be calculated in advance. In the tables below the image is 100 pixels wide, the text 80 and the gaps are 30.
Compatibility
There is a problem with using a table border. What happens is that IE will display them as flat, which is what we want. Unfortunately Netscape, Firefox, Opera and WebTV displays them as 3D - which in this case is not what we want. A workaround was found on Evolt
The solution involves setting the inner table background to black, then setting a cell spacing value, in this case 3. The cell within the table has it's background set to white, but because of the cell spacing in the table, a 3 pixel black border appears around it.
All of the examples, 1a - 1d, display properly in IE, FireFox, Netscape, Opera and WebTV.
1) Using nested tables, smiley holding the pole
1a)
|
|
|
|
The outer table above contains four cells, the one holding the smiley (drawn holding the pole) is actually two cells spanned vertically.
The top right cell of the main table contains a single cell, nested table. The text goes into the single cell of this table.
The code for the above is ....
<table border="0" width="180" id="table1" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" width="100">
<img border="0" src="ssign1c.gif" width="100" height="100"></td>
<td align="left" valign="top">
<table border="0" width="80" border="0" cellspacing="3" bgcolor="#000000" id="table11" height="50">
<tr>
<td width="80" align="center" bgcolor="#FFFFFF">Ray did this</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
1b) Further text can be added by adding columns to the right. The top cell of the new column contains a new single cell table containing the text, as in the example below...
|
|
|
|
||
The code for the above table is...
<table border="0" width="260" id="table2" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" width="100">
<img border="0" src="ssign1c.gif" width="100" height="100"></td>
<td align="left" valign="top" width="80">
<table width="80" border="0" cellspacing="3" bgcolor="#000000" id="table12" height="50">
<tr>
<td width="80" align="center" bgcolor="#FFFFFF">Ray did this</td>
</tr>
</table>
</td>
<td align="left" valign="top">
<table width="80" border="0" cellspacing="3" bgcolor="#000000" id="table22" height="50">
<tr>
<td align="center" bgcolor="#FFFFFF">This too</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="80"> </td>
<td> </td>
</tr>
</table>
1c) If the smiley needs to be inserted between each column of text, the table looks like below...
|
|
|
|
|
||
The code for the above table is...
<table border="0" width="360" id="table3" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" width="100">
<img border="0" src="ssign1c.gif" width="100" height="100"></td>
<td align="left" valign="top" width="80">
<table width="80" border="0" cellspacing="3" bgcolor="#000000" id="table31" height="50">
<tr>
<td width="80" align="center" bgcolor="#FFFFFF">Ray did this</td>
</tr>
</table>
</td>
<td align="left" valign="top" rowspan="2" width="100">
<img border="0" src="ssign1c.gif" width="100" height="100"></td>
<td align="left" valign="top">
<table width="80" border="0" cellspacing="3" bgcolor="#000000" id="table32" height="50">
<tr>
<td align="center" bgcolor="#FFFFFF">This too</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="80"> </td>
<td> </td>
</tr>
</table>
1d) To produce a gap between the various images
Because the inline method (see Page 1) isn't cross browser compatible that method isn't used here. Instead, the gap is produced by adding an extra column in the main table...
|
|
|
|
|
|||
The code for the above table is...
<table border="0" width="390" id="table4" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" width="100">
<img border="0" src="ssign1c.gif" width="100" height="100"></td>
<td align="left" valign="top" width="80">
<table width="80" border="0" cellspacing="3" bgcolor="#000000" id="table41" height="50">
<tr>
<td width="80" align="center" bgcolor="#FFFFFF">Ray did this</td>
</tr>
</table>
</td>
<td align="left" valign="top" width="30">
</td>
<td align="left" valign="top" rowspan="2" width="100">
<img border="0" src="ssign1c.gif" width="100" height="100"></td>
<td align="left" valign="top">
<table width="80" border="0" cellspacing="3" bgcolor="#000000" id="table42" height="50">
<tr>
<td align="center" bgcolor="#FFFFFF">This too</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="80"> </td>
<td width="80"> </td>
<td> </td>
</tr>
</table>
For more help on cell borders see http://www.cs.tut.fi/~jkorpela/html/cellborder.html
This page created 15th February 2005, last modified 15th February 2005 and was based on a query on 250Free's forums.
