HTML Colspan可能会打破这个?

时间:2015-03-23 19:05:15

标签: html html-table

我一直在为我的朋友们开设一个网站,但我遇到了一个问题。 他们要求让顶部的旗帜更宽,这就是我所做的,并且它引起了这一点。

http://i.imgur.com/yHzscsB.png

这里的代码是导航栏部分,我真的想要修复这部分,因为我觉得我可以弄清楚剩下的就好了。

<table width="1400" border="0" height="100%" cellpadding="0"     cellspacing="0">
<tr>
<td height="203" colspan="11" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td width="58" height="184" valign="top"><img src="images/en_02.gif" width="58" height="184" /></td>
<td colspan="3"  valign="top"><img src="images/banner.png" width="1400" height="184" /></td>
<td width="58" valign="top"><img src="images/en_04.gif" width="58" height="184" /></td>
</tr>
<tr>
<td height="19" valign="top"><img src="images/en_06.gif" width="58" height="19" /></td>

<td width="500"  valign="top"><img src="images/glow_ban.png" width="500" height="19" /></td><td width="800" align ="left" valign="top"><a      href="http://www.uafclan.com">
<img src="images/main.png" width="125" height="19" border="0"/></a><a href="http://www.uafclan.com/forums"><img src="images/forums.png" width="124" height="19" border="0"/></a><a href="http://www.uafclan.com/join"><img src="images/joins.png"width="125" height="19" border="0" /></a><a href="http://www.uafclan.com/member"><img src="images/member.png" width="125" height="19" border="0"/></a><a href="http://www.uafclan.com/staff"><img src="images/staff.png" width="125" height="19" border="0" /></a><a href="http://www.uafclan.com/rosters"><img src="images/rosters.png" width="125" height="19" border="0"/></a><td width="72" valign="top"><img src="images/right_glow.png"height="19" /></td>
<td valign="top"><img src="images/en_17.gif" width="58" height="19" /></td>
</tr>
</table>    </td>
</tr>

3 个答案:

答案 0 :(得分:0)

有一个未公开的 td 标记。尝试使用此代码块代替您的代码:

<table width="1400" border="0" height="100%" cellpadding="0"     cellspacing="0">
<tr>
<td height="203" colspan="11" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
 <tr>
    <td width="58" height="184" valign="top"><img src="images/en_02.gif" width="58" height="184" /></td>
    <td colspan="3"  valign="top"><img src="images/banner.png" width="1400" height="184" /></td>
    <td width="58" valign="top"><img src="images/en_04.gif" width="58" height="184" /></td>
</tr>
<tr>
    <td height="19" valign="top"><img src="images/en_06.gif" width="58" height="19" /></td>
    <td width="500"  valign="top"><img src="images/glow_ban.png" width="500" height="19" /></td>
    <td width="800" align ="left" valign="top"><a      href="http://www.uafclan.com"><img src="images/main.png" width="125" height="19" border="0"/></a><a href="http://www.uafclan.com/forums"><img src="images/forums.png" width="124" height="19" border="0"/></a><a href="http://www.uafclan.com/join"><img src="images/joins.png"width="125" height="19" border="0" /></a><a href="http://www.uafclan.com/member"><img src="images/member.png" width="125" height="19" border="0"/></a><a href="http://www.uafclan.com/staff"><img src="images/staff.png" width="125" height="19" border="0" /></a><a href="http://www.uafclan.com/rosters"><img src="images/rosters.png" width="125" height="19" border="0"/></a></td>
    <td width="72" valign="top"><img src="images/right_glow.png"height="19" /></td>
    <td valign="top"><img src="images/en_17.gif" width="58" height="19" /></td>
</tr>
</table>
</td>
</tr>

答案 1 :(得分:0)

这是你的代码缩进,可能更容易阅读。你的'容器'表的宽度设置为1400.内表的第一行中的宽度总和加起来为1516,第二行的加权数为1437.我想知道是否有额外的宽度会使事情变形。

<table width="1400" border="0" height="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td height="203" colspan="11" valign="top">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="58" height="184" valign="top">
                        <img src="images/en_02.gif" width="58" height="184" />
                    </td>
                    <td colspan="3" valign="top">
                        <img src="images/banner.png" width="1400" height="184" />
                    </td>
                    <td width="58" valign="top">
                        <img src="images/en_04.gif" width="58" height="184" />
                    </td>
                </tr>
                <tr>
                    <td height="19" valign="top">
                        <img src="images/en_06.gif" width="58" height="19" />
                    </td>
                    <td width="500"  valign="top">
                        <img src="images/glow_ban.png" width="500" height="19" />
                    </td>
                    <td width="800" align ="left" valign="top">
                        <a href="http://www.uafclan.com">
                            <img src="images/main.png" width="125" height="19" border="0"/>
                        </a>
                        <a href="http://www.uafclan.com/forums">
                            <img src="images/forums.png" width="124" height="19" border="0"/>
                        </a>
                        <a href="http://www.uafclan.com/join">
                            <img src="images/joins.png"width="125" height="19" border="0" />
                        </a>
                        <a href="http://www.uafclan.com/member">
                            <img src="images/member.png" width="125" height="19" border="0"/>
                        </a>
                        <a href="http://www.uafclan.com/staff">
                            <img src="images/staff.png" width="125" height="19" border="0" />
                        </a>
                        <a href="http://www.uafclan.com/rosters">
                            <img src="images/rosters.png" width="125" height="19" border="0"/>
                        </a>
                    </td>
                    <td width="72" valign="top">
                        <img src="images/right_glow.png"height="19" />
                    </td>
                    <td valign="top">
                        <img src="images/en_17.gif" width="58" height="19" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>

答案 2 :(得分:0)

我认为这些代码块导致了问题:

<td width="72" valign="top"><img src="images/right_glow.png"height="19" /></td>
<td valign="top"><img src="images/en_17.gif" width="58" height="19" /></td>

我无法让它完美运行,但我认为我改善了这种情况(我不完全确定你想要的最终结果是什么,但我认为只是将它全部排成一行):

<td valign="top" width="125">
<img src="images/right_glow.png" width="125" height="19" />
</td>
<td valign="top" width="58">
<img src="images/en_17.gif" width="58" height="19" />

您可以在此处查看结果:http://jsfiddle.net/gratiafide/3o26Lwhf/ 尝试剪切并粘贴原始代码以查看差异。祝你好运!