CODEWITHSUNDEEP
csshtml
ScriptLearner
ScriptLearner

Reputation: 163

Alignment of table issue in HTML

I want to add 4 tables on my page , two towards left(one above the other) and two towards right(one above the other). Currently I am able to display only two tables towards left alignment but when I am trying towards right alignment property in div as <table border="1" style="width:250px" align="right"> I am getting distortions. Please find the code as below:-

Can anyone suggest what can be the cause for the issue, I don't want to use CSS but want to accomplish with the alignment property alone.

HTML 

<table border="1" style="width:250px">
  <tr><td>UK</td></tr>
  <tr><td>USA</td></tr>
  <tr><td>India</td></tr>
  <tr><td>Australia</td></tr>
  <tr><td>SouthAfrica</td></tr>
</table>

  <br/><br/><br/><hr size="2"><br/><br/>
  <p><b><u>Countries</u></b> </p> <br/>

<table border="1" style="width:250px" align="left">
  <tr><td>UK</td></tr>
  <tr><td>USA</td></tr>
  <tr><td>India</td></tr>
  <tr><td>Australia</td></tr>
  <tr><td>SouthAfrica</td></tr>
</table>

Upvotes: 1

Views: 80

Answers (3)

Aravind Bharathy
Aravind Bharathy

Reputation: 1610

Instead of using any alignment property just use tables to make such 4 table alignment.

Try this 

<table>
<tr>
    <td>
    <table border="1" style="width:250px">
      <tr><td>UK</td></tr>
      <tr><td>USA</td></tr>
      <tr><td>India</td></tr>
      <tr><td>Australia</td></tr>
      <tr><td>SouthAfrica</td></tr>
    </table>
    </td>
    <td>
    <table border="1" style="width:250px">
      <tr><td>UK</td></tr>
      <tr><td>USA</td></tr>
      <tr><td>India</td></tr>
      <tr><td>Australia</td></tr>
      <tr><td>SouthAfrica</td></tr>
    </table>
    </td>
</tr>
<tr>
    <td>
    <table border="1" style="width:250px">
      <tr><td>UK</td></tr>
      <tr><td>USA</td></tr>
      <tr><td>India</td></tr>
      <tr><td>Australia</td></tr>
      <tr><td>SouthAfrica</td></tr>
    </table>
    </td>
    <td>
    <table border="1" style="width:250px">
      <tr><td>UK</td></tr>
      <tr><td>USA</td></tr>
      <tr><td>India</td></tr>
      <tr><td>Australia</td></tr>
      <tr><td>SouthAfrica</td></tr>
    </table>
    </td>
</tr>
</table>

DEMO HERE

Upvotes: 1

Anju Aravind
Anju Aravind

Reputation: 3362

i think this is what you needed. check here

<table border="1" width="30%" style="float:left">

Upvotes: 3

Naveed Ramzan
Naveed Ramzan

Reputation: 3593

You can do something like this 

<table width="50%">
    <tr>
        <td>
            <table></table>
        </td>
    </tr>
    <tr>
        <td>
            <table></table>
        </td>
    </tr>
</table>
<table width="50%">
    <tr>
        <td>
            <table></table>
        </td>
    </tr>
    <tr>
        <td>
            <table></table>
        </td>
    </tr>
</table>

Upvotes: 0

Related Questions