html - 我如何用最佳实践 div 来表示这一点？

Question

我在我们的前端有这张表，我一直在阅读 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>

Answer 1

您不一定需要任何<div>s，只需更好地利用现有的表单元素即可；

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

（我省略了一些基本的细节和属性，因为问题主要是关于结构的）