Заменить таблицу HTML на Divs

хорошо, я пытаюсь купить идею о том, что таблицы html не должны использоваться, и что divs должны быть. Тем не менее, у меня часто есть код, который напоминает следующее



<table>

    <tr>

        <td>First Name:</td>

        <td colspan="2"><input  id="txtFirstName"/></td>

    </tr>

    <tr>

        <td>Last Name:</td>

        <td colspan="2"><input  type="text" id="txtLastName"/></td>

    </tr>

    <tr>

        <td>Address:</td>

        <td>

            <select type="text" id="ddlState">

                <option value="NY">NY</option>

                <option value="CA">CA</option>

            </select>

        </td>

        <td>

            <select type="text" id="ddlCountry">

                <option value="NY">USA</option>

                <option value="CA">CAN</option>

            </select>

        </td>

    </tr>

</table>


Я хочу, чтобы метки были выровнены и я хочу, чтобы элементы управления были выровнены. Как бы я сделал это без использования таблиц?

820   6  

6 ответов:

Это должно сделать трюк.

<style>
div.block{
  overflow:hidden;
}
div.block label{
  width:160px;
  display:block;
  float:left;
  text-align:left;
}
div.block .input{
  margin-left:4px;
  float:left;
}
</style>

<div class="block">
  <label>First field</label>
  <input class="input" type="text" id="txtFirstName"/>
</div>
<div class="block">
  <label>Second field</label>
  <input class="input" type="text" id="txtLastName"/>
</div>

Я надеюсь, что вы получите понятие.

43  
2013-03-30 20:57:21

пожалуйста, имейте в виду, что хотя таблицы не рекомендуется в качестве основного средства макета страницы,у них еще есть свое место. Таблицы могут и должны используйте, когда и где это уместно и до тех пор, пока некоторые из наиболее популярных браузеров (кхм, т. е., кхм) не станут более совместимыми со стандартами, таблицы иногда лучший путь к решению.

25  
2009-03-31 21:26:59

Я искал повсюду простое решение и нашел это код это сработало для меня. Элемент right div-это третья колонка, которую я оставил для удобства чтения.

вот HTML:

<div class="container">
  <div class="row">
    <div class="left">
      <p>PHONE & FAX:</p>
    </div>
    <div class="middle">
      <p>+43 99 554 28 53</p>
    </div>
    <div class="right"> </div>
  </div>
  <div class="row">
    <div class="left">
      <p>Cellphone Gert:</p>
    </div>
    <div class="middle">
      <p>+43 99 302 52 32</p>
    </div>
    <div class="right"> </div>
  </div>
  <div class="row">
    <div class="left">
      <p>Cellphone Petra:</p>
    </div>
    <div class="middle">
      <p>+43 99 739 38 84</p>
    </div>
    <div class="right"> </div>
  </div>
</div>

и CSS:

.container {
    display: table;
    }
.row  {
    display: table-row;
    }
.left, .right, .middle {
    display: table-cell;
    padding-right: 25px;
    }
.left p, .right p, .middle p {
    margin: 1px 1px;
   }
10  
2013-12-23 12:10:11

вы можете создавайте простые формы на основе поплавка, не теряя свой жидкий макет. Например:

<style type="text/css">
    .row { clear: left; padding: 6px; }
    .row label { float: left; width: 10em; }
    .row .field { display: block; margin-left: 10em; }
    .row .field input, .row .field select {
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -khtml-box-sizing: border-box;
    }
</style>

<div class="row">
    <label for="f-firstname">First name</label>
    <span class="field"><input name="firstname" id="f-firstname" value="Bob" /></span>
</div>
<div class="row">
    <label for="f-state">State</label>
    <span class="field"><select name="state" id="f-state">
        <option value="NY">NY</option>
    </select></span>
</div>

Это имеет тенденцию ломаться, хотя, когда у вас есть сложные макеты форм, где есть сетка из нескольких фиксированных и гибких столбцов ширины. В этот момент Вы должны решить, следует ли придерживаться divs и отказаться от жидкого макета в пользу просто отбрасывания всего в фиксированные позиции пикселей или позволить таблицам делать это.

для меня лично, жидкий макет является более важной функцией удобства использования, чем точные элементы, используемые для размещения формы, поэтому я обычно иду за таблицами.

4  
2009-03-31 21:56:55

в основном это сводится к использованию страницы фиксированной ширины и настройке ширины для этих меток и элементов управления. Это наиболее распространенный способ реализации макетов без таблиц.

есть много способов, чтобы идти о настройке ширины. копирку.css это очень популярная структура css, которая может помочь вам настроить столбцы/ширины.

1  
2009-03-31 20:53:22

для этого есть очень полезный онлайн-инструмент, просто автоматически преобразуйте таблицу в divs:

http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/

и видео, которое объясняет это:https://www.youtube.com/watch?v=R1ArAee6wEQ

Я использую это на ежедневной основе. Надеюсь, это поможет ;)

1  
2015-07-15 00:58:10

Comments

    Ничего не найдено.
Click here to cancel reply.