1

私はフロントエンドにこのテーブルを持っており、これをコーディングするにはDIVがより良い方法であると読んでいますが、DIVで同じ構造をどのように表現しますか？

<table>
        <tr>
            <td colspan="6" class="title"><strong>Choose Dates</strong></td>
            <td colspan="2" class="title"><strong>Search by Name</strong></td>
            <td class="title"><strong>Status</strong></td>
        </tr>
        <tr>

            <td><input type="text" id="dateFrom" /></td>
            <td><strong>To</strong></td>
            <td></td>
            <td><input type="text" id="dateTo" /></td>

            <td><input type="checkbox"id="pendResCheckID" />Pending</td>
            <td><input type="checkbox"id="ConfResCheckID" />Confirmed</td>
            <td><input type="checkbox"id="CancResCheckID" />Canceled</td>

        </tr>
</table>
4

1 に答える 1

3

必ずしも s は必要ありません<div>。既存のフォーム要素をより有効に活用してください。

<form>
    <fieldset>
        <legend>Choose Dates</legend>
        <input> To <input>
    </fieldset>
    <fieldset>
        <legend>Status</legend>
        <label><input type="checkbox"> Pending</label>
        <label><input type="checkbox"> Confirmed</label>
        <label><input type="checkbox"> Canceled</label>
    </fieldset>
</form>

さて、実際の作業は、css を記述して、希望どおりにスタイルを設定することです。から境界線を削除することから始め、<fieldset>それらを隣同士に浮かせます。

fieldset {
    float: left;
    border: none;
}

http://jsfiddle.net/ZqQRh/1/をチェックしてください

（質問は主に構造に関するものであるため、重要な詳細と属性の一部を省略しました）

于 2013-03-19T11:19:52.677 に答える