0

I have this problem on my website's layout, and it's basically preventing me from continue it, it's destroying everything.

Here goes the HTML code:

    <table cellpadding="0" cellspacing="0" width="446" height="362">
    <!-- MSTableType="layout" -->
    <tr>
        <td valign="top" colspan="2" height="110">
        <p align="center">Banner</td>
    </tr>
    <tr>
        <td valign="top" height="95">I want this cell to have a fixed height</td>
        <td valign="top" rowspan="3" width="305">
        <p align="center">Text goes here - if the text is too long, I want the 
        stretching cell to vary in height, not the other 2.</td>
    </tr>
    <tr>
        <td valign="top" height="68">I want this cell to have a fixed height</td>
    </tr>
    <tr>
        <td height="89" width="141" valign="top">Stretching/Flexible cell - I 
        want this one to vary in height if the text on the right cell is too 
        long</td>
    </tr>
</table>

As you can see, if I write a text that is larger than the "Text Cell" height, all the cells in the right column stretch, and I only want the last one to do so. Can you help me?

4

5 回答 5

0

Make the height of the bottom-left cell "*" like this:

<table cellpadding="0" cellspacing="0" width="446" height="362">
    <!-- MSTableType="layout" -->
    <tr>
        <td valign="top" colspan="2" height="110">
        <p align="center">Banner</td>
    </tr>
    <tr>
        <td valign="top" height="95">I want this cell to have a fixed height</td>
        <td valign="top" rowspan="3" width="305">
        <p align="center">Text goes here - if the text is too long, I want the 
        stretching cell to vary in height, not the other 2.</td>
    </tr>
    <tr>
        <td valign="top" height="68">I want this cell to have a fixed height</td>
    </tr>
    <tr>
        <td height="*" width="141" valign="top">Stretching/Flexible cell - I 
        want this one to vary in height if the text on the right cell is too 
        long</td>
    </tr>
</table>

This won't let you define the minimum height of the cell, but it works. Best of course would be to use css.

Actually, as I think about this, you can set the height of your right column to "257" (the sum of your left heights, and that will mean that your * will default to 89 if the right column does not stretch.

I am sure this is not cross-browser compatible however... Yup, just dusted off IE6, and it doesn't behave as one would expect. Firefox works great, though.

This probably means that css would be your best bet.

于 2009-11-13T22:20:40.387 回答
0

如果您尝试用表格制作网站，那么欢迎来到 21 世纪。表布局非常过时。尝试像http://www.pmob.co.uk/temp/3colfixedtest_4.htm这样的网站。在那里，您可以找到 Web 标准布局。

于 2009-11-13T22:21:20.490 回答
0

如上所述，虽然它不是您问题的真正答案，但做您想做的事情的最佳方法是学习如何使用<DIV>标签创建 CSS 布局。这将使您对页面布局有更多的控制权，虽然需要一些预先学习，但会在将来使用表格时为您省去大量的麻烦。

实际上，再次查看您的示例。这里的基于布局将非常简单。

<div id='container'>
   <div class='banner'>Banner</div>
   <div class='fixed'>Fixed Height</div>
   <div class='dynamic'>Expanding div to fit text inside</div>
   <div class='fixed'>Fixed Height</div>
   <div class='dynamic'>Expanding div to fit text inside</div>   
</div>

这将为您提供与带有一些 CSS 样式的表格相同的布局。

编辑：关于此事的最后一句话。就我个人而言，如果我知道一个区域将是一个网格类型的区域，对不同的区域没有特殊的格式化需求，那<table>很好，否则我将始终使用基于 CSS 的布局。

于 2009-11-13T22:33:56.100 回答
0

我至少会尝试学习一些 CSS 并使用它来设置表格的样式和大小，而不是使用 HTML。那里有很多很好的教程，但例如：

table {
   width: 600px;
}

table td {
   padding: 5px;
}

将使您的表格宽 600 像素，并提供每<td>5 像素的填充。分配任何单元格或行ids（唯一）和classes（应用于组）以获得更精确的控制。

于 2009-11-13T22:42:30.840 回答
0

谢谢你们的回应。在过去的几个小时里，我尝试用 div 构建它，但我无处可去。我有很多行跨度和列跨度，我不能把它们放在 CSS 中。实际上，设计比我在这里发布的简单表格要复杂得多：

<table cellpadding="0" cellspacing="0" width="750" height="871">
        <!-- MSTableType="layout" -->
        <tr>
            <td valign="top">
            <p style="margin-top: 0; margin-bottom: 0">Banner</td>
            <td valign="top" rowspan="3">
            <p style="margin-top: 0; margin-bottom: 0">Banner</td>
            <td valign="top" rowspan="3" colspan="2">
            <p style="margin-top: 0; margin-bottom: 0">Banner</td>
            <td height="154"></td>
            </tr>
        <tr>
            <td valign="top">Banner</td>
            <td height="24"></td>
            </tr>
        <tr>
            <td valign="top" rowspan="3">Fixed Menu Cell</td>
            <td height="122"></td>
            </tr>
        <tr>
            <td valign="top" colspan="3">
            Banner</td>
            <td height="29"></td>
            </tr>
        <tr>
            <td valign="top" rowspan="6" colspan="2"><p>&nbsp;</p>
            <p>CONTAINER AREA, Text goes Here</p>
            </td>
            <td valign="top" rowspan="6">
            &nbsp;</td>
            <td height="102"></td>
            </tr>
        <tr>
            <td valign="top">
            Fixed Menu Cell</td>
            <td height="37"></td>
        </tr>
        <tr>
            <td valign="top">
            Fixed Menu Cell</td>
            <td height="44"></td>
        </tr>
        <tr>
            <td valign="top">
            Fixed Menu Cell</td>
            <td height="178"></td>
        </tr>
        <tr>
            <td valign="top">
            Fixed Menu Cell</td>
            <td height="109"></td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF">Flexible Cell - can vary depending on the 
            Container Area</td>
            <td height="33"></td>
        </tr>
        <tr>
            <td valign="top" colspan="4">
            <p align="center">Bottom</td>
            <td height="38"></td>
        </tr>
        <tr>
            <td width="252"></td>
            <td width="410"></td>
            <td width="56"></td>
            <td width="30"></td>
            <td height="1" width="2"></td>
        </tr>
    </table>

我正在尝试将这个烂摊子转换为 DIV，但我不认为我会成功 ^^'' 这似乎是一个简单的问题，但我看不到一个简单的解决方案......

于 2009-11-14T00:27:47.180 回答