Search code examples
htmlcsshtml-tablevertical-alignment

Alignment of tables in HTML

How do I place 3 different tables - L1, L2, R1 in the specified below position:

  1. L1 on Top Left - 2 rows
  2. L2 immediately below L1 on the Left - 2 rows.
  3. R1 on the Top Right - This has 10 rows

The issue is L2 is placed way below L1 as it is inline, how can I make it appear right below L1? Should float left / right or any other setting can help me achieve this?

https://jsfiddle.net/cyppyntp/4/

<table class="one" id="L1">
    <tr>
        <th>Month-1</th>
        <th>Savings-1</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
</table>
<table class="one" id="L2">
    <tr>
        <th>Month-2</th>
        <th>Savings-2</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$200</td>
    </tr>
    <tr>
        <td>March</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>April</td>
        <td>$600</td>
    </tr>
    <tr>
        <td>May</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>June</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>July</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>August</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>Sep</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>Oct</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>Nov</td>
        <td>$100</td>
    </tr>
</table>
<table class="two" id="R1">
    <tr>
        <th>Month-3</th>
        <th>Savings-3</th>
    </tr>
    <tr>
        <td>December</td>
        <td>$400</td>
    </tr>
</table>

.inlineTable {
display: inline-block;
}
table.one {
width:45%;
display:inline-block;
vertical-align:top;
}
table.two {    
text-align:left;
}
Solution

  • See this fiddle

    I've changed the order of your tables slightly. Also, I have added two new divs. See the HTML below

    <div class="left">
    <table class="one">
        <tr>
            <th>Month-1</th>
            <th>Savings-1</th>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
    </table>
    <table class="two">
        <tr>
            <th>Month-3</th>
            <th>Savings-3</th>
        </tr>
        <tr>
            <td>December</td>
            <td>$400</td>
        </tr>
    </table>
</div>
<div class="right">
    <table class="one">
        <tr>
            <th>Month-2</th>
            <th>Savings-2</th>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$200</td>
        </tr>
        <tr>
            <td>March</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>April</td>
            <td>$600</td>
        </tr>
        <tr>
            <td>May</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>June</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>July</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>August</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>Sep</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>Oct</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>Nov</td>
            <td>$100</td>
        </tr>
    </table>
</div>

    And, also added the below given CSS

    .left,.right{
    float:left;
    width:50%;
}