Fatal编程技术网
  • html/
  • Html 桌子的布局乱七八糟

Html 桌子的布局乱七八糟

html css

Html 桌子的布局乱七八糟,html,css,html-table,Html,Css,Html Table,CSS table { width: 100%; height: 310px; margin: 10px; } .tabledata { background-color: #123456; color: white; font-size: 15px; text-align: center; padding: 2px; } HTML <table class="allmenus"> <tr>

CSS

table {
    width: 100%;
    height: 310px;
    margin: 10px;
}

.tabledata {
    background-color: #123456;
    color: white;
    font-size: 15px;
    text-align: center;
    padding: 2px;
}
HTML

<table class="allmenus">
    <tr>
        <td class="tabledata" colspan="5" rowspan="2">general<br>information</td>
        <td class="tabledata" colspan="3" rowspan="2">unit</td>
        <td class="tabledata" colspan="2" rowspan="2">location</td>
    </tr>
    <tr>
    </tr>
    <tr>
        <td class="tabledata" colspan="3" rowspan="2">activities</td>
        <td class="tabledata" colspan="4" rowspan="2">future events</td>
        <td class="tabledata" colspan="3" rowspan="4">contact<br>us</td>
    </tr>
    <tr>
    </tr>
    <tr>
        <td class="tabledata" colspan="4">gallery</td>
        <td class="tabledata" colspan="3" rowspan="2">Donate Blood</td>
    </tr>
    <tr>
        <td class="tabledata" colspan="4">volunteer</td>
    </tr>
</table>

<table class="allmenus">
    <tr class="hidden">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="5" rowspan="2">general
            <br>information</td>
        <td colspan="2" rowspan="2">unit</td>
        <td colspan="3" rowspan="2">location</td>
    </tr>
    <tr></tr>
    <tr>
        <td colspan="3" rowspan="2">activities</td>
        <td colspan="4" rowspan="2">future events</td>
        <td colspan="3" rowspan="4">contact
            <br>us</td>
    </tr>
    <tr></tr>
    <tr>
        <td colspan="4">gallery</td>
        <td colspan="3" rowspan="2">Donate Blood</td>
    </tr>
    <tr>
        <td colspan="4">volunteer</td>
    </tr>
</table>


一般信息
单元
位置
活动
未来事件
联系我们
画廊
献血
志愿者
我正在尝试生成一个如下所示的表：

我编写了上面的代码来创建这个表

我不明白出了什么问题！看这张桌子，全乱了。谁能告诉我这里有什么问题，我该怎么办？请忽略颜色。

问题是表列将收缩到其中数据的大小。在你的第4列和第5列的情况下，实际上什么都不是。表格单元格没有平均分割，这似乎是您想要做的

那么你有什么选择？您可以在中放置一个表格标题，并为每个单元格指定最小宽度。例如

不过，可能更好的选择是根本不使用表。您可以使用div和css更好地分隔内容。

问题是浏览器无法计算colspan和行span，因为没有可保留的大小。因此，可以在开始时设置10
，并为它们设置一个
可见：隐藏。这样你就有了一个空间，但它是有效的。（
显示：无
不起作用。）并为每个
指定一个宽度和一个高度

如果在HTML中多次设置同一类，请改用CSS：


table td {
    ...
}


那么你就不必在HTML中重复它了

单元的colspan必须为2，位置的colspan必须为3

HTML


<table class="allmenus">
    <tr>
        <td class="tabledata" colspan="5" rowspan="2">general<br>information</td>
        <td class="tabledata" colspan="3" rowspan="2">unit</td>
        <td class="tabledata" colspan="2" rowspan="2">location</td>
    </tr>
    <tr>
    </tr>
    <tr>
        <td class="tabledata" colspan="3" rowspan="2">activities</td>
        <td class="tabledata" colspan="4" rowspan="2">future events</td>
        <td class="tabledata" colspan="3" rowspan="4">contact<br>us</td>
    </tr>
    <tr>
    </tr>
    <tr>
        <td class="tabledata" colspan="4">gallery</td>
        <td class="tabledata" colspan="3" rowspan="2">Donate Blood</td>
    </tr>
    <tr>
        <td class="tabledata" colspan="4">volunteer</td>
    </tr>
</table>



<table class="allmenus">
    <tr class="hidden">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="5" rowspan="2">general
            <br>information</td>
        <td colspan="2" rowspan="2">unit</td>
        <td colspan="3" rowspan="2">location</td>
    </tr>
    <tr></tr>
    <tr>
        <td colspan="3" rowspan="2">activities</td>
        <td colspan="4" rowspan="2">future events</td>
        <td colspan="3" rowspan="4">contact
            <br>us</td>
    </tr>
    <tr></tr>
    <tr>
        <td colspan="4">gallery</td>
        <td colspan="3" rowspan="2">Donate Blood</td>
    </tr>
    <tr>
        <td colspan="4">volunteer</td>
    </tr>
</table>



您是否尝试过不使用表格进行非制表布局？仅供参考：您真的不应该使用表格进行布局，除非您想将时间回溯到1998年。出于多种原因，CSS是一个更好的工具。查找CSS布局的一些教程在您想要的输出中，有3列表示单元，2列表示位置。但在您的表格中，单位为
colspan=2
，位置为
colspan=3
。修正它们以匹配你想要的，并且看起来应该是正确的。请更改你问题的标题（要具体）。请把代码缩进。非常感谢你！非常感谢P.Leger…..现在代码正按照我的要求完美运行。我想我忘了电池的大小了。顺便说一句，很抱歉之前的标题。这是一个更好的。非常感谢利奥·法默。现在代码是代码，代码工作得很好。我现在正在为这个css工作。。。。。