Table with one cell repeating [Archive]

mlliw

12-24-2003, 02:27 PM

:confused:
This is the code for my table webpage.

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY style="margin: 0px 0px 0px 0px;">


<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="776" HEIGHT="413">

<TR>
<TD ROWSPAN="1" COLSPAN="3" WIDTH="629" HEIGHT="87">
<IMG NAME="table0" SRC="table_1x1.jpg" WIDTH="629" HEIGHT="87" BORDER="0"></TD>
<TD ROWSPAN="1" COLSPAN="2" WIDTH="147" HEIGHT="87">
<IMG NAME="table1" SRC="table_1x2.jpg" WIDTH="147" HEIGHT="87" BORDER="0"></TD>
<TD WIDTH="1" HEIGHT="87">
<IMG NAME="blank" SRC="blank.gif" WIDTH="1" HEIGHT="87" BORDER="0"></TD>
</TR>

<TR>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="151" HEIGHT="25">
<IMG NAME="table2" SRC="table_2x1.jpg" WIDTH="151" HEIGHT="25" BORDER="0"></TD>
<TD ROWSPAN="5" COLSPAN="1" WIDTH="466">
Data
</TD>
<TD ROWSPAN="2" COLSPAN="2" WIDTH="145" HEIGHT="31">
<IMG NAME="table3" SRC="table_2x3.jpg" WIDTH="145" HEIGHT="31" BORDER="0"></TD>
<TD ROWSPAN="5" COLSPAN="1" WIDTH="14" HEIGHT="283"></TD>
<TD WIDTH="1" HEIGHT="25">
<IMG NAME="blank" SRC="blank.gif" WIDTH="1" HEIGHT="25" BORDER="0"></TD>
</TR>

<TR>
<TD ROWSPAN="2" COLSPAN="1" WIDTH="151" HEIGHT="158" background="table_3x1.jpg">
Side Top</TD>
<TD WIDTH="1" HEIGHT="6">
<IMG NAME="blank" SRC="blank.gif" WIDTH="1" HEIGHT="6" BORDER="0"></TD>
</TR>

<TR>
<TD ROWSPAN="2" COLSPAN="2" WIDTH="145" HEIGHT="155" background="table_4x1.jpg">
Right Top</TD>
<TD WIDTH="1" HEIGHT="152">
<IMG NAME="blank" SRC="blank.gif" WIDTH="1" HEIGHT="152" BORDER="0"></TD>
</TR>

<TR>
<TD ROWSPAN="2" COLSPAN="1" WIDTH="151" background="table_5x1.jpg">
Side Bottom</TD>
<TD WIDTH="1" HEIGHT="3">
<IMG NAME="blank" SRC="blank.gif" WIDTH="1" HEIGHT="3" BORDER="0"></TD>
</TR>

<TR>
<TD ROWSPAN="1" COLSPAN="2" WIDTH="145" background="table_6x1.jpg">
Right Bottom</TD>
<TD WIDTH="1" HEIGHT="97">
<IMG NAME="blank" SRC="blank.gif" WIDTH="1" HEIGHT="97" BORDER="0"></TD>
</TR>

<TR>
<TD ROWSPAN="1" COLSPAN="5" WIDTH="776" HEIGHT="43">
<IMG NAME="table8" SRC="table_7x1.jpg" WIDTH="776" HEIGHT="43" BORDER="0"></TD>
<TD WIDTH="1" HEIGHT="43">
<IMG NAME="blank" SRC="blank.gif" WIDTH="1" HEIGHT="43" BORDER="0"></TD>
</TR>

<TR>
<TD WIDTH="151" HEIGHT="1">
<IMG NAME="blank" SRC="blank.gif" WIDTH="151" HEIGHT="1" BORDER="0"></TD>
<TD WIDTH="466" HEIGHT="1">
<IMG NAME="blank" SRC="blank.gif" WIDTH="466" HEIGHT="1" BORDER="0"></TD>
<TD WIDTH="12" HEIGHT="1">
<IMG NAME="blank" SRC="blank.gif" WIDTH="12" HEIGHT="1" BORDER="0"></TD>
<TD WIDTH="133" HEIGHT="1">
<IMG NAME="blank" SRC="blank.gif" WIDTH="133" HEIGHT="1" BORDER="0"></TD>
<TD WIDTH="14" HEIGHT="1">
<IMG NAME="blank" SRC="blank.gif" WIDTH="14" HEIGHT="1" BORDER="0"></TD>
</TR>
</TABLE>


