如何将其从表标签转换为div标签

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

我有一个非常简单的表,我想转换为div为例。我对此没有运气。

这是我的页面: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.

基本上我想把它转换为div因为我已经厌倦了这样的表格,我希望按钮显示在手边的桌子中间。但因为我正在使用标签。中间区域从不在TABLE的中间,而是TD标签的中间位置。

3 个解决方案

#1

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.

您只需要按钮,它将位于表格的中心。如果表中有更多列,请适当增加colspan。

To display this with DIVs;

用DIV显示;

<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>

#2

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

您想解决这个特定问题还是学习CSS定位?

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:

在intertubes上有更多像他们一样的东西。还有一些专门用于形成布局:

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.

希望这可以帮助。

#3

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.

虽然这更适合div,但是一个简单的替代方法是将按钮移出表格,然后将文本对齐:在它自己的div中居中。

#1