web-dev-qa-db-de.com

Ersetzen Sie HTML-Tabelle durch Divs

In Ordnung, ich versuche, in die Idee einzugehen, dass HTML-Tabellen nicht verwendet werden sollten, und dass divs sein sollten. Ich habe jedoch häufig Code, der dem folgenden ähnelt

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

Ich möchte, dass die Beschriftungen ausgerichtet werden, und ich möchte, dass die Steuerelemente ausgerichtet werden. Wie würde ich das tun, ohne Tabellen zu verwenden?

55
Jacob Adams

Dies sollte den Trick machen.

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

Ich hoffe du bekommst das Konzept.

43
partoa

Beachten Sie, dass Tabellen zwar als primäres Mittel für das Seitenlayout nicht empfohlen werden, aber sie haben immer noch ihren Platz. Tabellen können und sollten verwendet werden, wenn und wo dies angebracht ist und bis einige der populäreren Browser (ahem, IE, ahem) mehr standardkonform sind manchmal der beste Weg zu einer Lösung.

25
KOGI

Ich suchte nach einer einfachen Lösung und fand diese Code , die für mich funktionierte. Das right div ist eine dritte Spalte, die ich aus Gründen der Lesbarkeit belassen habe.

Hier ist das 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>

Und das 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
Wavesailor

Sie können einfache Float-basierte Formulare erstellen, ohne Ihr flüssiges Layout verlieren zu müssen. Beispielsweise:

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

Dies kann jedoch vorkommen, wenn Sie komplexe Formularlayouts haben, in denen ein Raster aus mehreren Spalten mit fester und flexibler Breite vorhanden ist. An diesem Punkt müssen Sie sich entscheiden, ob Sie mit divs weitermachen und das flüssige Layout aufgeben möchten, um einfach alles an festen Pixelpositionen abzulegen, oder ob Sie es Tabellen überlassen möchten.

Für mich persönlich ist das flüssige Layout ein wichtigeres Merkmal für die Benutzerfreundlichkeit als die genauen Elemente, die für die Gestaltung des Formulars verwendet wurden. Daher greife ich normalerweise zu Tabellen.

4
bobince

Im Grunde läuft es darauf hinaus, eine Seite mit fester Breite zu verwenden und die Breite für diese Beschriftungen und Steuerelemente festzulegen. Dies ist die gebräuchlichste Art und Weise, wie tabellenlose Layouts implementiert werden.

Es gibt viele Möglichkeiten, Breiten einzustellen. Blueprint.css ist ein sehr beliebtes CSS-Framework, mit dem Sie Spalten/Breiten einrichten können.

1
Ken Browning

hierfür gibt es ein sehr nützliches Online-Tool, das die Tabelle einfach automatisch in divs umwandelt:

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

Und das Video, das es erklärt: https://www.youtube.com/watch?v=R1ArAee6wEQ

Ich benutze das täglich. Ich hoffe, es hilft ;)

1
Kaszoni Ferencz