如何在表格中使用 rowspan 和 colspan 创建单元格答案

【问题标题】：How to create a cell using rowspan and colspan in a table如何在表格中使用 rowspan 和 colspan 创建单元格
【发布时间】：2013-12-23 15:03:33
【问题描述】：

我的表中有两行两列，我使用 rowspan 和 colspan 执行了以下操作。角落里会有一个牢房。请检查小提琴。我想使用表格在下面创建。

http://jsfiddle.net/UvjwJ/

我必须使用表来创建它：-

<table>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

我该怎么做。我必须使用 table 而不是 div 或删除 td 的边框来做到这一点。我不知道这样做。我试图在谷歌中找到这个问题，但我找不到任何问题。

【问题讨论】：

为什么？这种标记的用例是什么？这是作业还是真实场景？
我不明白，有什么问题？
是的，我目前正在使用 php 做一个项目，如果我想将此表更改为 div，我必须做更多的更改。这可以使用表格完成吗？
我认为您无法使用当前结构创建该场景，如果您假装是创建一个 L 形单元格，我不记得以前见过它。如果您尝试解释您的需求以及为什么需要该结构，那就更好了，也许我们可以想到一个解决方案
对不起，您的问题不清楚（根据您的 cmets 的答案）。你的意思是你有上面的html结构，你不能改变？所以我们所能做的就是添加css和/或rowspan之类的属性？此外，您是否需要文本才能适合所有角落单元格？还是您只需要左栏中的文字？

标签： html html-table

【解决方案1】：

这是您仅使用表格即可获得所需内容的唯一方法：http://jsfiddle.net/ZeVjU/。它使用多个表格并对齐（它适用于所有浏览器，rowspan 不适用于所有浏览器）。

此外，请记住，表格单元格必须是矩形。你不能有其他类型的细胞。

<table width="200" border="1" cellpadding="2">
<tr>
    <td>
        <table border="1" align="right">
            <tr>
                <td>asdadasd</td>
            </tr>
        </table>
        asdasdasdas das das das das dasdasd as dasd asd asdas dasd asd asd as dasdas dasd a
    </td>
</tr>
</table>

【讨论】：

【解决方案2】：

嗯，你会用 css 吗？您是希望文本适合单元格周围还是一列就足够了？

你当然可以部分做：

使第一个单元格跨越两行。然后为仍然存在的角落单元格的边框着色。然后您将在左侧有一个长单元格（一列），在右侧有两个单元格，您只能看到最上面的一个。

HTML：

<table cellspacing="0">
    <tr>
        <td rowspan="2">A coloumn here</td>
        <td id="toprightcorner">A cell here with borders</td>
    </tr>
    <tr>

        <td>A cell here</td>
    </tr>
</table>

CSS：

table {
    border: solid 2px black;
}

#toprightcorner{
    border-left: solid 2px black;
    border-bottom: solid 2px black;
}

Example

【讨论】：

@BikashMondal。哦，是的，我可以看到。尽管存在差异，但由于您评论说：“我有一些左侧行跨单元格的动态数据”。这是否意味着您需要行跨度？意思是你希望左边的列是一个完整的单元格？