Align table right,left,center with user input

Question

0.00/5 (No votes)

See more:

hi
i have tried for some code and not worked-out for me,

i have 3 radio buttons which says Right,Center and Left

now i want to dived the page into two equal parts vertically ,

if the user selects the right radio button the table should be created on right-side of the page,if he selects left table should be created on left-side of the page,if the user selects the Center radio button the table should be created on Center of the page,

this should not be overlap at any condition

please help me out with this

thanku

Posted 5-Jan-15 1:05am

murkalkiran

Add a Solution

Comments

Praveen Kumar Upadhyay 5-Jan-15 7:11am

float="left"
float="right"
float="both"

Should work.

Praveen Kumar Upadhyay 5-Jan-15 8:31am

Is this not working?

King Fisher 5-Jan-15 7:13am

Asp.net ?

murkalkiran 5-Jan-15 7:14am

yes using html

King Fisher 5-Jan-15 7:23am

If you are working in Asp.net Please Tag your Question Properly .

Sergey Alexandrovich Kryukov 5-Jan-15 7:15am

This is pretty much irrelevant. The question is about CSS. I think OP knows how to generate HTML, the only question is what CSS styles to use.
—SA

3 solutions

Solution 1

You can use table align property to set the table left ,right or center of the page

if you want to use CSS,

HTML

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

To align center,

CSS

table{
  margin-left: auto;
  margin-right: auto;
}

To align left

CSS

table{
 position: absolute;
 left: 0px;
}

or

CSS

table{
 float: left;
}

To align right

CSS

table{
 position: absolute;
 right: 0px;
}

or

CSS

table{
 float: right;
}

To divide page into two vertical columns

HTML

<div style = "width=100%">
<div style= "float:left;width:50%;"></div>
<div style= "float:left;width:50%;"></div>
</div>

Posted 5-Jan-15 2:57am

Dilan Shaminda

Updated 5-Jan-15 2:59am

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Suraj Sahoo | Coding Passion · Accepted Answer · 2015-01-05T03:40:00

Solution 2

Fiddle[^]
Please check the fiddle if this helps.
Done according to the need.
Please post back queries if any.
Thanks

Posted 5-Jan-15 3:40am

Suraj Sahoo | Coding Passion

Peter Leow · Accepted Answer · 2015-01-05T04:22:00

Solution 3

Check this out: http://jsfiddle.net/vj9y7ozo/[^]

Posted 5-Jan-15 4:22am

Peter Leow