CODEWITHSUNDEEP
htmlcssalgorithm
Tono Nam
Tono Nam

Reputation: 36048

align two nested tables inside a table

for a homework assignment I am creating an algorithm in order to format math. I am having a lot of trouble aligning stuff. anyways the problem is when I try to combine two functions. let me show you what I mean:

for example I have the function Integral:

<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>

that renders as:

enter image description here

another example is the division:

<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>

that renders as:

enter image description here

I am having trouble combining two functions. for example I want to append to the integral the division. In other words I will like to end up with something like:

enter image description here

I know that I could use absolute positioning and play around with the coordinates in order to solve the problem. but I want to be able to make it work regardless of what data each function contains. just like in the first two examples. for example to the division you may change the text and the division line will grow accordingly...

when I place the division table inside the integral table I get:

<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>

enter image description here

Upvotes: 1

Views: 4502

Answers (2)

RoToRa
RoToRa

Reputation: 38400

I slightly disagree with kitgui.com that you shouldn't be using tables here. They are mostlikly the easiest way to render formulas like these. However unless you need to support IE6 it is possible to render non-table HTML like tables by using the display: table-* properties, what you should consider.

More importantly whould be to use CSS more consistently, and remove the attributes such as cellpadding, cellspacing,(v)align etc., the inline styles and the non-breaking spaces..

To your problem: It would propaply be easiest to simply put your inner table into a td of it's own and drop the float. What is the float supposed o do anyway?

<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>

EDIT: BTW, here is how I do it: http://jsfiddle.net/vY7TD/4/

Upvotes: 2

fgb
fgb

Reputation: 18569

The table will display below any non-floating elements before it. You can wrap the "x+3" in a span with float:left or use can use display:inline on the table instead of float:left.

Upvotes: 1

Related Questions