Question

我想制作这个表格布局：

table example

我有：

<table border="1">
<tr>  <td colspan="3">aaa</td> <td colspan="3">aa</td> </tr>
<tr>  <td>a</td> <td> aa </td> <td> aaa </td> <td>aa</td><td>aa</td><td>aa</td> </tr>
</table>

但我怎么能休息呢？

现场：http://jsfiddle.net/jsTvA/1/

Answer 1

这是：

Screenshot of the table

代码：http://jsfiddle.net/jsTvA/14/

Answer 2

您可以在单元格中创建新表格。

Answer 3

如果您想要单个表，那么解决问题的方法是：

计算出所需的最大行数和列数。在你的情况下，它看起来像8列，6行。
制作一个这样大小的简单表格。
开始在colspan设置rowspan和td，然后移除旁边的td。
重复此操作，直到您拥有自己喜欢的格式。

Answer 4

要构建该结构，您需要使用属性colspan和rowspan。

实施例

制作以下结构：

-------
|A    |
-------
|X|Y|Z|
  -----
| |1|2|
-------

使用代码：

<tr>
    <td colspan="3">A</td>
</tr>
<tr>
    <td rowspan="2">X</td>
    <td>Y</td>
    <td>Z</td>
</tr>
<tr>
    <td>1</td>
    <td>2</td>
</tr>

如上所述建议的替代方法是添加嵌套表，如下所示：

<tr>
    <td>A</td>
</tr>
<tr>
    <table>
        <tr>
            <td>X</td>
            <td>Y</td>
            <td>|</td>
        </tr>
    </table>
</tr>

就我个人而言，我选择了colspan路线，但它真的取决于你。

另一种方法是完全忽略表并使用CSS，但除非你已经竞争使用CSS，否则你可能会发现这更加痛苦。

Answer 5

我能做的最好：

<table border="1">
<tr>  
    <td colspan="3">aaa</td> 
    <td colspan="3">aa</td> 
</tr>
<tr>  
    <td>a</td> 
    <td> aa </td> 
    <td> aaa </td> 
    <td>lol</td>
    <td>
        <table border="1">
            <tr>
                <td colspan="3">
                    lol
                </td>
            </tr>
        <tr>
            <td>
                ok
            </td>
            <td>
                ok
            </td>
            <td>
                ok
            </td>
        </tr>
        <tr>
            <td>
                ok
            </td>
            <td>
                ok
            </td>
            <td>
                ok
            </td>
        </tr>
        </table>
    </td>
    <td>

    </td> 
</tr>
    <tr>
        <td colspan="2">
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
   </tr>
    <tr>
        <td colspan="10">
        </td>
    </tr>

</table>

http://jsfiddle.net/jsTvA/15/

Answer 6

<table border="1">
    <tr>
        <td colspan="3">aaa</td>
        <td colspan="5">aa</td>
    </tr>
    <tr>
        <td rowspan="3">a</td>
        <td rowspan="3">aa</td>
        <td rowspan="3">aa</td>
        <td rowspan="3">aa</td>
        <td colspan="3">aa</td>
        <td rowspan="3">aa</td>
    </tr>
    <tr>
        <td>bb</td>
        <td>bb</td>
        <td>bb</td>
    </tr>
    <tr>
        <td>bb</td>
        <td>bb</td>
        <td>bb</td>
    </tr>
    <tr>
        <td>aa</td>
        <td>aa</td>
        <td>aa</td>
        <td>aa</td>
        <td>aa</td>
        <td>aa</td>
        <td>aa</td>
        <td>aa</td>
     </tr>
    <tr>
        <td colspan="8">aa</td>
    </tr>
</table>

Answer 7

您可以尝试合并excel中的单元格，然后将其转换为html。 http://tableizer.journalistopia.com

用许多td创建表

7 个答案: