как преобразовать это из табличного тега в тег div

Question

У меня есть очень простая таблица, которую я хотел бы преобразовать в div для примера. Мне не повезло с этим.

Вот моя страница: http://jsbin.com/equfo

По сути, я хочу преобразовать его в div, потому что мне надоело иметь такие таблицы, где я хочу, чтобы кнопка отображалась в середине таблицы под рукой. но так как я использую теги. середина никогда не является серединой таблицы, а является серединой тега TD.

Answer 1

Вам просто нужно <TD colspan="2"> для кнопки, и она будет в центре стола. Если в вашей таблице больше столбцов, соответственно увеличьте colspan.

Чтобы отобразить это с 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 2

Хотите решить эту проблему или научиться позиционированию CSS?

Если вы просто хотите быстрое решение, Дэйв ударил ногтем по голове. Если вы хотите узнать больше, вы можете сделать хуже, чем начать с этих уроков:

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

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

На межтрубных каналах их гораздо больше. И есть те, специально предназначенные для формирования макетов:

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

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

Это не так сложно, но здесь есть нечто большее, чем можно легко описать здесь.

Надеюсь, это поможет.

Answer 3

Хотя это больше подходит для div, простой альтернативой было бы переместить кнопку из таблицы и просто выровнять текст: отцентрировать ее в своем собственном div.