</BODY>
</HTML>

How do I make it so that when more information is entered into the data cell (the one with the text "Data" in it), only the "Side Bottom" and "Right Bottom" get longer and everything else stays the same?

Thanks!

Mlliw

Skyzyx

12-24-2003, 06:17 PM

Give "Side Top" and "Right Top" and explicit height, then give the lower two a width of "auto".

<html>
<head>
<title> </title>
</head>
<body style="margin: 0px 0px 0px 0px;">


<table border="1" cellpadding="0" cellspacing="0" width="776" height="413">
<tr>
<td rowspan="1" colspan="3" width="629" height="87">
<img name="table0" src="table_1x1.jpg" width="629" height="87" border="0">
</td>
<td rowspan="1" colspan="2" width="147" height="87">
<img name="table1" src="table_1x2.jpg" width="147" height="87" border="0">
</td>
<td width="1" height="87">
<img name="blank" src="blank.gif" width="1" height="87" border="0">
</td>
</tr>
<tr>
<td rowspan="1" colspan="1" width="151" height="25">
<img name="table2" src="table_2x1.jpg" width="151" height="25" border="0">
</td>
<td rowspan="5" colspan="1" width="466" style="height:auto;">
Data
</td>
<td rowspan="2" colspan="2" width="145" height="31">
<img name="table3" src="table_2x3.jpg" width="145" height="31" border="0">
</td>
<td rowspan="5" colspan="1" width="14" height="283">
</td>
<td width="1" height="25">
<img name="blank" src="blank.gif" width="1" height="25" border="0">
</td>
</tr>
<tr>
<td rowspan="2" colspan="1" width="151" height="158" background="table_3x1.jpg" style="height:80px;">
Side Top
</td>
<td width="1" height="6">
<img name="blank" src="blank.gif" width="1" height="6" border="0">
</td>
</tr>
<tr>
<td rowspan="2" colspan="2" width="145" height="155" background="table_4x1.jpg" style="height:80px;">
Right Top
</td>
<td width="1" height="152">
<img name="blank" src="blank.gif" width="1" height="152" border="0">
</td>
</tr>
<tr>
<td rowspan="2" colspan="1" width="151" background="table_5x1.jpg" style="height:auto;">
Side Bottom
</td>
<td width="1" height="3">
<img name="blank" src="blank.gif" width="1" height="3" border="0">
</td>
</tr>
<tr>
<td rowspan="1" colspan="2" width="145" background="table_6x1.jpg" style="height:auto;">
Right Bottom
</td>
<td width="1" height="97">
<img name="blank" src="blank.gif" width="1" height="97" border="0">
</td>
</tr>
<tr>
<td rowspan="1" colspan="5" width="776" height="43">
<img name="table8" src="table_7x1.jpg" width="776" height="43" border="0">
</td>
<td width="1" height="43">
<img name="blank" src="blank.gif" width="1" height="43" border="0">
</td>
</tr>
<tr>
<td width="151" height="1">
<img name="blank" src="blank.gif" width="151" height="1" border="0">
</td>
<td width="466" height="1">
<img name="blank" src="blank.gif" width="466" height="1" border="0">
</td>
<td width="12" height="1">
<img name="blank" src="blank.gif" width="12" height="1" border="0">
</td>
<td width="133" height="1">
<img name="blank" src="blank.gif" width="133" height="1" border="0">
</td>
<td width="14" height="1">
<img name="blank" src="blank.gif" width="14" height="1" border="0">
</td>
</tr>
</table>


</body>
</html>

Something like that should work. Oh, and if you ever want to get any further in web design, you should really keep your tags and attributes lowercase. It's a good start with the quotes though. Keep that up.

You'll also want to learn to get away from tables and spacer gifs, and use valid, semantic XHTML for structure, and CSS for layout purposes.

Until you get there, however, I hope this helps! :thumbsup: