Table data move

Get Started
1

I have HTML


<table width="100%">
  <tr>
    <td>Search</td>
    <td><input type="text" name="textfield"></td>
    <td>Go</td>
    <td>User Name</td>
    <td><input type="text" name="textfield2"></td>
    <td>Password</td>
    <td><input type="text" name="textfield3"></td>
    <td>Login</td>
    <td>Sign Up</td>
  </tr>
</table>

I wish to move the data slightly as shown in the output html.

I want to move the text towards the direction as shown in the output image. What changes I need in my code ?

2

since you have only 1 row, I would get rid of the table and use semantically correct elements and css to position them where you like

3

how you are going to do that ? fieldset ? div ? span ?

Could you please clarify more and provide me the sample to test ?

4

it’ll be quicker for me to help you fix your own attempt to do it than me putting together the code and posting it.

5

Thanks.

Will it be possible for you to answer this I asked ?

how you are going to do that ? fieldset ? div ? span ?

Thanks for your time.

6

I replied with

it’ll be quicker for me to help you fix your own attempt to do it than me putting together the code and posting it.

what that means is that it’ll take less time for me to help you fix your attempt at a solution than it would for me to put the code together for you and post it.

7

exactly, Thats the reason I asked this to start with

fieldset ? div ? span ?

hope , you understand now.

8

fieldsets and labels would be the correct way to go

if you are just looking for a quick fix, though, you can try this –

<table width="100%">
  <tr>
    <td>Search 
        <input type="text" name="textfield"> 
        Go</td>
    <td>User Name 
        <input type="text" name="textfield2">
        Password 
        <input type="text" name="textfield3">
        Login</td>
    <td>Sign Up</td>
  </tr>
</table>

and if that’s still not okay, take the 100% off the <table>

9

ok, to help you get started, I wouldn’t use a table because in this case imho it is semantically incorrect.

I would use a combination of <ul> (with the <li>'s displayed inline) <label>s and <input>s

10

Excellent . The solution was so nice and simple !

By the way, I did little variation to your code though. I did this as my requirement


<table width="100%">
  <tr>
    <td>Search 
        <input type="text" name="textfield"> 
        Go</td>
    <td>User Name 
        <input type="text" name="textfield2">
        Password 
        <input type="text" name="textfield3">
		</td>
        <td>Login</td>
    <td>Sign Up</td>
  </tr>
</table>
11

The most semantic answer is to use the FORM element and remove the TABLE completely as you are using form controls which are supposed to appear with in form and be supported by the explicitly associated LABEL elements.

From that crude diagram; it appears that there are two forms in action or at the very least two separated grouped form controls.