how to convert this from table tag to div tag

Question

I have a very simple table that I would like to convert to div for example purposes. I am having no luck with this.

Here is my page: http://jsbin.com/equfo

Basically I want to convert it to div because I'm tired of having tables like these where I want the button to show in the middle of the table at hand. but since I am using tags. the middle is never middle of the TABLE but instead is the middle of the TD tag.

Answer 1

Although this is more suited for divs, an easy alternative would be to move the button out of the table and just text-align: center on it in its own div.

Answer 2

You just need <TD colspan="2"> for the button and it will be in the center of the table. If you have more columns in your table increase colspan appropriately.

To display this with DIVs;

<div class="searchTable">
  <span>Enter SSN</span>
  <div class="odd">
     <span class="label">Enter Social Security <u>N</u>umber</b></span>
     <input type="text" id="SearchFormerTenant_ssn1"/>-
     <input type="text" id="SearchFormerTenant_ssn1"/>-
     <input type="text" id="SearchFormerTenant_ssn1"/>
  </div>
  <div class="even" style="width: 100%; text-align:center;">
    <input type="submit" id="SearchFormerTenant_0" value="Get Information"/>
  </div>
</div>

Answer 3

Do you want to fix this particular problem or learn CSS Positioning?

If you just want a quick solution, Dave has hit the nail on the head. If you want to learn more, you could do worse than start with these tutorials:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

http://www.brainjar.com/css/positioning/

There are plenty more like them on them on the intertubes. And there are those specifically geared to form layouts:

http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml

http://designshack.co.uk/articles/10-css-form-examples

It's not that complicated, but there more to it than can be easily described here.

Hope this helps.