...

View Full Version : Table with one cell repeating



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;">

<!-- Begin Table -->
<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>
<!-- End 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;">

<!-- begin table -->
<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>
<!-- end 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:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum