this
Ray's Test Pages - Fred's Tables - Page 1
In the example 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).
Cell borders can't be individually changed with HTML, hence the small piece of CSS style="border:solid 4px #000000" in the cell code.
Compatibility
None of the examples 1a - 2d display properly in WebTV.
They all display perfectly, as intended, in IE, Netscape and Firefox.
Opera has a problem displaying 1d and 2d, there is a gap between the columns in the tables, no doubt caused by the inline style.
1) Using a single table, with spanned cells
1a)
|
|
Ray did this |
The table above contains four cells, the one holding the smiley (drawn holding the pole) is actually two cells spanned vertically.
The text is held in the the top row cell of the next column, the cell underneath is left empty.
The code for the above is ....
<table border="0" width="180" id="table1" cellspacing="0" cellpadding="0">
<tr>
<td width="100" rowspan="2" width="100" height="100">
<img border="0" src="ssign1c.gif" width="100" height="100"></td>
<td height="30" width="80" bordercolor="#000000" bgcolor="#FFFFFF" style="border:solid 4px #000000" align="center" >Ray did<br>
this</td>
</tr>
<tr>
<td valign="top" height="50" width="80" bgcolor="#FFFFFF"> </td>
</tr>
</table>
1b) Further text can be added by adding columns to the right, as in the example below...
|
|
Ray did this |
This too |
The code for the above table now becomes...
<table border="0" width="260" id="table2" cellspacing="0" cellpadding="0">
<tr>
<td width="100" rowspan="2" width="100" height="100">
<img border="0" src="ssign1c.gif" width="100" height="100"></td>
<td height="30" bordercolor="#000000" bgcolor="#FFFFFF" style="border:solid 4px #000000" align="center" width="80">Ray did<br>
this</td>
<td height="30" bordercolor="#000000" bgcolor="#FFFFFF" style="border:solid 4px #000000" align="center" width="80">This too</td>
</tr>
<tr>
<td valign="top" height="50" width="80" bgcolor="#FFFFFF"> </td>
<td valign="top" height="50" width="80" bgcolor="#FFFFFF"> </td>
</tr>
</table>
1c) If the smiley needs to be inserted between each column of text, the table looks like below...
|
|
Ray did this |
|
This too |
Notice that the only the top row of cells contain the txt, the bottom row is empty. Also that the table width is now 360 (100 + 80 + 100 + 80)
The code for the above table is...
<table border="0" width="360" id="table3" cellspacing="0" cellpadding="0">
<tr>
<td width="100" rowspan="2" width="100" height="100">
<img border="0" src="ssign1c.gif" width="100" height="100"></td>
<td height="30" bordercolor="#000000" bgcolor="#FFFFFF" style="border:solid 4px #000000" align="center" width="80">Ray did<br>
this</td>
<td height="80" bordercolor="#000000" bgcolor="#FFFFFF" align="center" width="80" rowspan="2">
<img border="0" src="ssign1c.gif" width="100" height="100"></td>
<td height="30" bordercolor="#000000" bgcolor="#FFFFFF" style="border:solid 4px #000000" align="center" width="80">This too</td>
</tr>
<tr>
<td valign="top" height="50" width="80" bgcolor="#FFFFFF"> </td>
<td valign="top" height="50" width="80" bgcolor="#FFFFFF"> </td>
</tr>
</table>
1d) To make the tables appear next to each other using the inline method...
|
|
Ray did this |
|
|
This too |
The code to do this is...
<table border="0" width="180" id="table4" cellspacing="0" cellpadding="0" style="display: inline">
<tr>
<td width="100" rowspan="2" width="100" height="100">
<img border="0" src="ssign1c.gif" width="100" height="100"></td>
<td height="30" width="80" bordercolor="#000000" bgcolor="#FFFFFF" style="border:solid 4px #000000" align="center">Ray did<br>
this</td>
</tr>
<tr>
<td valign="top" height="50" width="80" bgcolor="#FFFFFF"> </td>
</tr>
</table>
<table border="0" width="180" id="table5" cellspacing="0" cellpadding="0" style="display: inline">
<tr>
<td width="100" rowspan="2" width="100" height="100">
<img border="0" src="ssign1c.gif" width="100" height="100"></td>
<td height="30" width="80" bordercolor="#000000" bgcolor="#FFFFFF" style="border:solid 4px #000000" align="center">This too</td>
</tr>
<tr>
<td valign="top" height="50" width="80" bgcolor="#FFFFFF"> </td>
</tr>
</table>
2) Using a single table, spanned cells, the smiley not holding the pole.
2a)
 |
Ray did this |
The code for the above table is...
<table border="0" width="180" id="table6" cellspacing="0" cellpadding="0">
<tr>
<td width="100" rowspan="2" width="100" height="100"><img border="0" src="ssign1d.gif" width="100" height="100"></td>
<td height="30" bordercolor="#000000" bgcolor="#FFFFFF" style="border:solid 4px #000000" align="center" width="80">Ray did<br>
this</td>
</tr>
<tr>
<td valign="top" height="50" width="62" bgcolor="#FFFFFF" style="border-left:solid 4px #000000"> </td>
</tr>
</table>
2b) Further text can be added by adding columns to the right, as in the example below...
|
Ray did this |
This too |
The code for the above table is...
<table border="0" width="260" id="table7" cellspacing="0" cellpadding="0">
<tr>
<td width="100" rowspan="2" width="100" height="100"><img border="0" src="ssign1d.gif" width="100" height="100"></td>
<td height="30" bordercolor="#000000" bgcolor="#FFFFFF" style="border:solid 4px #000000" align="center" width="80">Ray did<br>
this</td>
<td height="30" bordercolor="#000000" bgcolor="#FFFFFF" style="border:solid 4px #000000" align="center" width="80">This too</td>
</tr>
<tr>
<td valign="top" height="50" width="80" bgcolor="#FFFFFF" style="border-left:solid 4px #000000"> </td>
<td valign="top" height="50" width="80" bgcolor="#FFFFFF" style="border-left:solid 4px #000000"> </td>
</tr>
</table>
2c) If the smiley needs to be inserted between each column of text, the table looks like below...
|
Ray did this |
|
This too |
The code to do this is...
<table border="0" width="360" id="table8" cellspacing="0" cellpadding="0">
<tr>
<td width="100" rowspan="2" width="100" height="100"><img border="0" src="ssign1d.gif" width="100" height="100"></td>
<td height="30" bordercolor="#000000" bgcolor="#FFFFFF" style="border:solid 4px #000000" align="center" width="80">Ray did<br>
this</td>
<td height="80" bordercolor="#000000" bgcolor="#FFFFFF" align="center" width="80" rowspan="2">
<img border="0" src="ssign1d.gif" width="100" height="100"></td>
<td height="30" bordercolor="#000000" bgcolor="#FFFFFF" style="border:solid 4px #000000" align="center" width="80">This too</td>
</tr>
<tr>
<td valign="top" height="50" width="80" bgcolor="#FFFFFF" style="border-left:solid 4px #000000"> </td>
<td valign="top" height="50" width="80" bgcolor="#FFFFFF" style="border-left:solid 4px #000000"> </td>
</tr>
</table>
2d) To make the tables appear side by side as below...
|
Ray did this |
|
This too |
The code to do this is...
<table border="0" width="180" id="table9" cellspacing="0" cellpadding="0"style="display: inline">
<tr>
<td width="100" rowspan="2" width="100" height="100"><img border="0" src="ssign1d.gif" width="100" height="100"></td>
<td height="30" bordercolor="#000000" bgcolor="#FFFFFF" style="border:solid 4px #000000" align="center" width="80">Ray did<br>
this</td>
</tr>
<tr>
<td valign="top" height="50" width="62" bgcolor="#FFFFFF" style="border-left:solid 4px #000000"> </td>
</tr>
</table>
<table border="0" width="180" id="table10" cellspacing="0" cellpadding="0"style="display: inline">
<tr>
<td width="100" rowspan="2" width="100" height="100"><img border="0" src="ssign1d.gif" width="100" height="100"></td>
<td height="30" bordercolor="#000000" bgcolor="#FFFFFF" style="border:solid 4px #000000" align="center" width="80">This too</td>
</tr>
<tr>
<td valign="top" height="50" width="62" bgcolor="#FFFFFF" style="border-left:solid 4px #000000"> </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.
