CODEWITHSUNDEEP
htmlalignmenthtml-table
user4408652
user4408652

Reputation:

How to put table under another table

how can I put one table under another if I have used align for example.

           center_table
left_table
           desired_table

But I am getting following result

           center_table
left_table desired_table

Here is my html code. center_table 

    <table align="left">
        <tr>
            <td>left_table</td>
        </tr>
    </table>

    <table align="center">
        <tr>
            <td>desired_table</td>
        </tr>
    </table>

Without using css only HTML

Upvotes: 4

Views: 16650

Answers (3)

Ankit
Ankit

Reputation: 1105

Just add a <div style = "clear:both;"></div> in between your two tables. It should work then

The clear property specifies which side(s) of an element other floating elements are not allowed.

You can find more detail of it here http://www.w3schools.com/cssref/pr_class_clear.asp

<table align="left">
  <table align="left">
    <tr>
        <td>left_table</td>
    </tr>
  </table>
  <div style="clear:both;"></div>

  <table align="center">
    <tr>
        <td>desired_table</td>
    </tr>
  </table>
</table>

or

 <table align="left">
    <tr>
        <td>left_table</td>
    </tr>
  </table>

  <div style="clear:both;"></div>

  <table align="center">
    <tr>
        <td>desired_table</td>
    </tr>
  </table>

Upvotes: 4

Utpal - Ur Best Pal
Utpal - Ur Best Pal

Reputation: 4532

For the left aligned table change the width to 100% and it will work. 

<table align="center" >
    <tr>
        <td>left_table</td>
    </tr>
</table>
<table align="left" width="100%">
    <tr>
        <td>left_table</td>
    </tr>
</table>
<table align="center" >
    <tr>
        <td>desired_table</td>
    </tr>
</table>

Upvotes: 1

Dhru &#39;soni
Dhru &#39;soni

Reputation: 1058

Result -> http://jsfiddle.net/0LtqL8yh/embedded/result/ 

 <table border=1 width=80% height=30% align=left cellpadding=1 cellspacing=1>
        <tr height=30%>
            <td>First Row</td>
            <td>First Row</td>
            <td>First Row</td>
        </tr>
        <tr height=70%>
            <td>Second Row</td>
            <td>
                <table bgcolor=yellow border=1 width=80% height=80% align="center">
                    <tr>
                        <td>Inner Table</td>
                        <td>Inner Table</td>
                    </tr>
                    <tr>
                        <td>Inner Table</td>
                        <td>Inner Table</td>
                    </tr>
                </table>
            </td>
            <td>Second Row</td>
        </tr>
    </table>

Upvotes: 0

Related Questions