Html 在一个表中对齐两个嵌套表

对于家庭作业，我正在创建一个算法来格式化数学。我在整理东西时遇到了很多麻烦。不管怎样，问题是当我尝试组合两个函数时。让我告诉你我的意思：

例如，我有函数积分：

<table class="integral" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td valign="bottom" align="center">
            8
        </td>
        <td valign="center" rowspan="3">
            <table>
                <tr>
                    <td>
                        &nbsp;&nbsp; x+3+
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr valign="top">
        <td>
            <div style="margin-top: -50%; font-weight: lighter;">
                <span style="font-size: 300%;">&int;</span></div>
        </td>
    </tr>
    <tr>
        <td valign="top" align="center">
            0
        </td>
    </tr>
</table>

8.
x+3+
&int；
0

其表现为：

另一个例子是该司：

<style>
    td.upper_line
    {
        border-top: solid 1px black;
    }
    table.fraction
    {
        text-align: center;
        vertical-align: middle;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        line-height: 2em;
    }
</style>

<table class="fraction" align="center"  cellpadding="0" cellspacing="0" style="float:left; margin-left:20px;">
    <tr>

        <td nowrap="nowrap">
            <i>x</i><sup>2</sup> + <i>x</i> + 1 + y
        </td>
    </tr>
    <tr>
        <td class="upper_line">
            2 cos(<i>x</i>)
        </td>
    </tr>
</table>

td.上_线
{
边框顶部：纯色1px黑色；
}
表1.分数
{
文本对齐：居中；
垂直对齐：中间对齐；
边缘顶部：0.5em；
边缘底部：0.5em；
线高：2米；
}
x2+x+1+y
2 cos（x）

其表现为：

我在组合两个函数时遇到困难。例如，我想在积分后面加上除法。换言之，我希望以如下方式结束：

我知道我可以使用绝对定位和坐标来解决这个问题。但我希望无论每个函数包含什么数据，都能让它正常工作。就像前两个例子一样。例如，对于分割，您可以更改文本，分割线将相应增长

当我将除法表放在积分表中时，我得到：

<table class="integral" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td valign="bottom" align="center">
            8
        </td>
        <td valign="center" rowspan="3">
            <table>
                <tr>
                    <td>
                        &nbsp;&nbsp; x+3+
                        <table class="fraction" align="center"  cellpadding="0" cellspacing="0" style="float:left; margin-left:20px;">
    <tr>

        <td nowrap="nowrap">
            <i>x</i><sup>2</sup> + <i>x</i> + 1 + y
        </td>
    </tr>
    <tr>
        <td class="upper_line">
            2 cos(<i>x</i>)
        </td>
    </tr>
</table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr valign="top">
        <td>
            <div style="margin-top: -50%; font-weight: lighter;">
                <span style="font-size: 300%;">&int;</span></div>
        </td>
    </tr>
    <tr>
        <td valign="top" align="center">
            0
        </td>
    </tr>
</table>

8.
x+3+
x2+x+1+y
2 cos（x）
&int；
0

---

表格将显示在任何非浮动元素的下方。您可以使用

float:left

将“x+3”包装在一个span中，或者使用

display:inline

而不是

float:left

在表上使用

display:inline
我稍微不同意kitgui.com您不应该在这里使用表。它们很可能是渲染此类公式的最简单方法。但是，除非您需要支持IE6，否则可以通过使用属性来呈现非表式HTML类表，您应该考虑什么。
更重要的是，更一致地使用CSS，并删除属性，如
单元格填充
，
单元格间距
，
（v）对齐
等，内联样式和不间断空格

解决您的问题：最简单的方法是将内部表放入它自己的
td
，然后去掉浮点数。浮子到底应该做什么

<td>
  &nbsp;&nbsp; x+3+
</td>
<td>
  <table class="fraction" align="center"  cellpadding="0" cellspacing="0" style="margin-left:20px;">
  <tr>
    <td nowrap="nowrap">
        <i>x</i><sup>2</sup> + <i>x</i> + 1 + y
    </td>
  </tr>
  <tr>
    <td class="upper_line">
        2 cos(<i>x</i>)
    </td>
  </tr>
  </table>
</td>


x+3+
x2+x+1+y
2 cos（x）

编辑：顺便说一句，我是这样做的：
在使用表格之前，试着看看CSS 2和CSS 3。这类东西很难使用它们。你和他们走了这么远真是太好了，但这就像是一个用手上楼梯的人。你能做到，但为什么？你研究过MathML吗？我认为这更适合你的工作。